JS allows you to enlarge and close click images on the current page.

Lightbox JS is a simple and humble script that overwrites images on the current page. It can be quickly installed and operated in all popular browsers.

Click here to view the instance demo

How to use:

Step 1-install
1. Lightbox v2.0 uses the Prototype framework and Scriptaculous results library. You will need to call these three Javascript files in your header.
<Script type = "text/javascript" src = "js/prototype. js"> </script>
<Script type = "text/javascript" src = "js/scriptaculous. js? Load = effects "> </script>
<Script type = "text/javascript" src = "js/lightbox. js"> </script>
2. Call the Lightbox CSS file (or add the Lightbox style to your current style sheet ).
<Link rel = "stylesheet" href = "css/lightbox.css" type = "text/css" media = "screen"/>
3. Check CSS and make sure that the called prev.gif and next.gif files are in the correct position. Similarly, make sure that the called loading.gif and close.gif files and lightbox. js files are in the correct position.

Step 2-activate
1. Add the rel = "lightbox" attribute to any link tag to activate lightbox. For example:
<A href = "images/image-1.jpg" rel = "lightbox" title = "my caption"> image #1 </a>
Optional items: Use the title attribute to add instructions.
2. If you have a set of pictures you want to group, add a group name with square brackets to the last image and add it to the rel attribute. For example:
<A href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> image #1 </a>
<A href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> image #2 </a>
<A href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> image #3 </a>
3. There is no limit on the number of image groups on each page and the number of images in each image group. Crazy!

Download: Lightbox JS v2.02