Autoplay (slideshow) a lightbox gallery in magnifi

Question

I've been looking for a responsive lightbox that will autoplay a gallery starting at a specified point in the gallery. Magnific Popup looks pretty solid. Anyone have a way for it to act as a lightbox slideshow - that is, have the gallery autoadvance?

Looks from the Magnific documentation like there should be a way that makes use of magnificPopup.next();, magnificPopup.updateItemHTML(); and/or callback events, but that's beyond my javascripting

thanks!

edit: if you're thinking "umm fancybox's autoPlay?," sure, that would work also. I'd still like to try out Magnific

Answer 1

I figured it out after a bit of tinkering though there is a quirk. I have two instances of magnificPopup on the page. One called only on elements and not in gallery mode and one with all items in an array and gallery enabled. This code is in the later of the two. It, however, effects BOTH instances and my 'non' gallery refreshes every 5 seconds! Regardless, the below code is what you're looking for:

 callbacks: {
    open: setInterval(function() {
             $.magnificPopup.instance.next()
                }, 5000)}

Answer 2

My Magnific Popup slide show uses a small form with a "Start Slide Show" button and an input for the desired interval. The slide show object has basically the following code:

var slideshow = {
    interval: 4,
    intervalTimer: null,
    currImgNo: 0,
    insertController: function(parentElement) {
        // DOM code to create form html
        $(slideShowStartButton).on('click', function(e){
            $('.popup-parent-container').magnificPopup('open', slideshow.currImgNo);
            if ($.magnificPopup.instance.index + 1
                    < $.magnificPopup.instance.items.length) {
                $.magnificPopup.instance.next();
                slideshow.currImgNo++;
            } else {
                $('.popup-parent-container').magnificPopup('close');
            }
        }, slideshow.interval * 1000);
    });
}

$(document).ready(function() {
    slideshow.insertController(/* This code depends on the slide show controller html */);
});

The slide show property currImgNo is used to enter the slide show with the last popuped image and to prevent looping.

Magnific Popup got extra lines in the open and close event handlers:

$('.popup-parent-container').magnificPopup({
    // ...
    callbacks: {
        open: function() {
            slideshow.currImgNo = this.index;
        },
        close: function() {
            if (slideshow.intervalTimer) {
                clearInterval(slideshow.intervalTimer);
            }
        }
    }
});

This works fine, at least for some of WebKit and Gecko browsers that I tested.

My version additionally launches full screen mode, but that requires some more code to work across browsers.

Answer 3

Simply put interval in open callback.

callbacks: {
    open: {
       setInterval(function() {
            $.magnificPopup.instance.next();
       }, 2000);
   }
}

Of course it's very basic implementation, but you may go as far as you need.