[英]How can I make JSSOR Slider have clickable images without breaking slide functionality?
I am using JSSOR slider for multiple images on a website. 我正在将JSSOR滑块用于网站上的多个图像。
I have added a <a href="...
link to the images in the slides which opens up a fancybox window to show a larger version. 我在幻灯片中的图像上添加了
<a href="...
链接,该链接打开了一个花式框窗口以显示更大的版本。
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. 问题在于,当您单击并拖动鼠标时,它会滑动图像,但由于发生单击事件,因此还会启动fancybox控件。
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
}
?>
Jssor Slider will stop 'click' event from firing if there is successful drag operation. 如果成功进行拖动操作,Jssor Slider将停止触发“ click”事件。 But I am not sure if the fancy box will capture the 'click' event before jssor slider.
但是我不确定花哨的盒子是否会在jssor滑块之前捕获'click'事件。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.