Question

120

How do I make fancybox href dynamic?

rated 0 times [ 127] [ 7] / answers: 1 / hits: 43947 / 12 Years ago, mon, july 23, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nicole

Add To Favorites

Follow

Total Points: 648

Total Questions: 95

Total Answers: 103

Location: Turks and Caicos Islands

Member since Sun, Mar 7, 2021

3 Years ago

answered 12 Years ago cristinadomoniquel · Accepted Answer

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