Thursday, April 12th, 2007

Lightbox 2: Sets and Effects

Category: JavaScript, Library

When Lightbox 2.0.3 was just released I suddenly realised that we hadn’t posted about version 2 at all.

How does version 2 compare to the old faithful?

  • Image Sets: group related images and navigate through them with ease
  • Visual Effects: fancy pants transitions
  • Backwards Compatibility: yes!

To group images into sets you simply put the set name in the rel attribute: rel=”lightbox[roadtrip]”.

Version 2.0.3 itself offers: “Improved keyboard navigation. Animation off toggle. Hides Flash movies under overlay. Imagemap support. Valid CSS.”

Lightbox 2

Posted by Dion Almaer at 8:59 am

3.9 rating from 62 votes


Comments feed TrackBack URI

The smart move by Lightbox here is that it loads subsequent images before they’ve been requested. I’m amazed there are lightbox clones that don’t do this, and still subject the user to waiting each time they change images.

Comment by Eric — April 12, 2007

Eric that is not necessary a good idea to pre-load ALL the images. Specially with high quality photo galleries where you may be interested in a single photo. I can’t imagine having this on my flickr account and force the user to download 20 Megs for each tag. I assume you can switch it off though.

Comment by Bob — April 12, 2007

This is very impressive

Comment by stu — April 12, 2007

now its just like slimbox!

Comment by Justin — April 12, 2007

@Bob: LOL. I can’t imagine have ANY kind of ANY widget for images of that size. And I believe the preloading is for the _subsequent_ images (based on the first commenter’s comment). It seems you are judging the merits of a feature based on some far fetched use case that the thing was never designed to handle. 20MB images via the browser… come on.

Comment by Ryan Gahl — April 12, 2007

In Defense of Bob, the first poster said “subsequent imageS,” and I believe Bob’s 20M figure represented all imageS for a specific tag in flickr, which is quite reasonable to assume. No?

Comment by Steve O — April 12, 2007

The visual effects (smoothly-resizing box, the close button not appearing for half a second, the fade-from-white) are nicely implemented and very pretty.

However, web developers should not casually force these effects on the user. A visitor to your site may be impressed by the effects the first time they see them, but afterwards they are an unnecessary delay, standing in the way of the user’s intended goals: to see your pictures.

In my timings the animations took between one and two seconds (higher if the new image’s size is very different from the previous image’s). Consider that a user might want to quickly scan all your high-res images, spending only 1 or 2 seconds on each image — a common scenario. In that case, they are spending the same amount of time viewing transitions as they are viewing the actual image.

Flourishes should be used sparingly, when a dramatic effect is truly called for.

Comment by Paul Rademacher — April 12, 2007

The animations can become annoying after awhile. While they did impress me the first few times I came across a site using LightBox, after about a month the novelty wore off and had me sort of groaning every time I had to wait for things to pop up / resize / animate / etc.

As for pre-loading images, I think its a great idea, but possibly a better way of doing it would be pre-loading the next N images. Say, pre-load the first 5 images, then when you click on the 2nd image, it’d load the 6th image,or, if you click on the 4th image – it’d load the 6th-9th in the background.

This put a bit less burden on at once, but still allow a user to flip through the current ‘local’ images quickly.

Comment by kaniz — April 12, 2007

Lightbox is still the best in spite of there are many clones out there right now. Lightbox behaves properly when users scroll the page, i.e. no flicker, while other clones (of course I can’t say I’ve looked at them all) do not.

Comment by Kevin Hoang Le — April 12, 2007

One of the better, i like the interface, the easy way it can be modified to your needs and nicely styled using css

Comment by Tim — April 12, 2007

Kevin – when you say “Lightbox behaves properly when users scroll the page,” you don’t tell us your definition of ‘properly’ – I scrolled and the lightbox didn’t maintain its position relative to the window, but scrolled upwards with the page content. In my view, that isn’t proper behavior for a modal dialog.

