Choosing Litebox
iaian7 » code » txp John Einselen, 18.02.07 (updated 7.03.09)You can find a definition for “lightbox” and other information with a simple Google search. Primarily it’s a way to display image overlays in a website without opening a separate window. Below is a simple demo.
There’s a lot of Lightbox style options out there, and it’s sometimes tough to find the right resources. When it came time to develop an image solution for Iaian7.com I’ve used a few scripts, from Litebox and Slimbox, to finally making my own (see update below). The following will help explain why, as I’ve tried to collect and document my own research here. Hopefully it helps make the job a little easier for you.
Update
No rest for the weary, I’ve finally released my own lightbox script. Based on Slimbox for Mootools 1.2, mediaboxAdvanced supports images, flash media of all types (both files and social video site urls), inline and external content. It boasts gallery sets, titles and captions, javascript API, and a clean Mootools installation.
I suppose it’s probably not entirely kosher to pimp my own scripts, but there you have it!
Considerations
Size – this isn’t as much of a concern as it might have been a few years ago, but there are still plenty of people on slower internet connections. There’s no need for slowing things down, especially when keeping things small and clean can affect the next concern…
Speed – possibly one of my more frequent pet peeves, a visitor can get rather frustrated with a script that takes a few seconds to load, or plays through unnecessarily fancy animations every time it’s used. That said, most implementations are pretty decent.
Functionality – In the past, I’d only needed image viewing on my site, so the ability to load external pages or hidden DIVs within a lightbox window wasn’t as important. That changed as I started posting media like my demo reels, and using the overlay for site searches, RSS subscriptions, and other UI. So the supported file formats and content types can play a huge role in what you need. Another difference between the various Lightbox scripts is the use of keyboard shortcut keys, letting a user step away from the mouse to navigate through series of images or other elements. This can be really helpful, though unfortunately there’s no consistent standard when it comes to the specific keys used.
Ease – this is of primary importance to the person posting the content. A lot of Lightbox scripts have WordPress plugins written for them to make daily usage easier. Same goes for many other blog and CMS engines, including Textpattern (and my own image gallery and movie plugins).
Style – though the functionality is important, it’s also imperative that the solution be attractive, and blend well with the rest of the site. At the very least, you should be able to change the appearance with CSS or JS customisations. Many of the newer scripts support a wide variety of styles, including shadows, rounded corners, and more.
Lightbox Scripts
This list is very much outdated, please check out the Lightbox Clones Matrix link below for a more up-to-date list of lightbox style scripts.
Litebox was my first choice for various reasons, and is designed to be small, fast, and nicely featured. It uses the as-of-now outdated Moo.fx library. Implementation is reasonably simple (especially if you can use my textpattern plugin) and even includes keyboard key controls for navigation.
Slimbox is the current script being used on this site. Very similar to Litebox, it runs on the newer MooTools javascript libraries. Total file size is slightly larger (roughly 36kb vs. 24kb), and the default animations are a little more jarring as horizontal and vertical scaling is handled separately (fixed by editing a couple lines of code). The script does, however, properly hide media elements; something Litebox is unable of dealing with correctly.
Slimbox Extended adds support for image resizing and iFrame content.
Lightbox JS keeps things fairly simple. The functionality is somewhat limited (no support for multiple images) but the implementation is easy. The image loading animation is also very nice.
Lightbox JS 2.0 is where things really start to run into trouble. Just the javascripts alone are over 100kb, which is quite a bit more than I’m willing to spend in bandwidth for each page load. In comparison, Litebox listed above is less than 30kb.
Greybox gets props for having a cool navigation bar at the top, showing image title, previous and next links, and close button. It seems to work well, and displays nice and clean. It also allows loading of external content, which could be useful in some situations. I haven’t tried it though, so can’t vouch for ease of use.
LightWindow is slightly newer, and can load just about any content type imaginable. Even PDFs. It uses Prototype and Scriptacular, so if used without compression, you’re dealing with over 150kb in files just for the script to load. There are some errors (loading a quicktime movie doesn’t display the “close” text) and annoyances (image sets aren’t as easily created) that have prevented me from using it, but otherwise it seems quite capable.
Greybox and LITbox are also both designed for images and content viewing. The first is nice and clean (scrollable content works great, and the close button is always visible; a problem other implementations get wrong), the later includes draggable windows and pretty intense transparency effects (which can really slow down the experience for some users).
Vidbox is a modified version of Slimbox, allowing one to load flash content instead of images. Very useful!
Moodalbox is yet another Slimbox variant; this time it loads HTML.
Smoothbox is a MooTools port of Thickbox. It retains the same ugly interface, but the broad support for image, inline, iframe, and ajax content. Smoothbox, however, does not conform to the Lightbox script format (rel=“lightbox var1 var2”).
More Information
Which Lightbox is Right for You? is an excellent list of Lightbox style scripts (longer than the one here). As of 2007, it’s been updated a couple times with new lightbox systems.
Lightbox Clones Matrix is a much more up to date list of the rich media overlays, and allows you to quickly filter through different criteria, such as the Javascript library required, types of media supported, and size of the scripts.
Be sure to add a comment below with your own resources!
mediaboxAdvanced