Fancybox下载图片 | Fancybox下载图片

本文介绍了Fancybox下载图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试为您当前在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 );

推荐答案

您在此处发布的代码不起作用，因为<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下载图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..