Lightbox JS is a simple and humble script for overwriting a picture on the current page. It can be quickly installed and works in all popular browsers.
Click here to view example demo
How to use:
Step 1-Install
1, Lightbox v2.0 use Prototype Framework and scriptaculous effect Library. You will need to call out 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, Outward Lightbox CSS file (or add Lightbox style to your current style sheet).
<link rel= "stylesheet" href= "Css/lightbox.css" type= "text/css" media= "screen"/>
3, check the CSS and determine the call Prev.gif and next.gif files in the correct location. Also make sure that the Loading.gif and close.gif files and lightbox.js files that are invoked are in the correct location.
Step 2-Activate
1, add rel= "Lightbox" attribute to any one of the link tags to activate the lightbox. For example:
<a href= "images/image-1.jpg" rel= "Lightbox" title= "my caption" >image #1 </a>
Selectable items: Use the Title property to add a description.
2, if you have a set of related pictures that you want to group, then the previous one and add a group name with square brackets in 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, does not qualify each page's picture group quantity and each picture group picture quantity. It's crazy!
Download: Lightbox JS v2.02
