Question

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!

Answer 1

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.