如何在不破坏幻灯片功能的情况下使 JSSOR Slider 具有可点击的图像？

Question

我正在为网站上的多个图像使用 JSSOR 滑块。

我在幻灯片中的图像中添加了 <a href="... link，这会打开一个 fancybox window 以显示更大的版本。

问题是，当您单击并拖动鼠标时，它会滑动图像，但由于有单击事件，还会触发 fancybox 控件。

有没有办法阻止这种情况发生？

代码：

<?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                   
    }
?>

Answer 1

如果拖动操作成功，Jssor Slider 将停止触发 'click' 事件。但我不确定花式框是否会在 jssor 滑块之前捕获 'click' 事件。

所以，请按照以下方式以编程方式打开您的精美盒子，

<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>

如何在不破坏幻灯片功能的情况下使 JSSOR Slider 具有可点击的图像？

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

jquery

jssor