javascript - 华丽的弹出画廊添加下载按钮

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();
});