[Update 2009 – OK now I’m not the total newbie anymore and would have to recommend Shadowbox on top of jQuery for it’s versatility and power. Slimbox is still great though.]

The Contenders

Slimbox

The true successor to the king (Lightbox). This is the chosen one. Very lightweight, simple instructions, does what it says on the tin. Simple instructions for when I’ve forgotten in two weeks are further down…

Shadowbox.js

This one seems to be the current best in breadth of options but too much to read for a low level webdev monkey like me.

Lightbox

The original – but perhaps no longer the beast.

Thickbox

Could have been a contender but I balked at the heavy graphic design.

FancyZoom

The one that started the search thanks to seeing it in action at this FontFeed article. Great tool – but as a webdev guerilla [read chimp] the commercial licence stopped me. Need a bit of slack before I can convince anybody to pay…

Slimbox walk-through

Upload css and js files – add these three lines of code to the head of the HTML:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

(The last slash there may want removing according to your doctype. Are you strict enough for it?)
Then craft the images links like this for single images

<a href="" rel="lightbox" title=""><img src="" alt="" /></a>

or, for sets, like this (where the rel attribute has the set name’s suffix)

<a href="" rel="lightboxset" title=""><img src="" alt="" /></a>

Last updated on 5th September 2018