how to check if fancybox exists on page already

Question

I am trying to check if a fancybox has been loaded already. If so then I run an ajax script to put content inside.

If not I open a fancybox iframe and it fetches content

Answer 1

I've been building an app using Fancybox, so I am posting my findings on different related threads I find discussing the issues I have encountered. Amit Sidhpura's solution is great to check if the Fancybox JS script is present in the dom or, in other words, if the $.fancybox plugin is present.

However, it does not tell you whether Fancybox has been initialized or not. In order to do that, you can do the following:

function fancyboxIsInit() {
    var fbInit = false;
    if( typeof $.each( $(document).data('events') !== 'undefined' ) {
        $.each( $(document).data('events').click, function(i, v) {
            if( v.namespace === 'fb-start' ) fbInit = true;
        });
    }
    return fbInit;
}

Or the following:

function fancyboxIsInit() {
    var fbInit = false;
    if (typeof $._data(document, 'events') !== 'undefined') {
        $.each($._data(document, 'events').click, function (i, v) {
            if (v.namespace === 'fb-start') fbInit = true;
        });
    }
    return fbInit;
}

Depending on which jQuery version you are running.

JSFiddle:

Check out this JsFiddle for reference.

Answer 2

This works for me

if ($('#fancy_content:empty').length > 0)
{
    alert('Fancybox Open');
}
else
{
    alert('Fancybox NOT Open');
}

Answer 3

I made it work with below code:

if(typeof $.fancybox == 'function') {
     fancy box loaded;
} else {
     fancy box not loaded;
}

Answer 4

In my case for ending up here in this thread, I had a script checking if user input had been detected through mouse movement or keyboard activity. However the parent page were not detecting activity when being inside a fancybox iframe.

To adjust and compensate for this fact, I let the script running in the background know if there is an open iframe in the DOM (as I am not using iframes besides with fancybox) by using the following code:

if ($('body iframe').length > 0)
{
    console.log('Fancybox Open');
}
else
{
    console.log('Fancybox NOT Open');
}

You could also choose to have your iframe content have a specific ID or Class that you measure, however take in mind that when the HTML element is dynamically instigated you have to target an existing parent selector first which were present at DOM to be able to find your newly created element.

Answer 5

This should work without testing for .length

if ($('div#fancybox-frame:empty'))

However, :empty does check for text nodes. So if you div has a line break, i.e.,

<div id="#fancybox-frame">
</div>

it might choke. In that case, place the opening and closing tags on the same line.