Download
User Rating: 4.8/5 ( 2 votes)
Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers.
Source: lokeshdhakar.com
1. INCLUDE CSS AND JS FILES
<link href="css/lightbox.css" rel="stylesheet" />
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
Look inside the img folder to find close.png, loading.gif, prev.png, andnext.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.
2. HTML
-
Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>
Optional: Add a data-title attribute if you want to show a caption.
-
If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:
<a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a>
JS Tutorial
