CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsfancybox
TheMethod
TheMethod

Reputation: 3001

Triggering Fancy Box on document load

I am trying to do something relatively simple and that is trigger the Facnybox jQuery plug-in to pop up during document loading. I am using ASP but that should be irrelevant. I have the following tag:

<a id = "lnkGId" href = "" name = "lnkGId" runat = "server"  ></a>

In JavaScript I do the following:

//check to ensure the link has an href

$(document).ready(function () {
    if($("a[id *= 'lnkGId']").length > 0 && $("a[id *= 'lnkGId']").attr("href") !="" ){
    console.log($("a[id *= 'lnkGId']").attr("href"));
    }
});

The anchor gets it's href set dynamically on the server side. The id gets a bit mangled which is why I am using the *= selector. This part works, if I run the above when the anchor has an href I see the proper href getting logged in the console.

Now all I want to do is trigger Facncybox when the page loads and the anchors href has a value. I have tried a bunch of different ways inside the if condition I posted above:

1

$("a[id *= 'lnkGId']").fancybox().trigger("click");

2

    var url = $("a[id *= 'lnkGId']").attr("href");
        $.fancybox({
            href: url, 
            modal: true,
            'fitToView'     : false,
            'width'         : '600px',
            'height'        : '560px',
            'autoSize'      : false,
            'closeClick'    : true              
        });

3

            $("a[id *= 'lnkGId']").fancybox({
                'fitToView'     : false,
                'width'         : '600px',
                'height'        : '560px',
                'autoSize'      : false,
                'closeClick'    : true

            });
$("a[id *= 'lnkGId']").trigger("click")

I am not getting any errors. I am doing a console.log("complete"); after I applied the above code to make sure it wasn't getting broken somewhere a long the way. everything seems like it is in working condition I just can't get it to trigger! Does anyone have any suggestions on what I could do here? Any advice would be very much appreciated. Thanks!

Upvotes: 0

Views: 255

Answers (3)

TheMethod
TheMethod

Reputation: 3001

Thanks for the responses.

The issue for my particular case ended up being that I didn't have the class fancybox.iframe on my anchor tag. Once I added it things began working as expected.

Upvotes: 0

Jan
Jan

Reputation: 5815

Is the url of the href an image or text content? If it returns a web page you could use an iframe, something like 

  $.fancybox('<iframe width="600" height="560" src="' + url + '"></iframe>',
    {
      'width': 600,
      'height': 560
    });

Upvotes: 1

JFK
JFK

Reputation: 41143

If using Fancybox v1.3.4, check http://fancybox.net/blog No.6

For v2.x check http://fancyapps.com/fancybox/#useful No. 12

Additionally, if you want to launch fancybox during the first visit only (and not every time the page is reloaded), then you could use a cookie.

Check that method here : https://stackoverflow.com/a/8305703/1055987

Upvotes: 1

Related Questions