自动播放（幻灯片）放大灯箱中的灯箱画廊？答案

【问题标题】：Autoplay (slideshow) a lightbox gallery in magnific lightbox?自动播放（幻灯片）放大灯箱中的灯箱画廊？
【发布时间】：2013-05-13 02:02:32
【问题描述】：

我一直在寻找一个响应式灯箱，它会从画廊中的指定点开始自动播放画廊。 Magnific Popup 看起来很扎实。任何人都有办法让它充当灯箱幻灯片——也就是说，让画廊自动前进吗？

从Magnific documentation 看来应该有一种方法可以利用magnificPopup.next();、magnificPopup.updateItemHTML(); 和/或回调事件，但这超出了我的javascripting 范围

谢谢！

编辑：如果你在想“嗯，fancybox 的自动播放？”当然，这也可以。我还是想试试 Magnific

【问题讨论】：

标签： jquery slideshow lightbox magnific-popup

【解决方案1】：

只需将间隔放入open 回调中。

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

当然这是非常基本的实现，但您可以根据需要进行操作。

【讨论】：

看起来不错，但不工作。我认为是错字，从关闭setInterval( 开始。不好意思说我怎么弹也抓不住。感谢您的帮助德米特里
@henry 是的，它缺少我已经添加的function()。上面的代码现在应该可以工作了。但另一个问题是当点击下一个/上一个按钮时如何停止幻灯片播放？
你好@JohnnyQ，当你点击下一个/上一个按钮时，你有没有发现避免幻灯片放映？

【解决方案2】：

My Magnific Popup 幻灯片放映使用带有“开始幻灯片放映”按钮和所需间隔的输入的小表单。幻灯片对象基本上有以下代码：

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 */);
});

幻灯片放映属性currImgNo用于进入带有最后弹出图像的幻灯片放映并防止循环播放。

Magnific Popup 在打开和关闭事件处理程序中有额外的行：

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

这很好用，至少对于我测试过的一些 WebKit 和 Gecko 浏览器来说是这样。

我的版本还启动全屏模式，但这需要更多代码才能跨浏览器工作。

【讨论】：

【解决方案3】：

虽然有一个怪癖，但经过一番修补后，我想通了。我在页面上有两个 magnificPopup 实例。一种只在元素上调用，而不是在画廊模式下，另一种是启用数组和画廊中的所有项目。此代码在两者中的后者中。但是，它会影响两个实例，并且我的“非”图库每 5 秒刷新一次！不管怎样，下面的代码就是你要找的：

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

【讨论】：

【解决方案4】：

我会把我的帽子扔进擂台。这是我最终用于幻灯片的内容。这将在加载图像时重置幻灯片计时器。

// .slidegroup is the specific class I'm using to define my slideshow.
if( $( '.slidegroup' ).length ) {
            
    let slideGroupTimer;
    
    $( '.slidegroup' ).magnificPopup( {
        type        : 'image',
        tLoading    : 'Loading image #%curr%...',
        mainClass   : 'mfp-img-mobile',
        preloader   : true,
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
        },
        callbacks: {
            imageLoadComplete: function() {
                slideGroupTimer = clearInterval( slideGroupTimer );
                ( function() {
                    if( 'undefined' === typeof slideGroupTimer ) {
                        slideGroupTimer = setInterval( function() {
                            $.magnificPopup.instance.next()
                        }, 8000 );
                    }
                } )();
            }
        }
    } );
    
}

【讨论】：