Implementing Litebox

Litebox is a neat set of scripts used to allow images to load and overlay the current window, which is useful for loading the original images of thumbnails. It’s based off of Lightbox (note “Light” vs. “Lite”), but uses a different effects library plus some other changes to bring down the total script file size. The original Lightbox scripts were on the order of 100 KB in size, while Litebox weighs in at just over 24 KB, all while providing basically the same functionality – neat. (You could strip out all whitespace and comments to further bring down either of these numbers)

So, what do the effects look like? Well, take a look for yourself:

Kingston waterfrontThe view out my lab's windowLil' Ladybug

Click on any image, and the larger, linked original image will popup and overlay the page – from here you can even go back and forward through the image set, by clicking on the left or right side of the current image. What’s even more neat is that if for some reason JavaScript is not enabled in your browser, the links still work as normal – opening up the location to the original image. You can still open the image link a new window if you so desire.

The advent of useful and productive JavaScript libraries and/or frameworks has allowed developers to focus on adding functionality, rather than worry about nitty-gritty details such as browser incompatibilities or implementing low-level features. The Prototype JavaScript Framework is one of the most popular, having been integrated into the Ruby on Rails project, and also forming the foundation for other JavaScript effect libraries. New-comers like the Yahoo! User Interface Library also add to the lot, making things like implementing Ajax a lot easier.

One of the most impressive JavaScript effects libraries has been the Scriptaculous project. Based on Prototype, this slick library of effects isn’t your parents circa-1999 JavaScript, and instead focuses on implementing effects that enhance user experience, rather than assaulting them with a myriad of colour changes, popups and other “script-kiddie-like” JavaScript. Lightbox was one of the scripts written that used Scriptaculous to good effect, making links to images load in the same window with a nice effect, all while maintaining full backwards-compatibility, something sorely missed from “old-school” JavaScript.

Litebox merely improved upon this already great script, by reducing file size and hence bandwidth usage.

Update (2006-07-20)

There are also a few lightbox plugins for WordPress out there. Check them out if you’re interested.

Comments for this entry are closed

But feel free to indulge in some introspective thought.