href 内的输出变量 - Javascript

Question

我正在为我的画廊使用 Magnific Popup。当您单击缩略图时，它会弹出图像。我正在尝试在弹出窗口中添加一个 "Download image" 按钮。我的 HTML 片段显示正常，但下载 link 的 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 变量放入锚点的 href 中？

Answer 1

只需将变量放在引号外即可。

markup: '<div class="mfp-figure">'+
                '<div class="mfp-close"></div>'+
                '<div class="download-img"><a href="' + yourVar + '">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>',

Answer 2

下面的 link 向您展示了一些使用 href 的方法，有些好，有些不好。看看

特别是用户名 demp 的回答。

谢谢，段

Answer 3

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

所以将它添加到您的 Magnific Popup 选项中

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

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

href 内的输出变量 - Javascript

Output variable inside an href - Javascript

html

javascript

magnific-popup