Having trouble reinitializing fancybox on content fetched via jQuery's ".load()" method

Question

I am using Easy FancyBox (a WordPress plugin version of the jQuery FancyBox plugin), which works fine until content is loaded via AJAX. I am using the following code to load a div in response to a click event:

$('.jspPane').empty().load(href + ' #load-content');

I have tried to reinitialize FancyBox as a callback, like so:

$('.jspPane').empty().load(href + ' #load-content', function(){
   $('a[rel="gallery1"]').fancybox(); 
});

But it doesn't work. Does anyone have experience with this kind of thing?

If it's any help, here's a link to the site I'm creating: http://ecbiz119.inmotionhosting.com/~fullbo6/ The elements that should display in a FancyBox are loaded when you click the "photos" nav link.

Thanks in advance!

FOLLOW-UP:

After attempting to use the .on() method to bind fancybox, I'm still having no luck. In case it's any help, here is all of the jQuery code from my scripts file:

jQuery(document).ready(function ($) {
    $('#load-content').on('focusin', function () {
        $('a.photos-thumb').fancybox();
    });
    $('#main-nav .page-item-6 a').addClass('active');

    $('#page-content').jScrollPane({
        autoReinitialise: true
    });

    $('#page-content-container, #buy-stuff').hide();

    $('#main-nav').not('.page-item-6').find('a').on('click', function (e) {
        e.preventDefault();
        var href = $(this).attr('href');
        $('#main-nav a').removeClass('active');
        $(this).addClass('active');
        $('#slide-show-container, #updates-wrap .container').hide();
        $('.jspPane').empty().load(href + ' #load-content');

        $('#page-content-container, #buy-stuff').show();
    });

    $('#main-nav .page-item-6').find('a').on('click', function (e) {
        e.preventDefault();
        var href = $(this).attr('href');
        $('#main-nav a').removeClass('active');
        $(this).addClass('active');
        $('#slide-show-container, #updates-wrap .container').show();
        $('#page-content-container, #buy-stuff').hide();
    });

});

score 0 · Answer 1 · answered Apr 06 '12 at 19:56

Thanks again for your kind help, JFK. After further tinkering (and hair pulling), I finally got it to work. I used a different approach, so I'm posting it here in hopes that it can help others. The gist is that I called fancybox as a callback to .load(), like so:

$('#main-nav')
.not('.page-item-6')
.find('a')
.on('click', function(e)
    {
        e.preventDefault();
        var href = $(this).attr('href');
        $('#main-nav a').removeClass('active');
        $(this).addClass('active');
        $('#slide-show-container, #updates-wrap .container').hide();
        $('.jspPane')
            .empty()
            .load(href + ' #load-content', function()
                {
                    $('a.photos-thumb').fancybox();
                }
            );
        $('#page-content-container, #buy-stuff').show();
    }
);

score 0 · Answer 2 · answered Jul 28 '12 at 04:02

This solution helped me (jquery 1.7.2 and fancybox 1.3.4):

Open jquery.fancybox-1.3.4.js and edit it about line 790 like this

    $.fn.fancybox = function(options) {
    if (!$(this).length) {
        return this;
    }

    $(this)

        .unbind('click.fb')
        .live('click.fb', function(e) {
         $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {})))
            e.preventDefault();

This solution solved my problems, and there is no need to change anything else, even initialisation remain like default.

$(".trigger").fancybox();

It's simple and clean. Hope that helps.

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

Fancybox v1.3.4 (the version you are using) doesn't support dynamically added elements, however you may bind those new elements via jQuery .on() method.

Check this post to learn how to do it and tweak the code to your own selectors like

$("#load-content").on("focusin", function(){ ....

UPDATE: based on comments and a further analysis of the source code:

You are loading your js files in this order:

jquery.js?ver=1.7.1
scripts.js?ver=3.3.1
jscrollpane.js?ver=3.3.1
jquery.fancybox-1.3.4.pack.js?ver=1.3.4

Your scripts.js file (with the .on() method) tries to initialize fancybox when fancybox hasn't been loaded yet.

Try to change the order and leave your custom scripts file at the end like:

jquery.js?ver=1.7.1
jscrollpane.js?ver=3.3.1
jquery.fancybox-1.3.4.pack.js?ver=1.3.4
scripts.js?ver=3.3.1

edited May 23 '17 at 12:11

Community

1
1

answered Mar 25 '12 at 18:44

JFK

40,963
31
133
306

Thanks, JFK. I had actually read your article before posting my question. For some reason, it didn't work for me. I've been struggling with this for the better part of today, and I'm ready to bang my head against the wall. – Brian O'Neill Mar 25 '12 at 20:10
Thanks for your help, JFK. I have loaded my scripts file in the footer, but still no luck. *sigh* – Brian O'Neill Mar 25 '12 at 22:47
I would rather place them on the `` section in the recommended order because scripts file is now after the `#load-content` container so `.on()` cannot initialize it. – JFK Mar 26 '12 at 02:14

Having trouble reinitializing fancybox on content fetched via jQuery's ".load()" method

3 Answers3