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

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 行（取消），添加：

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

它会正常工作。

但是，这意味着您需要该文件的本地副本并自己（本地）对其进行最小化，直到作者可以更新为止。