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

Posted 2023-05-07

【中文标题】自动播放（幻灯片）放大灯箱中的灯箱画廊？

【英文标题】：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

【参考方案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 );
                    
                 )();
            
        
     );