This is very nifty indeed: Lightbox JS by Lokesh Dhakar. Click on a thumbnail to see the full-size image. The image is overlaid with a repeating translucent background.

The final result is very cool, but what about the underlying code? I’m happy to report that the JavaScript is scrumptiously unobtrusive. To create a pop-up image, you just need to add a rel attribute to your link:

<a href="/path/to/image" rel="lightbox" title="my caption">link text (or thumbnail)</a>

If JavaScript isn’t available, the function degrades gracefully by following the link to the full-size image.

Take a look at the JavaScript: now that’s how to comment! It’s very readable.

Essentially, Lightbox JS is doing the fake pop-up trick. That’s when you overlay an absolutely positioned layer rather than popping up an actual new window. It’s a technique I use over at The Session (try clicking on the “forgotten your password?” link to see what I mean).

It’s also a great way of doing a JavaScript image gallery. I created a basic image gallery in the book but this knocks it into a hat. Obviously if you were using this for a lot of images, you wouldn’t want to add rel="lightbox" to each one, but with a little bit of fiddling with the initLightbox function it would be easy to set the same functionality for, say, all the links in a list with a certain ID.

All in all, a really great idea beautifully implemented.

Posted by Jeremy on Monday, January 16th, 2006 at 1:54am


Do you mean "certain class?" IDs sounds even more tedious than adding a rel attribute to each.

# Posted by Su on Monday, January 16th, 2006 at 12:07pm

What I said was "all the links in a list with a certain ID". By that I mean that the list (the parent element) has an ID, not each item in the list.

# Posted by Jeremy Keith on Monday, January 16th, 2006 at 12:14pm

Oh. God, that was stupid. I think I need to disclaim anything I say or do for the next week or so with the fact that my sleep schedule—such as it is—is mysteriouly knocked about five hours out of alignment at the moment.

As for Lightbox itself, it’s one of those things that just makes me look back at already-launched stuff and go, “Ugh.” Now, I’m looking for an excuse to use it. It does seem to have particularly nice commenting(I’d only taken a quick glance before.) Need to have a deeper look and learn some things.

# Posted by Su on Monday, January 16th, 2006 at 4:37pm

That is in fact a well-commented JavaScript document. As for now, I can’t find Lightbox for anything terribly useful except a photo gallery. But it is indeed cool and unobtrusive.

# Posted by Dustin Diaz on Monday, January 16th, 2006 at 7:51pm

I saw that Lightbox script a while ago and thought it would be a great addition to a site I was planning on building for a photographer friend.

It would be really nice if there was a way of using the Flickr API with it to build tag-dependent galleries on remote websites. I will definitely be doing some research into this when I get around to building the site.

# Posted by Si on Tuesday, January 17th, 2006 at 11:34am

Sorry. Comments are closed.

January 2006

Recommended Reading

XML Subscribe

Grab the RSS feed for this blog.

JavaScript API

Grab the RSS feed of comments for this entry.