This is the DMD archive. Visit the Design Meltdown Portal to find the latest DMD content.

Lightbox Style Pop Ups

1st edition — by Patrick McNeil — Mar. 8, 2006

The Design Element

The recent release of a little bit of javascript called Lightbox by a fellow over at Huddle Together has been all the rage lately. What this script does is overlay an image over the current page. This saves the user from going to a whole new page to view an enlarged version of an image.

This is essentially emulating a modal window. Something application developers have been free to put to use for years. Although this isn't the first attempt at doing this on the web, it is certainly an elegant solution. The most exciting thing about this is really how it opens your eyes to a new kind of interaction. We need more of that on the web. Nothing dramatic, just subtle changes in our expectations and an expansion in our minds of the possibilities.

Not all of the samples below actually use the Lightbox Javascript, but they all employee this same idea or style of interface.

divider

Sample Usage

divider

Links

Original Lightbox Javascript

Lightbox JS V2.0

Lightbox effect without Lightbox
Lightbox gone wild!
Customizing Lightbox
WordPress Lightbox plugin
Lightbox with image scaling
Leightbox - Lightbox variant which is Search Engine friendly

divider

Comments

Tom

3/8/2006 12:09:01 PM

Awwww what a fantastic use of such a simple idea.

It doesn't have to be big and flashy - subtle satisfying interfaces that make it look so simple are where it's at.

Darren Hoyt

3/8/2006 2:27:17 PM

The Huddle Together code works well for certain things, but not so hot for others. For example, using forms within a lightbox, or embedding media media. Having tried most of them out there, this is the one which seems to work best on all platforms for all purposes.

Harmony

3/8/2006 3:43:41 PM

Yes lightbox is great :) I use it on my art gallery to simplify things for my visitors - http://harmonysteel.com/art/art.shtml

The only bad thing about Lighbox is it doesn't validate as standards compliant css because of code needed for rendering in IE, but I think this is one of those things (for me at least) where the usability benefit outweighs the very small standards issue.

Harmony

3/8/2006 3:48:38 PM

Ooh just found a site that seems to make the css for this script valid!

http://www.renegadezen.com/blog/article/79/valid-lightbox-js-image-viewer

Maryam

5/24/2006 9:53:29 PM

Great site, i can see myself seeing this later in the year when school starts again.

Awesome site, keep it up.

Jason Coleman

7/5/2006 12:55:50 PM

http://www.absurdlycool.com

Uses a lightbox-style popup to display feedback form. I like how it bounces around when the user scrolls.

Make a Comment:

All fields are required & all posts are hand moderated.



(not displayed publicly)



Captcha