Ditto on the effects – they look nice the first time, but quickly they get in the way of viewing the images; who cares about the fancy changing of the containing box transitions? Wow, you can do them – but who cares?

Comment by Jason Bunting — April 12, 2007

Lokesh has already as of this afternoon updated the release again to get rid of the line #257 “debugger;”. But just a heads up for those who’s already grabbed the new copy… you’ll need to check lines 730 and 744 for document.getElementsByTagName(“embeds”) and de-pluralize it to “embed” otherwise you just might have a problem with browsers that use “embed” to deliver flash

Comment by naterkane — April 12, 2007

I agree with the complaints about animations. They are the of the 00’s. Leave them out!

They are only necessary to ease transitions for a user, such as “repairs” when an item is deleted or dragged, or “fly-backs” when a drag-drop operation fails.

Comment by Animal — April 12, 2007

That was the <blink> of the 00s. Can’t this comment system handle text which looks like tags?

Comment by Animal — April 12, 2007

I like the preload and the animation, however. I think for subsquent images, some thought should be given to speeding up the transition or reducing the amount of animation.

Animation certainly isn’t the ‘blink’ of the 00’s. Animation shared blink’s throne during the 90’s. Animation (when done propely) in th 00’s is a cross browser experiance that can really add value to a site or application. I couldn’t disagree with Animal more.

Comment by Richard Kimber — April 13, 2007

Lightbox always seems to surprise me how many people are using it.
One sentence fits perfectrly into lightbox: “Simlicity is the key” :)

Comment by Tapety — April 15, 2007

I use lightbox on many of the sites i make/made, for small gallerys on multiple pages (diffrient pages) and works like a charme.. but for bigger gallery’s it’s no good, whit out a small add-on to show a “timeline” of 5-10 thumbs.. but the “out-of-the-box” script of lightbox i great small gallery’s :)

Comment by Jon — April 20, 2007

“Simlicity is the key” :)

I see you’re taking it to the extreme, by simplifying the word itself.

Lightbox does allow for the speed of transition to be changed with a variable in the .js file. I don’t find it overkill, and for a gallery of 12 photo’s – all set to the same width so there is minimal animation of window size incorporated – it works fine instead of ghastly popup windows. With all displaying in one place, it’s actually more intuitive for the viewer. I did try Slimbox, but its functionality had bugs: in Mozilla Firefox it would sit underneath an embedded Flash movie (embedded with SFWObject). Lightbox – even with it’s horrendous 100k script size in total), had this waxed in both Mozilla and IE. So thanks to the developer for the tweaks and updates.

Comment by fusion — April 28, 2007

I’ve implemented Lightbox into a vacation rental website to show more pictures of the condo. I find it to be perfectly suited to the task.
I do have an issue though. When the viewer uses Mozilla Firefox browser, the image container does not resize around the picture, leaving the picture halfway in and halfway outside the container.
Would anyone know how to fix that?

Comment by Lydie — May 13, 2007

I experience the same problem as described in the previous post by Lydie. Does nobody knows a fix for that :-(

Comment by Dude — June 25, 2007

Yeah, Lightbox is pretty sweet. I really dig the next and prev button overlays. I don’t know how intuitive it will be for the masses (at first). I’m gonna add next and prev buttons to my implementation. Very smooth script. Love the pre-loading and smooth transitions.

Comment by philldo — July 14, 2007

“I do have an issue though. When the viewer uses Mozilla Firefox browser, the image container does not resize around the picture, leaving the picture halfway in and halfway outside the container.
Would anyone know how to fix that?”

Same!!!! Anyone have a solution?

Comment by Steven — October 22, 2007

Regarding the lightbox not resizing for your photos:

This problem is due to InitLightbox() being called more than once. I fixed it by removing the onload event from lightbox.js and called the init when I needed to from another JS event observer. Hope that helps!

Comment by Danny — October 23, 2007

Leave a comment

You must be logged in to post a comment.