Andre on Tech: Lightbox for modal dialogs

I'm working on a project which incorporates some AJAXy modal-dialog-like popups. Which prompted me to look into the lightbox-type projects there that would fit the bill. These are the three main projects I found:

	Lightbox v2.0 The original work by Lokesh Dhakar. Allows pictures and sequences of pictures, not arbitrary HTML. Very slick animation effects if you are open to the heavy prototype+scriptaculous download. The animation and overall polish of the out-of-the-box presentation gives Lightbox the biggest "wow" factor of the three. The gist: a smooth and clean image-only popup, optimized around displaying images as easily as possible. Has built in flickr-like next/previous functionality. The footprint: Requires 100K or so of prototype and scriptaculous The verdict: A good choice if you know bandwidth is not a problem, and you want the popup that is most tailored for use with images.
	Greybox Greybox allows arbitrary content instead of just pictures. There are two versions: the original, by Amir Salihefendic, and Greybox Redux created by John Resig, author of jQuery. The advantage of John's version is that it the code footprint is quite small -- just 1.2K on top of the jQuery library, which is about 10K. If you are already using jQuery, then John's version is the clear choice. It also fixes a back button bug in the original. This is the only one which uses an iFrame, so you can show a completely separate document inside the popup. The gist: a popup which allows arbitrary html, forms, even other websites iframed in a lightweight package The footprint: The jQuery version is only 1.2K on top of a 10K jQuery library The verdict: A good choice if you are already using jQuery and need something as lightweight as possible, or if you need to iFrame content.
	Thickbox Thickbox is written by Cody Lindley, and is built on top of jQuery. Thickbox has the advantages of both versatility (images and html) and relatively light weight (20K including jQuery). Part of Cody's motivation was a generalizable custom dialog box, and Thickbox fits the bill well. Thickbox's footprint is not quite as small as John's Graybox, but still much smaller than Lightbox. The gist: versatile -- easy usage for pictures alone, or arbitrary HTML. Doesn't use iFrames. The footprint: about 20K including the jQuery library The verdict: out-of-the-box more visually appealing than Greybox, and easy photo handling like lightbox -- the good overall choice if you don't need Lightbox's sequencing functionality, especially if you are already using jQuery.

I'm sure there are other projects and derivatives out there as well. If you come across any interesting similar projects, leave me a comment.

Next: Google Sketchup goodness »

Comments

ryan on Apr 25

Thanks for this write up. I was aware of Lightbox, but not the other two. I'll have to check those out.

Todd Huss on Jun 13

I did some reworking on Seth Banks' project subModal. Also compressed the javascript to get it down to 4k, the source is 10k uncompressed:

http://gabrito.com/files/subModal/

assaf on Jun 21

I just got an e-mail from the author of iBox.

Worth checking out.

It's versatile: images, inline divs and external pages. The demo includes pictures, text and a login form.

It's only 11K big and self-contained, both a bonus if you have a lot more JS going on. And the one thing that appeals to me the most: it can degrade nicely for users who don't have JS enabled.

Dean Tan on Jun 21

Correct[ed] url to Thickbox is
http://jquery.com/demo/thickbox/

Michael Luu on Jul 08

I was looking into the same exact thing a couple of weeks ago. The best solution I found was ParticleTree's LightBox gone wild
I hacked it up a bunch myself to fit my modal needs. you can find my version here.
In my rails application_helper.rb, I added this method:

def lightbox(*options_for_render)
page.call 'new lightbox', render(options_for_render)
end

then in my controller, when I need to send a modal notification or warning, I call

render :update do |page|
page.lightbox :partial => 'modal_confirm'
end

I find the best pattern for when to use this kind of display is when a notification or warning presents more options then just Continue/Cancel. for example: Quit without Saving, Save and Quit, Cancel.

Michael Kovacs on Jul 12

Hey Andre,

Sorry I missed your talk last night at the Ruby meetup. The site looks great and I added the cafe that I visit the most :-).

Anyway, I had need for a dialog like this and did a writeup on what I did with lightbox gone wild.

http://javathehutt.blogspot.com/2006/07/rails-realities-part-15-ajax-modal.html

My problem was I was having a hard time figuring out a solution where I had a modal dialog that would submit my form and dismiss. My current solution is in that blog posting. If you have any other thoughts I'd love to hear them.

-Michael