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.

Here is the code:

if ($('div#fancybox-frame:empty').length >0) { 
    alert('it is empty');

$.fancybox({
   'width': '80%',
    'height': '80%',
    'autoScale': true,
    'transitionIn': 'fade',
    'transitionOut': 'fade',   
    'type': 'iframe', 
    'href': '/show_photo'
});
 }
 else{
    alert('it is full');   
    $.ajax({
        type: "GET",
        url: "/show_photo",
        success: function(data){
        cropping_arrived();
        }
    });
  }
});

It always returns that it is full even when I know there is not fancybox open.

Any ideas?

Answer 1

I made it work with below code:

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

Answer 2

This works for me

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

Answer 3

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.