CODEWITHSUNDEEP
javascriptjqueryfancybox-2
absentx
absentx

Reputation: 1417

How can I use different hrefs in my fancybox call?

I have the following fancybox call:

  $(document).ready(function() {
        $('.fancybox').fancybox({
            'closeClick'  : false,
            'scrolling'   : 'no',
             afterShow: function(){
            //do some stuff  
             }
        });
    });

for influence on the following:

<a href="example_url" class="fancybox fancybox.iframe"><img src="example"/></a>

what I would like to do is add the href to the fancybox call so that I can simply put a hash tag in the href in the html.

  $(document).ready(function() {
        $('.fancybox').fancybox({
            'closeClick'  : false,
            'scrolling'   : 'no',
                'href'        : 'example_url',
             afterShow: function(){
            //do some stuff  
             }
        });
    });

But I need to take it a bit further. Lets say I have three different items to consider:

<a href="#" class="fancybox fancybox.iframe"><img src="example"/></a> //requires url-1
<a href="#" class="fancybox fancybox.iframe"><img src="example"/></a> //requires url-2
<a href="#" class="fancybox fancybox.iframe"><img src="example"/></a> //requires url-3

I know I need to give each one some type of unique identifier. Further, I realize I could just make three different fancybox calls for each one, but I think the better way to do it would be something like this:

  $(document).ready(function() {
        $('.fancybox').fancybox({
                //do some processing here to find out what triggered the fancybox, then set a variable with the proper href based on that input. Could have a switch statement etc
            'closeClick'  : false,
            'scrolling'   : 'no',
                'href'        : //variable holding proper url
             afterShow: function(){
            //do some stuff  
             }
        });
    });

But I am having trouble making it actually happen how I envision!

Upvotes: 0

Views: 140

Answers (1)

thebreiflabb
thebreiflabb

Reputation: 1524

EDIT: I should say that my example is using Fancybox 2, it will probably not work in the earlier versions

You can have the links carry a data-href attribute, which you can use in the fancybox call like this (fiddle: http://jsfiddle.net/xEtZ8/)

<a class="fancybox" data-href="http://fiddle.jshell.net/YtwCt/show/" href="#">URL 1</a>

<a class="fancybox" data-href="http://doc.jsfiddle.net/use/echo.html" href="#">URL 2</a>

And JS

$(function() {
    $('.fancybox').fancybox({
        type: 'iframe',
        beforeLoad: function() {
            this.href = this.element.data('href');
        }
    });
});

Upvotes: 1

Related Questions