Journal

Quest for the Right jQuery Lightbox

March 11, 2009 | Posted by Christy Gurga | 3 comments

Lightbox, the technique of displaying large images in modal windows, has become a familiar UI element across the web. Since Lokesh Dhakar released it in 2006, many variations on Lightbox have popped up, each claiming their own strength: optimized code, easier implementation and/or slicker transitions. The current Lightbox 2 uses the Prototype and script.aculo.us JavaScript libraries, but I was looking for a jQuery version to fit my needs. Additionally, I was looking for something I could quickly implement out-of-the-box (so that I could better spend my time writing a blog post!). Here’s how my decision was made:

Thickbox
Thickbox, recommended to me by @kcdunstan is a very popular jQuery Lightbox and is even hosted on the jQuery website.

Pros: Can be used with images, inline content, iFrames (people still use iFrames?) and Ajax. Seems to have a good support community behind it; John Resig is known to respond to some support issues.
Why I didn’t choose it: The out-of-the-box look doesn’t have nice buttons and transitions.

jqModal
jqModal, recommended to me by @sstrudeau, is very much a bad-ass developer tool.

Pros: Very lightweight and customizable for the person who knows what he/she is doing. Can be used with images, inline content, iFrames and Ajax, and specializes in dialog alert boxes.
Why I didn’t choose it: Way too complex for the specific project I’m working on. I’d want to use this on a highly-branded site where I’ve crafted a unique interface element instead of the familiar Lightbox we know and love. Also, I couldn’t determine if there is an easy way to use this in “gallery” mode where I want Previous/Next buttons to go between a set of images.

prettyPhoto
I found prettyPhoto via a forum I found through a Google search. As the name states, it’s a really nice looking Lightbox.

Pros: Really nice out-of-the-box styling options, and supports single or gallery photos. Good Web 2.0 rounded corners, and I like the buttons.
Why I didn’t choose it: This was nearly my final choice, but I don’t like the tab-like box above the photo for the title. The project I’m using will have a longer description for the title, and I want it below the picture. I would definitely use this for a gallery where the photos either have no title or short titles, though.

jQuery lightBox plugin
The winner! jQuery lightBox plugin was the first one I researched, and then it was also recommended to me by @thetristan and @twenty3x. It’s the closest match I’ve seen to the official Lightbox 2.

Why I chose it: Familiar Lightbox styling, nice transitions, gallery support; it’s got what I want right out of the box.

In short, the requirements of your project will dictate which jQuery Lightbox you should use. jQuery lightBox plugin seems to behave the closest to Lightbox2, and jqModal is the most customizable and developer-centric. I would love to hear about any other jQuery Lightbox recommendations in the comments or respond to me on Twitter, @christyyyjoy.

EDIT: @pdenya sent along the Lightbox Clones Matrix which compares Lightboxes by library, size and features. Nice!

Spread the Love