Fancybox v2 not working on second press

Question

I have a website that uses the ajax parameter for Fancybox v2 to display certain bits of information, such as help, contact information, etc. I noticed a problem with it, however, when it works normally on the first click, it usually does not work correctly on subsequent clicks - the actual pop-up may appear for a while and then disappear, or it may never appear at all, and the overlay may load two or three times, so it takes a few clicks to clear it.

It doesn’t matter if you click on the same link or a different link that also uses Fancybox. Firebug Console does not report errors. If you refresh the page, you get another reliable click, and then subsequent clicks again show strange behavior.

I created a stripped-down version of one of our pages (deleting all other scripts) to see if there is something that causes a conflict, but that doesn't seem to be the case. You can look here:

http://frontandback.com.au/fancytest/

In the three links in the upper right corner of the site, Fancybox applies to them. Example:

<ul> <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">Contact us</a></li> <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">Help</a></li> <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">FAQs</a></li> </ul> 

If anyone has suggestions as to what causes this odd problem, it would be very helpful.

Greetings.

Answer 1

From this post I created a fixed version in which you can download partial content from a file via ajax.

This new edition uses the (HTML5) data- to pass the hash URL, so instead

 <li><a href="index.html" data-fancybox-href="index.html #contact" target="_blank" class="fancybox fancybox.ajax">Contact us</a></li> 

we will do it

 <li><a href="index.html" data-segment="#contact" target="_blank" class="fancybox">Contact us</a></li> 

... notice that we are not using any special fancybox class fancybox.ajax and fancybox.iframe , as suggested in the comments section.

Then the main script

 $(".fancybox").on("click", function() { targetContent = $("<div />").load(this.href +" "+ $(this).data("segment")); $.fancybox(targetContent, { fitToView: false, autoSize : false, width: 420, // or whatever height: 280 }); // fancybox return false; // prevent default }); // on 

You can set the sizes for each <div> from the remote file using the style="" attribute, then set autoSize : true and remove the width and height parameters to get a dynamic size.

Of course, the revised DEMO