Question

我在我的画廊使用Magnific Popup。单击缩略图时，会弹出图像。我正在尝试添加一个＆＃34;下载图片＆＃34;弹出窗口内的按钮。我有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变量放在锚点中

Answer 1

如果您检查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

的完整演示

Answer 2

只是将变量放在引号之外。

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 3

以下链接向您展示了一些可以使用href的方法，其中一些是好的，另一些是坏的。看看https://stackoverflow.com/a/11348403/886393

特别是用户名demp的答案。

谢谢，第

href中的输出变量 - Javascript

3 个答案: