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

Question

我想在我的页面上的所有图像上启用放大弹出窗口。我不想更改 DOM(用 anchor 围绕我的图像标签，如 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

它会工作得很好。

但是，这意味着您需要该文件的本地副本并自行(在本地)制作它，直到作者可以更新为止。