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's answer，了解如何使用 Fancybox 完成此操作。

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

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

但是，这只有在只有一张图片的类别为 .fancybox-image 时才有效。如果您的图库中有多张图片，请改用以下方法：

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

jsFiddle here