+- howtothings.co.uk (https://www.howtothings.co.uk)
+-- Forum: Open Discussion (https://www.howtothings.co.uk/forumdisplay.php?fid=5)
+--- Forum: The Lounge (https://www.howtothings.co.uk/forumdisplay.php?fid=18)
+--- Thread: Using Lightbox2 (/showthread.php?tid=1651)
Using Lightbox2 - Mark - 08-04-2014
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.
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>