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.

Image Overlay Using Lightbox

Image Overlay Using Javascript Lightbox

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">

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 href="images/mandala2.jpg" rel="lightbox[mandala]" title="Banking Right, intercept ILS RWY10">
<img src="images/mandala-small2.jpg" border="0" class="image">

<a href="images/mandala3.jpg" rel="lightbox[mandala]" title="Ready to Land">
<img src="images/mandala-small3.jpg" border="0" class="image">

<a href="images/mandala4.jpg" rel="lightbox[mandala]" title="Touchdown, spoilers deployed">
<img src="images/mandala-small4.jpg" border="0" class="image">

View live demo here

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather


  1. Sahil kakkar says

    Is their isanywho can send me the code of Crop application with image overlay as in orkut when we crop our profile pic

Leave a Reply

Your email address will not be published. Required fields are marked *