Image overlay on a web page could be done easily using Lightbox javascript library that could be downloaded here. The library uses Prototype Framework and Scriptaculous effects library. In this tutorial, i’ll use Lightbox library version 2.0, the latest version at the time on this writing.

A. How to Setup
- Include the three javascript libraries (prototype.js, scriptaculous.js and lightbox.js) inside the HEAD section on your html page.
<script type="text/javascript" src="script/prototype.js"></script> <script type="text/javascript" src="script/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="script/lightbox.js"></script>
- Include the Lightbox CSS file
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
- Make sure you have set the correct path to the following image files: prevlabel.gif, nextlabel.gif, loading.gif, and closelabel.gif on the CSS file.
B. How to Apply
On Single Image
If you want to make overlay image on a single image, add rel="lightbox"
attribute to the link tag to activate the lightbox
<a href="images/mandala1.jpg" rel="lightbox" title="Approaching Juanda"> <img src="images/mandala-small1.jpg" border="0" class="image"> </a>
To show image description on the overlay image, add title tag to the link tag.
On Group of Images
To make overlay on a set of related images in a group, append the group name in a square bracket after the rel attribute , rel=”lightbox[groupname]”.
<a href="images/mandala1.jpg" rel="lightbox[mandala]" title="Approaching Juanda"> <img src="images/mandala-small1.jpg" border="0" class="image"> </a> <a href="images/mandala2.jpg" rel="lightbox[mandala]" title="Banking Right, intercept ILS RWY10"> <img src="images/mandala-small2.jpg" border="0" class="image"> </a> <a href="images/mandala3.jpg" rel="lightbox[mandala]" title="Ready to Land"> <img src="images/mandala-small3.jpg" border="0" class="image"> </a> <a href="images/mandala4.jpg" rel="lightbox[mandala]" title="Touchdown, spoilers deployed"> <img src="images/mandala-small4.jpg" border="0" class="image"> </a>
View live demo here







very cool & good js, thank you very much for sharing.
Can I share this post on my JavaScript library?
Awaiting your response. Thank
Yes, you can share this article on your website..:-)
Thank you!
Various people all over the world get the mortgage loans from different creditors, because it’s easy and fast.
is their is anyone who can give me the code of crop +above image overlay as in orkut
Is their isanywho can send me the code of Crop application with image overlay as in orkut when we crop our profile pic
Fun2Do things, all the time