我正在对网站上的多个图像使用 JSSOR slider 。
我添加了<a href="...
链接到幻灯片中的图像,这将打开一个 fancybox 窗口以显示更大的版本。
问题是,当您单击并拖动鼠标时,它会滑动图像,但也会启动 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
}
?>
最佳答案
如果拖动操作成功,Jssor Slider 将停止触发“单击”事件。但我不确定花式框是否会捕获 jssor slider 之前的“点击”事件。
因此,请按照以下方式以编程方式打开您的精美盒子,
<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>
关于jquery - 如何使 JSSOR Slider 具有可点击的图像而不破坏幻灯片功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28068816/