Geek Answers Handbook

How to check if fancybox already exists on the page

I am trying to check if fancybox is loaded. If so, I run an ajax script to put the content inside.

If not, I open the fancybox iframe and retrieve the 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 that there is no fancybox open.

Any ideas?

+8
jquery fancybox
source share
4 answers

This should work without testing for .length

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

However :empty checks for text nodes. Therefore, if you div a line break, i.e.

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

he may suffocate. In this case, place the opening and closing labels on the same line.

+1
source share

I worked on it below:

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

It works for me

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

I am building an application using Fancybox, so I post my findings on various related topics. I find a discussion about the problems that I have encountered. Amit Sidhpura's solution perfectly checks if the Fancybox JS script is present in dom or, in other words, if the $ .fancybox plugin is present.

However, it does not tell you whether the Fancybox was initialized or not. To do this, 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 the version of jQuery used.

JSFiddle:

Check out JsFiddle for reference.

0
source share

More articles:


All Articles