Contact Us

Scripts: DHTML :: Lightbox Divs :: Library Article #4

Developer's Section

Learn to Create a Lightbox Effect for your Images
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (2971)

This tutorial explains the basics of the lightbox effect and how to make it work with your image files.

Lightbox divs are a very cool effect that can be used to stream images on the same page without reloading the page or redirecting the user to a new page. Below we use the lightbox div effect to show a simple orange fruit image.


Orange Fruit

In order to make this effect work you are going to need the following files:
  • lightbox.js
  • lightbox.css
  • loading.gif
  • close.gif
  • overlay.png
If the name of the images for this script interfere with the names of your website's image files, you would need to rename them and change the value of the vars loadingImage and closeButton declared under "Configure Image Path Below" to match the new names and the path as well. The overlay.png image must also be included and needs to match the path delcared on file lightbox.css (lines 18,24).

See the code Below:

 Code Snippet 1

<!--Step 1: Declare style sheet-->
<link rel="StyleSheet" href="yourpathtocss/lightbox.css" type="text/css" 
<!--Step 2: Configure path to image files-->
<script language="javascript">
// Configure Image Path Below
var loadingImage = 'yourpathtoimages/loading.gif';
var closeButton = 'yourpathtoimages/close.gif';
<!--Step 3: Configure path to js file-->
<script type="text/javascript" src="yourpathtojs/lightbox.js"></script>
<!--Step 3: Include an image link and give it attribute rel="lightbox"-->
<p align="center"><a href="yourpathtotheimage/orange.gif" rel="lightbox"
 title="see the orange fruit">Orange Fruit</a></p>

And that's the end!.

lightbox.js12.1 KB
lightbox.css0.7 KB
overlay.png0.3 KB
orange.gif3.2 KB
loading.gif2.3 KB
close.gif0.1 KB

See other Scripts in Lightbox Divs

Submit Your Scripts:

If you would like to have your DHTML scripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]