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

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无论我点击哪个图像，总是，第一个得到opend。我希望它与它完全一样，只是区别在于点击的图像首先被打开。

Answer 1

看起来magnific-popup代码中有一个错误，它永远不会传递该索引。

在v1.1.0 jquery.magnific-popup.js，第931行（unmin'd）中，添加：

itemOpts.index = index;  // add this line
mfp._openClick({mfpEl:items}, jqEl, itemOpts);  <-- before this line

它会工作正常。

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