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

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

它会正常工作。

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

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

Open all images on page with magnific popup

jquery

magnific-popup