Fancybox Download Image

问题

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.

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.

To fancybox.js I've added the <a> tag:

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

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 );

回答1:

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.

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 );

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);
});

jsFiddle here

回答2:

I am not sure if I understand your question, but you can add download link inside title area of fancyBox - http://jsfiddle.net/zAe6Z/

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

来源：https://stackoverflow.com/questions/18273091/fancybox-download-image

标签

jquery

fancybox

href