我想在页面上的所有图片上启用大量弹出窗口。我不想改变DOM(使用documentation中建议的锚点环绕我的图像标签。)
我的DOM就像
<div id="content">
<img src="img/mw1.png" class="figure-img img-fluid">
<img src="img/mw2.png" class="figure-img img-fluid">
<img src="img/mw3.png" class="figure-img img-fluid">
</div>
我有JS:
var $imgs = [];
$('img').each(function(idx) {
var obj = {
src: $(this).attr('src')
}
$imgs.push(obj);
var elem = $(this);
$(this).click(function() {
console.log('clicked on img', idx);
$('#content').magnificPopup('open', idx);
});
});
$('#content').magnificPopup({
items: $imgs,
type: 'image',
gallery: {
enabled: true
},
});
https://www.codeply.com/go/A2yRWr4bDi 无论我点击哪个图像,总是第一个得到开启。我希望它与它完全一样,只是区别于首先打开点击的图像。
答案 0 :(得分:1)
看起来magnific-popup
代码中的一个错误,它从未传递过该索引。
在v1.1.0 jquery.magnific-popup.js第931行(unmin&#39; d)中,添加:
itemOpts.index = index; // add this line
mfp._openClick({mfpEl:items}, jqEl, itemOpts); <-- before this line
它会正常工作。
但是,这意味着您需要该文件的本地副本并自行(本地)缩小,直到作者可以更新。