Geek Blog Post – Get Fancybox to work after Ajax update

May 23rd, 2010

I usually don’t go super geeky and post related to programming I usually only post major site updates, but I feel I need to post this javascipt code post. Warning, this post goes into super geeks mode starting now.

I’ve been searching to fix a bug in a site that I am developing. It a bug where if you load content using ajax that contains a fancybox link, you can not load the fancybox because fancybox is executed when the page and DOM where originally loaded. You need to find a method to reload fancybox. I’ve tried live and livequery, but after a few hours of fighting they would not work. After an intense google battle I came across this blog post:

http://alex.mamchenkov.net/2010/05/21/jquery-fancybox-with-ajax/

This blog contains the solution that I was looking for. I’m going to post the solution here as well. I figure the most places this is posted, the more people will find it when they are looking for it:

$.getJSON(ajax_url,function(HTML) {

    // populate my DOM with some HTML here

    // make fancybox reinit
    setTimeout(
        function() {
            $("a.some_fancy_box_element_class").fancybox();
        },
        600
    );
});

I hope this helps someone.

Read the new issue of Wrecked Magazine

Subscribe to Wrecked Magazine Issue for Free

Be the first to receive links to read the latest issue of Wrecked Magazine before the public. Just enter your e-mail to get the newest Drifting content first!

Enter your e-mail:

Media Partners



Add Wrecked Magazine Here






footer