Fanybox Gallery在悬停时停止自动播放 [英] Fanybox gallery stop autoplay on hover

问题描述

如果用户首先单击下一个"按钮，是否有一种解决方法可以停止autoPlay?还是要在用户悬停图片时停止autoPlay?

解决方案

您可以使用$.fancybox.play()方法在afterShow内的鼠标hover上切换幻灯式(自动)幻灯片放映像这样的回调:

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        autoPlay: true, // starts slideshow
        afterShow: function () {
            $(".fancybox-outer").on("mouseover", function () {
                $.fancybox.play(false); // stops slideshow
            });
        }
    }); // fancybox
}); // ready

通知，我们的目标是.fancybox-outer选择器，因为您可能会悬停导航箭头区域，而这不会停止幻灯片放映.

请参见 JSFIDDLE

注意:这是用于fancybox v2.x

Is there a solution to stop the autoPlay if the user first clicks the "next" button? Or to stop the autoPlay if user hovers the image?

解决方案

You could use the $.fancybox.play() method to toggle the fancybox (auto) slideshow on mouse hover within the afterShow callback like :

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        autoPlay: true, // starts slideshow
        afterShow: function () {
            $(".fancybox-outer").on("mouseover", function () {
                $.fancybox.play(false); // stops slideshow
            });
        }
    }); // fancybox
}); // ready

Notice we are targeting the .fancybox-outer selector since you could be hovering the navigation arrows area(s), and that wouldn't stop the slideshow.

See JSFIDDLE

NOTE: this is for fancybox v2.x

这篇关于Fanybox Gallery在悬停时停止自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！