使用大量弹出窗口打开页面上的所有图像

Question

我想在页面上的所有图片上启用大量弹出窗口。我不想改变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 无论我点击哪个图像，总是第一个得到开启。我希望它与它完全一样，只是区别于首先打开点击的图像。

Answer 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

它会正常工作。

但是，这意味着您需要该文件的本地副本并自行（本地）缩小，直到作者可以更新。