Playing with Lightbox JS

Ok, I admit. Lightbox JS is cool. I’m kind of late on the Lightbox JS bandwagon.

Today I decided to play around with this script and tried to integrate it into my WordPress theme. Since I’m using K2 as my backbone of my theme, it’s quite difficult to make it work. I’ve spend nearly 1 hour figuring out how to use comment author COOKIE information outside comment. And not forgetting to test all the new additional if else statement for live comment and liveSearch inside the header with or without enabling it.

What is Lightbox JS

Overview

Lightbox JS is a simple, unobtrusive script used to to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Benefits

Places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths.

Keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity (and no fun!).

huddletogether.com

K2 and lightbox JS

K2 has a few features that uses window.onload event to kickstart some of its scripts. I have to do some heavy modification especially to the header.php file and comments.php file so that all init script loads perfectly.

K2 windows.onload event includes liveSearchInit that is use for LiveSearch and HideUtils for hiding returning commentator info field.

First things first. I’m taking this advantage to fix some of K2 window.onload bug. There’s a conflict between HideUtils and Livesearchinit window.onload event.

Both of the event are loaded in 2 separate place that is HEAD and BODY. This happen if both events are loaded at the same period of time. To avoid this, I relocate HideUtils to the theme header with livesearchinit.

My step to avoid JavaScript conflict is by attaching the call to the onload event of the window object. Because we have more than one function, we have to use an anonymous function that calls the others. Since Lightbox JS also uses window.onload event, I strip the onload function out of lightbox.js. If not, I have to load lightbox.js after liveSearchInit and HideUtils.

So basically the new inline SCRIPT element would be

<script type="text/javascript">//<![CDATA[
        window.onload=function() {
        liveSearchInit(); /*LiveSearch*/
        HideUtils(); /*Hide comment author info. This doesn't stop here for K2.*/
        initLightbox(); /*Lightbox JS*/
        }
 //]]></script>

As the result, all the onload function can be start without conflicting each other and all the window.onload event for liveSearchInit, HideUtils and initLightbox kickstarts perfectly. The new HideUtils() event is not like what you see above since I need to properly call the event. The code line for HideUtils() is actually a bit longer, along with the WordPress, K2 if else statement and variable.

For a normal WordPress theme, there shouldn’t be much problem using this script. But as I explain before, there’s lot of step and modification to be done if you’re using K2. I’ve already made a patch for lightbox JS to be use in K2. Probably will write the guide and publish the working code soon.

zeo