Submit your widget

lightbox (Mootools)

Created 13 years ago   Views 12313   downloads 2139    Author n/a
lightbox (Mootools)
View DemoDownload
Share |

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

This is based on Slimbox by Christophe Beyls.


  • Lightbox has the following added features compared to Slimbox
  • Specify a containing div rather than just the body.
  • Place the next/previous buttons in the footer.
  • Add a description with html markup.



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');