我正在尝试将Magnific-Popup灯箱与我的 Meteor 应用程序一起使用。我遇到的问题是,当我启动画廊时,我无法关闭画廊弹出窗口。点击[x]按钮或点击背景没有任何效果。否则,灯箱似乎工作正常。使用单个弹出窗口按预期工作(包括关闭),但画廊没有。很难看到发生了什么,因为它会使 Chrome 检查器崩溃。有时我会看到以下错误:
RangeError: Maximum call stack size exceeded
如果我在下面的代码中设置 gallery=false,弹出窗口工作正常,但显然我失去了画廊功能......
谢谢你。
html:
<div class="popup-gallery">
<a href="{{imageURL}}">
<img src="{{imageURL}}" alt="">
</a>
<a href="{{imageURL}}">
<img src="{{imageURL}}" alt="">
</a>
<a href="{{imageURL}}">
<img src="{{imageURL}}" alt="">
</a>
</div>
js:
Template.itemPage.rendered = function() {
console.log("itemPage rendered");
$('#itemTiles').imagesLoaded(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Test</small>';
}
}
});
..
}
我已将该站点临时部署到http://miyako.meteor.com/以防万一。这是我第一次涉足 Web 开发,所以请原谅凌乱的代码!:)