Problems Integrating Lightbox With WordPress

I’ll spill the beans a bit; I’m working on a new theme design for WordPress. I promised that I would do something about this site over the work semester and I wasn’t going to go back on that.

I’ve run into a small problem though. One of the features I was planning to integrate, Lightbox, doesn’t seem to get along with me too well. One of the requirements of Lightbox is to have some sort of identifer as to which images should be expanded using its effects. In the current release, that identifier is a rel=”lightbox” attribute, which makes perfect sense, except if you’re implementing it onto an existing site. In that case, you’d have to go back and rename every single one to include the ‘rel’ attribute. That’s hardly possible for many blogs which have been in existence for a long time.

In the hopes of somehow automating the process for WordPress, I ran into this post over at Blogger Skills. It does a great job of leveraging the identifier that WordPress attaches to any image uploaded through its posting interface, the classname “imagelink”.

Note, with Lightbox 2, the coding for this has changed slightly. Instead of around line 293 as that article states, the new lines of interest is around line 180. You have to change:

if (anchor.getAttribute(‘href’) && (relAttribute.toLowerCase().match(‘lightbox’))){
anchor.onclick = function () {myLightbox.start(this); return false;}


if (anchor.getAttribute(‘href’) && (relAttribute.toLowerCase().match(‘lightbox’)) || (anchor.className == “imagelink”)){
anchor.onclick = function () {myLightbox.start(this); return false;}

That means Lightbox can also use the class “imagelink” as an identifier to implement its effects. That’s also the drawback; you would have had to upload all your pictures through WordPress, and I know I haven’t done that.

I’ve been wracking my brain about this problem for most of the morning and I haven’t come up with any satisfactory solution. I thought about makeing Lightbox act on any linked image, but obviously that would cause a lot of problems with linked image icons or image links not to expanded images go bananas. My only other thought is creating a qualifier that image links within a certain enclosing div use the effects. That would cut down on the number of bogus image links, but still doesn’t solve the problem altogether.

I’d really appreciate any comments on the issue or any ideas at all. It doesn’t have to be a full solution, but anything can be useful to get my brain thinking in another direction.