jQuery fancybox with ajax

I was fighting with bloody fancybox jQuery plugin the whole day yesterday. While it was working find on loading large image popups in normal scenarios, it was refusing to work when content was supplied through AJAX, meaning that DOM was altered after the fancybox was initialized.

Have tried several methods like using livequery plugin for jQuery, putting fancybox init in success callback of AJAX request and a lot of other things – non helped.

Finally, the solution was to put fancybox reinit in success callback of AJAX request, but not directly. Instead I had to use setTimeout method with delay of 600 to reinit fancybox as follows:

$.getJSON(ajax_url,function(html) {

    // populate my DOM with some HTML here

    // make fancybox reinit
        function() {

This way it is working fine for me. Not sure why timeout is needed and what is the best delay time though. Can assume that DOM needs some time to insert all the elements and that by default fancybox was faster to check it than the actual update was finished.

Keep in mind that standard fancybox init should still remain in document ready event to adjust all elements on initial page load complete.

104 thoughts on “jQuery fancybox with ajax”

  1. Hi Alex

    I upgrade my Fancybox version to the latest and all works fine.

    Thanks a lot Alex , have a nice day

Leave a Reply