Search code examples
jqueryfancybox

Fanybox gallery stop autoplay on hover

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?

Solution

  • 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