我一直在寻找一个负责任的灯箱,将自动播放开始在画廊指定点画廊。 庄重的弹出窗口看起来非常稳固。 任何人有办法让它为灯箱幻灯片行动 - 即,具有画廊autoadvance?
从长相Magnific酒店文档一样应该有一种方式,利用了magnificPopup.next();
, magnificPopup.updateItemHTML();
和/或回调事件,但这已经超出了我的JavaScript编程
谢谢!
编辑:如果你想“嗯的fancybox的将autoPlay?”当然,这也会工作。 我还是想尝试Magnific酒店
简而言之间隔open
回调。
callbacks: {
open: {
setInterval(function() {
$.magnificPopup.instance.next();
}, 2000);
}
}
当然,这是很基本的实现,但你可能就需要走。
我想通了一点修修补补虽然有一个怪癖之后。 我在页面上magnificPopup的两个实例。 一位名为只元素,而不是在画廊模式之一,在启用的数组和画廊的所有项目。 此代码是在两个版本。 然而,它的影响这两种情况下,我的“非”画廊刷新每5秒! 无论如何,下面的代码是你在找什么:
callbacks: {
open: setInterval(function() {
$.magnificPopup.instance.next()
}, 5000)}
我的弹出Magnific酒店幻灯片使用小形状与“开始幻灯片放映”按钮和用于所希望的时间间隔的输入。 幻灯片放映对象具有基本上与下面的代码:
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图像进入幻灯片并防止循环。
庄重的弹出得到了在打开和关闭事件处理多余的线条:
$('.popup-parent-container').magnificPopup({
// ...
callbacks: {
open: function() {
slideshow.currImgNo = this.index;
},
close: function() {
if (slideshow.intervalTimer) {
clearInterval(slideshow.intervalTimer);
}
}
}
});
这工作得很好,至少对某些WebKit和我测试Gecko浏览的。
我的版本还推出全屏模式,但需要更多的代码跨浏览器兼容。