Most of us have probably heard of Lokesh Dhakar’s Lightbox JS function to add a neat pop-up to view images. When blogging, most of us use the built-in editor to upload and attach images quickly. In doing so, however, it doesn’t give us easy access to the actual markup. The Lightbox code works by adding a rel=”lightbox” tag to the “a href” anchor around an image. So, there’s two options: Manually edit every image you upload and link to the larger image with the HTML pop out box, or re-script it to make it easy.

I chose option two.

I am currently building a website for a client based off a highly modified WordPress install. My client knows next to nothing about computers, so having him add the simply rel attribute would be like asking an 8th grade drop-out to perform brain sergery. He sells some custom products and will be uploading images nice and easy through WordPress’s attachment system built into the post screne. Using the drag-and-drop method, he can easily place the images where he wants around his copy text. So, that leaves me, the developer, a case problem to fix.

Assuming you have uploaded and installed the Lightbox scripts, css and images properly, There is only one simple modification that needs to be done to the source javascript file. Around line 293, you will find this line in the function function initLightbox():


if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){


This is the code that triggers the lightbox script to find the “a href” (anchor) tags that are associated with the lightbox call, rel=”lightbox”.

WordPress has one save to this. It automatically assigns a class attribute to images that are uploaded and placed into a post:

class="imagelink"


Provided you haven’t changed your template that may have altered this classing, altering the above function gives us an easy fix. Basically all we need to do is test for if it’s an anchor, and if so test for a rel=”lightbox” or class=”imagelink” associated with it.

We simply need to change the if statement:

if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){


to:

if (anchor.getAttribute("href") && ((anchor.getAttribute("rel") == "lightbox") || (anchor.className == "imagelink"))){


Voila! Now, images that have been set to be linkable will open with the lightbox without adding the rel tag by hand.

I have tested this in firefox 1.5.0.5 and ie6 on a winxp sp2 machine and it works. If there are any mac or linux guys out there who can test this, I would appreciate your comments and findings.

Happy Blogging,
Brian
SkeyMedia