javascript and flash development.

version 1.5

An inline image popup, overlays and fades out the current page.

This is based on Slimbox by Christophe Beyls.


My description for image 1
My description for image 2
My description for image 3



Add the rel="lightbox" attribute to the links pointing to your full-sized images. Use the optional title attribute if you want to show a caption:

<a href="image.jpg" rel="lightbox" title="my image">image 1</a>

For sets of related images that you want to group and make navigable, add a group name to the rel attribute after “lightbox”, inside square brackets:

<a href="/images/image-1.jpg" rel="lightbox[phatfusion]">image 1</a>
<a href="/images/image-2.jpg" rel="lightbox[phatfusion]">image 2</a>
<a href="/images/image-3.jpg" rel="lightbox[phatfusion]">image 3</a>

The following code needs to be called onDomReady or inline after the images.


To add an html description to the image, create a div and give it a two classnames, one to say that it is a description and the other should be the id of the a tag:

<a href="image.jpg" rel="lightbox" title="my image" id="image1"></a>
<div class="lightboxDesc image1">my html description</div>

Then when you initialise the lightbox, set the description option:

Lightbox.init({descriptions: '.lightboxDesc')

Alternatively, you can also launch the Lightbox effect using Javascript to display a single image. Just call the following method, passing the URL of the image as first parameter and optionally a title as second parameter:'images/image-1.jpg', 'Spheres in construction');


the opacity of the background. Default: 0.8
show the controls in the footer. (true/false - default is false) The styles need to be changed when using this option - see lightbox.css
either a css selector or an array using the $$() of the elements that contain the descriptions.
show the image numbers - 1 of 6. (Default: true)
a div that should contain the background. Default: document.body

browser compatibility