Question

我有以下问题：客户希望有可能通过点击下载按钮从图库下载图像。那么有没有办法在库弹出窗口中添加下载按钮。是的，在用户点击缩略图后，该按钮必须位于弹出窗口内。代码看起来就像那样。

<div class="gallery">
<a href="images/gallery-img-01.jpg"><img src="images/gallery-img-01.jpg"/></a>
<a href="images/gallery-img-02.jpg"><img src="images/gallery-img-02.jpg"/></a>
<a href="images/gallery-img-03.jpg"><img src="images/gallery-img-03.jpg"/></a>
<a href="images/gallery-img-04.jpg"><img src="images/gallery-img-04.jpg"/></a>

Answer 1

您可以从图像类型更改为内嵌类型，然后从那里调整标记。这样的事情（here it is in a fiddle）：

$(".gallery a").click(function(e) {
  var file = $(this).attr("href");
  $.magnificPopup.open({
    items: {
      src: $('<img src="' + file + '"/><a class="download" href="' + file + '">Download me</a>'),
      type: 'inline'
    },
    closeBtnInside: false,
  });
  e.preventDefault();
});

Magnific Popup Gallery添加下载按钮

1 个答案: