jquery - Fancybox 下载图片

Question

我正在尝试为您当前在 Fancybox 中查看的图像制作一个下载按钮。我认为这将是一件容易的事情，因为 url 已经存储在<img>标签中，所以我想我可以将它重新用于链接。

我什至试图在 fancybox 中找到<img>' src，然后.append找到href链接（<a>标签）的 ' 。我只是缺乏 jQuery 技能来完成它。

fancybox.js我已经添加了<a>标签：

<img class="fancybox-image" src="image.jpeg" alt="" />
<a href="" class="test">Download</a>

我试图复制并粘贴image.jpeg这样的东西，但没有奏效：

var href = $('.fancybox-image').attr('href');
$('a.test').attr('href', href );

Answer 1

我不确定我是否理解您的问题，但您可以在 fancyBox 的标题区域内添加下载链接 - http://jsfiddle.net/zAe6Z/

$(".fancybox").fancybox({
    afterLoad: function() {
        this.title = '<a href="' + this.href + '">Download</a> ' + this.title;
    },
    helpers : {
        title: {
            type: 'inside'
        }
    }
});

Answer 2

jQuery 方式

这个答案显示了如何使用标准 jQuery 方法来完成此操作，并更正了 OP 给出的代码。另请参阅Janis 的回答，了解如何使用 Fancybox 完成此操作。

您在此处发布的代码不起作用，因为标签中没有href属性。<img>您应该改用该src属性：

var href = $('.fancybox-image').attr('src');
$('a.test').attr('href', href );

但是，这仅在只有一张带有 class 的图像时才有效.fancybox-image。如果您的图库中有多个图像，请改用以下方法：

$('.fancybox-image').each(function (){
    var href = $(this).attr('src');
    $(this).next("a").attr("href", href);
});

jsFiddle在这里