3

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 );
4
  • Can you possibly post here relevant parts of the code you already have?
    – Petr R.
    Commented Aug 16, 2013 at 12:28
  • I am sorry first posts here i cant get the code to show properly -.-
    – Kevin
    Commented Aug 16, 2013 at 12:41
  • I edited the post for you, use 4 spaces to intend the code in the future. Feel free to revert any changes you want if I misunderstood any part of the question. See the Markdown help for more details.
    – Petr R.
    Commented Aug 16, 2013 at 12:55
  • Tyvm :) you got it right.
    – Kevin
    Commented Aug 16, 2013 at 12:58

2 Answers 2

8

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'
        }
    }
});
1
  • You make it look easy. I've seriously been looking for that a long time.
    – Kevin
    Commented Aug 16, 2013 at 14:00
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

1
  • 1
    Thx changed your code a bit and got it working: $('.fancybox-inner').each(function (){ var href = $('.fancybox-image').attr('src'); $(this).children("a").attr("href", href); });<br /> .next would be img again.
    – Kevin
    Commented Aug 16, 2013 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.