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;}

to:

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.

5 thoughts on “Problems Integrating Lightbox With WordPress”

  1. The images do not have to be uploaded through wordpress to utilize this. It’s just how the images are called from the html page.

    If you are embedding images in a page manually, you can simply use or use the default rel marking.

    Another method is to use the DOM and calling the firstChild property. If EVERY image that is linked is to be displayed with lightbox, you could do something like this:


    if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox')) || (anchor.className == "imagelink") || anchor.getAttribute('href').firstChild.nodeName == "image"){
    anchor.onclick = function () {myLightbox.start(this); return false;}

    *note, this is untested, and it may be == “img” instead of “image”. My memory is failing πŸ˜›

    This 3rd (the 2nd “or”) test will test for the condition of followed immediately by

    Good luck, and thanks for reading my article πŸ™‚
    -Brian Cummiskey
    http://www.skeymedia.com

  2. Thanks a lot for the feedback. Yeah, I don’t think this template’s set up too well for describing code as you can see. πŸ˜‰

    Actually, I was thinking about something along the lines of what you wrote, but didn’t have the JS knowledge to implement it. From what I can tell, that’s putting in another ‘or’ statement that accounts for the case where an ‘img’ element is nested in a ‘href’ element correct? I think that’ll work nicely.

  3. I’m just getting into using WP and i was hoping to get your feedback into the difference of using WP verse Drupal, any suggestions to using one over the other?

Leave a Reply

Your email address will not be published. Required fields are marked *