How do I make fancybox href dynamic?

Question

I have the following fancybox code:

$('.fancybox').fancybox({
             'autoScale' : false,
             'href' : $('.fancybox').attr('id'),
             'type':'iframe',
             'padding' : 0,
             'closeClick'  : false,

//some other callbacks etc

the problem is I have twenty different A tag id's on the page and I want the fancybox href attribute to take the id of the clicked element, ie the one that triggered the event.

I have tried several things, none of them have worked!

'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),

This seems so simple but anytime I plug in 'this' or similar nothing works.

Guggenheim

what is the difference between using the id attribute and the href attribute? ... let html do what it does better (without overusing jQuery) you can have 20 different IDs in your <a> tags but all of them can share the same class="fancybox" so your script above will work seamlessly and without over complicating things. – Adham

following up my previous comment, you just remove the href API option and fancybox will take it from the href attribute in the <a> tag. – Adham

my href's though are non standard, client doesn't want twenty different links on page so I am using href's with "#" in them and at some point in the code I need the JS to send it to the real href which I was storing in id. Open to suggestions! – Guggenheim

Answer 1

Without each() or click() simply add the beforeLoad callback to your script like this

$(".fancybox").fancybox({
    autoScale: false,
    // href : $('.fancybox').attr('id'), // don't need this
    type: 'iframe',
    padding: 0,
    closeClick: false,
    // other options
    beforeLoad: function () {
        var url = $(this.element).attr("id");
        this.href = url
    }
}); // fancybox

NOTE: this is for fancybox v2.0.6+

On the other hand, a more elegant solution is to use (HTML5) data-* attribute to set the href (it would look weird to set id="images/01.jpg" otherwise) so you could do :

<a href="#" id="id01" data-href="images/01.jpg" ...

and your callback

beforeLoad: function(){
 var url= $(this.element).data("href");
 this.href = url
}

and use the id attribute for what is meant for.

---

EDIT : The best is to use the special data-fancybox-href attribute in your anchor like :

<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery"  href="javascript:;">jsfiddle</a>

and use a simple script without callback like

$(".fancybox").fancybox({
    // API options 
    autoScale: false,
    type: 'iframe',
    padding: 0,
    closeClick: false
});

See JSFIDDLE

Adham

ahh perfect...I had tried a few things in the beforeload callback but I must have just been a bit off. Thanks again this worked perfect, you've helped me get through a lot of this fancybox stuff! – Guggenheim

Thanks for this. I needed to append an ajax flag to my url so I could serve up a chromeless modal template, while keeping the url in tact for crawlers, screen readers and open in new window clicks. – Piggy

Answer 2

You can iterate over your collection of .fancybox items and grab the id.

$('.fancybox').each(function(){
    $(this).fancybox({
             'autoScale' : false,
             'href' : $(this).attr('id'),
             'type':'iframe',
             'padding' : 0,
             'closeClick'  : false,
             //some other callbacks etc
    });
});

Varney

Answer 3

Try this:

$(".fancybox").click(function(){
    var url = $(this).attr('id');
    $.fancybox({
         'autoScale' : false,
         'href' : url ,
         'type':'iframe',
         'padding' : 0,
         'closeClick'  : false,
         //some other callbacks etc
    });
})

Leonardaleonardi

Answer 4

Try this

$('.fancybox').each( function() {
    var elem = jQuery(this);
    elem.fancybox({
             'autoScale' : false,
             'href' : elem.attr('id'),
             'type':'iframe',
             'padding' : 0,
             'closeClick'  : false,
          });
    }
);

Diesis

Answer 5

Have you tried this?

$('.fancybox').each(function(){
    $(this).fancybox({
         'autoScale' : false,
         'href' : this.id,
         'type':'iframe',
         'padding' : 0,
         'closeClick'  : false,
          //some other callbacks etc
    });
});

Billbillabong