javascript - href 内的输出变量 - Javascript

Question

我正在为我的画廊使用 Magnific Popup。当您单击缩略图时，它会弹出图像。我正在尝试在弹出窗口中添加“下载图像”按钮。我的 HTML 代码段显示正常，但下载链接的 href 需要使用 img url 填充。

JS代码如下:

markup: '<div class="mfp-figure">'+
                '<div class="mfp-close"></div>'+
                '<div class="download-img"><a href="#">Download image</a></div>'+
                '<figure>'+
                    '<div class="mfp-img"></div>'+
                    '<figcaption>'+
                        '<div class="mfp-bottom-bar">'+
                            '<div class="mfp-title"></div>'+
                            '<div class="mfp-counter"></div>'+
                        '</div>'+
                    '</figcaption>'+
                '</figure>'+
            '</div>',

如何将图像 src 变量放入 anchor 的 href 中？

Answer 1

如果您检查 Magnific Popup API，您会发现它为事件 markupParse 提供了回调

因此将其添加到您的放大弹出选项中

callbacks: {
      markupParse: function(template, values, item) {
       template.find('.download-img a').prop('href',item.src);
      }
    }

完整演示:http://codepen.io/gpetrioli/pen/reoqQv