08-04-2014, 11:39 AM
Lightbox2, created by Lokesh Dhakar
Website: http://lokeshdhakar.com/projects/lightbox2
Lightbox is a small javascript library used to overlay images on top of the current page.
When I set it up it literally took 5 minutes. Really simple.
How to use
Step 1 - Load the Javascript and CSS
1) Download and unzip the latest version of Lightbox.
2) Look inside the js folder to find jquery-1.11.0.min.js and lightbox.min.js and load both of these files. Load jQuery first. So you want to put these in your <head> </head> tags on your webpage.
Look inside the css folder to find lightbox.css and load it.
Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.
Step 2 - Turn it on
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:
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:
Website: http://lokeshdhakar.com/projects/lightbox2
Lightbox is a small javascript library used to overlay images on top of the current page.
When I set it up it literally took 5 minutes. Really simple.
How to use
Step 1 - Load the Javascript and CSS
1) Download and unzip the latest version of Lightbox.
2) Look inside the js folder to find jquery-1.11.0.min.js and lightbox.min.js and load both of these files. Load jQuery first. So you want to put these in your <head> </head> tags on your webpage.
Code:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>Look inside the css folder to find lightbox.css and load it.
Code:
<link href="css/lightbox.css" rel="stylesheet" />Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.
Step 2 - Turn it on
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:
Code:
<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:
Code:
<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>