Question

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

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

谢谢！

编辑：如果您正在考虑“umm fancybox的自动播放？”，请确定，也可以。我还是想尝试Magnific

Answer 1

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

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

当然这是非常基本的实现，但你可以尽可能地去。

Answer 2

虽然有一个怪癖，但在经过一些修补之后我才想出来。我在页面上有两个magnificPopup实例。一个只调用元素而不是图库模式，一个调用数组和库中的所有项目。这段代码在两者的后面。然而，它影响两个实例，我的'非'画廊每5秒刷新一次！无论如何，以下代码是您正在寻找的：

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

Answer 3

我的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 用于输入带有最后一个popuped图像的幻灯片放映并防止循环播放。

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

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

这很好，至少对于我测试的一些WebKit和Gecko浏览器。

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

Answer 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 );
                    }
                } )();
            }
        }
    } );
    
}

自动播放（幻灯片）巨型灯箱中的灯箱图库？

4 个答案: