LightBox

Here we have a nearly straight copy of slimbox (by Christophe Beyl, a lightbox clone (originally authored for prototype.js by Lokesh Dhakar.

We've made one big change here: Lightbox is a Class. This doesn't change the way you just add the rel="lightbox" to your image links to get the behavior you want, but it does mean that you can instantiate more than one and interact with it in a more Moo-ish way (for instance, you can extend or implement changes into it and there are numerous options you can pass along).

docs

<a href="/wiki/slimbox/image-1.jpg" rel="lightbox"><img src="/wiki/slimbox/thumb-1.jpg"></a>
<a href="/wiki/slimbox/image-2.jpg" rel="lightbox"><img src="/wiki/slimbox/thumb-2.jpg"></a>

<a href="/wiki/slimbox/image-3.jpg" rel="lightbox[setName]"><img src="/wiki/slimbox/thumb-3.jpg"></a>
<a href="/wiki/slimbox/image-4.jpg" rel="lightbox[setName]"><img src="/wiki/slimbox/thumb-4.jpg"></a>
<a href="/wiki/slimbox/image-5.jpg" rel="lightbox[setName]"><img src="/wiki/slimbox/thumb-5.jpg"></a>
<a href="/wiki/slimbox/image-6.jpg" rel="lightbox[setName]"><img src="/wiki/slimbox/thumb-6.jpg"></a>

But you can also instantiate a new one at any time (for instance, if you add images to the page subsequently):

//let's create a bunch of images here on the fly
for(var i = 1; i < 5; i++) {
  $('slimboxHolder').adopt(
    new Element('a').setStyle('cursor','pointer').setProperties({
      href:'/wiki/slimbox/image-'+i+'.jpg',
      rel: 'anotherLightBoxSet[set2]'
    }).adopt(
      new Element('img').setProperty('src','/wiki/slimbox/thumb-'+i+'.jpg').setStyle('margin', 2)
    )
  );
}
//and add a lightbox
new Lightbox({ relString: 'anotherLightBoxSet' }, $('slimboxHolder').getElements('a'));