How to Create Image Overlay Using Javascript

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

by