1

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

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

谢谢！

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

4

4 回答 4

2

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

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

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

于 2013-05-18T11:33:31.360 回答
0

我的 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 浏览器来说是这样。

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

于 2013-12-21T11:04:20.100 回答
0

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

callbacks: {
    open: setInterval( function() {
        $.magnificPopup.instance.next()
    }, 5000 )
}
于 2013-06-06T15:43:38.510 回答
0

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

// .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 );
                    }
                } )();
            }
        }
    } );
    
}
于 2021-05-25T15:08:20.317 回答