failing like never before

24Jul/080

Lightbox Effects

So unless you've spent the last few years never clicking on an image on a web page, you're quite familiar with Lightbox-like effects (and if not with the name then at least with the effect itself). Here's an example of Lightbox2 for those unfamiliar with it.

When I say "Lightbox-like," I am referring to any kind of "effect" that allows for embedded pop-ups of images and other forms of media (i.e. flash videos, etc). The benefit of Lightbox, aside from the aesthetics, is that it doesn't result in an actual pop-up (which are often blocked by a pop-up blocker on a modern browser), or require the user to navigate to another page and then hit the browser's "back" button to navigate back to the main content. The basic idea is that Lightbox makes a visitor's life easier, supposedly.

I have two problems with Lightbox-like effects. Firstly, the Javascript files required for the effects tend to fatties. The Lightbox2 Javascript files take up 18Kb, but Lightbox2 also requires the Prototype and Scriptaculous libraries which take up 172Kb. Its not a big deal if you're site is already heavily AJAX-ified and already uses Prototype and Scriptaculous, but not everyone's site does. Quite frankly, I find it to be highly annoying that I spend so much time slimming down my images and making sure that people without lightening fast Internet connections can easily access my sites, only to have Lightbox, which is supposed to improve the visitor's experience, bog my site down by requiring 190Kb of Javascript files. There are of course, many alternatives to Lokesh Dhakar's original Lightbox and Lightbox2, many of them which are much lighter in memory. I stumbled across this helpful "Lightbox Clones Matrix" a month or so back, and it usefully lists memory sizes for each "Lightbox clone."