How can I make JSSOR Slider have clickable images without breaking slide functionality?

I am using JSSOR slider for multiple images on a website.

I have added a <a href="... link to the images in the slides which opens up a fancybox window to show a larger version.

The problem is that when you click and drag the mouse, it slides the image, but also fires up the fancybox control since there is a click event.

Is there a way to stop this from happening?

Code:

<?php
    foreach($image as $img){
?>
    <div>
        <a u="image" class="fancybox" href="images/uploads/<?php echo($img); ?>">
            <img u="image" style="width=auto;" src="images/uploads/<?php echo($img); ?>" />
        </a>
    </div>
<?php                   
    }
?>

Solution

Jssor Slider will stop 'click' event from firing if there is successful drag operation. But I am not sure if the fancy box will capture the 'click' event before jssor slider.

So, please open your fancy box programmatically in following manner,

<script>

    jQuery(document).ready(function ($) {
        var options = {

            $AutoPlay: true,                                   //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $DragOrientation: 1                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        function SliderClickEventHandler(slideIndex, event) {
            //open fancy box
        }

        jssor_slider1.$On($JssorSlider$.$EVT_CLICK, SliderClickEventHandler);
    });
</script>