For the past two years, I’ve been using a WordPress lightbox plugin based on v2.0x of Lightbox 2 for displaying full-size images. While it worked well, it was also quite large, relying on the Prototype JavaScript framework. Looking at alternatives, I found that almost all were based on jQuery, something I found to be overkill for something simple like a lightbox script. As I found nothing nearly as optimized as I would like, I set out to write my own script.

Using CSS3, SVG, and regular JavaScript, I was able to write a script, Slenderbox, that is just 2kB minified and gzipped, smaller than even the GIF loading icons used by most similar scripts. The only downside is older browsers aren’t supported, particularly Internet Explorer prior to version 9. In addition, the loading icon is a SMIL animated SVG, which isn’t supported by any version of Internet Explorer. Starting with version 1.1, a CSS3 animation, supported by Internet Explorer 10+, is used for the loading icon.

Slenderbox is available by itself and as a WordPress plugin.