Fancybox下载图片 [英] Fancybox Download Image

问题描述

我正在尝试为您当前在Fancybox中查看的图像创建一个下载按钮. 我认为这是一件容易的事，因为URL已存储在<img>标记中，所以我认为我可以将其重新用于链接.

I am trying to make a download button for the image you're currently viewing in Fancybox. I thought it would be a easy thing to do because the url is already stored in the <img> tag so I thought I could just re-use that for the link.

我什至试图在fancybox中找到<img>的src，然后将其.append链接到链接(<a> tag)的href.我只是缺少完成它的jQuery技能.

I even tried to find the <img>'s src in fancybox and then .append it to the href of the link (<a> tag). I just lack the jQuery skills to get it done.

对于fancybox.js，我添加了<a>标记:

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

我试图像这样复制并粘贴 image.jpeg ，但这没用:

I tried to copy-and-paste the image.jpeg like so but that didn't work:

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

推荐答案

jQuery方式

此答案显示了如何使用标准jQuery方法来完成此操作，并更正了OP给定的代码. 另请参见 Janis的答案 ，以了解如何使用Fancybox做到这一点.

The jQuery way

This answer shows how to accomplish this using standard jQuery methods, correcting the code OP has given. See also Janis's answer to see how this can be done using Fancybox.

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

The code you posted here doesn't work because there is no href attribute in the <img> tag. You should use the src attribute instead:

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

但是，仅当类.fancybox-image的图像只有一幅时，此方法才有效.如果您的图库中有多张图片，请改用以下方法:

However, this will work only if there is only one image with class .fancybox-image. If you have multiple images in your gallery, use the following approach instead:

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

这篇关于Fancybox下载图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！