Making AjaxWp and Lightbox play nice

You may have noticed this entire site is now AJAX based. That wasn’t easy to pull off, but finding AjaxWp helped a lot.

Contrary to what the top of the page suggested, AjaxWp did not work with my Lightbox 2.0 install at all. Thinking perhaps 2.0 wasn’t supported, I tried 1.0. That didn’t work either.

It took me about three hours of fiddling with FireBug’s DOM inspector, but eventually I realized two things:

Lightbox was not accessible to new content coming in from an AJAX load.
When Lightbox was accessible, all navigation links within the lightbox were being arrested by AjaxWp.

The first problem is fixed by re-initializing Lightbox after each AJAX load. To do this, you need somewhere to hook an onLoad event. An IMG tag is a great place for this, so add the following code to your theme’s index.php, single.php and page.php files:

<img src="blank.gif" onload="initLightbox()" />

Next we need to add a new variable tag to our AjaxWp configuration in the theme’s header.php. Following suit with the bookmarks tag, I named it ajax_wp_disable_lightbox_links.

ajax_wp_disable_lightbox_links = true;

Since the last two parts are a little more complicated and involve a lot of small patches within the two script files, I’ve supplied two DIFF patches as well as the modified files themselves. End users can drop in the files and go, but people who want to know exactly what has been changed may want to examine the DIFFs (since I was an idiot and forgot to flag the lines I changed in the scripts).

Hope this helps everyone. You can also fix the AJAX load issues with some links by tweaking the WordPress include files template-functions-links.php and comment-functions.php to make sure all URLs have a trailing slash in them–something necessary for AjaxWp to recognize them.

Download the DIFF patches

Related posts brought to you by Yet Another Related Posts Plugin.