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.”
4.1 rating from 54 votes
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.
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.
This is very impressive
now its just like slimbox!
@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.
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?
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.
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.
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.
One of the better, i like the interface, the easy way it can be modified to your needs and nicely styled using css
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?
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
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.
That was the <blink> of the 00s. Can’t this comment system handle text which looks like tags?
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.
Lightbox always seems to surprise me how many people are using it.
One sentence fits perfectrly into lightbox: “Simlicity is the key” :)
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 :)
“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.
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?
Thanks
I experience the same problem as described in the previous post by Lydie. Does nobody knows a fix for that :-(
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.
“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?
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!