+
+ +
+ Examples
+Two individual images
+
+ 
+ 
+
+
+
+
+ + +
Four image set
+ +
+
+
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+ 
+
+ The original lightbox script.
Eight years later — still going strong!
+
+
+
+
+
+
+ js folder to find jquery-1.11.0.min.js and lightbox.min.js and load both of these files. Load jQuery first.
+<script src="js/jquery-1.11.0.min.js"></script>
+<script src="js/lightbox.min.js"></script>css folder to find lightbox.css and load it.
+ <link href="css/lightbox.css" rel="stylesheet" />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.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>data-title attribute if you want to show a caption.
+ 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>If you want a feature added, create an issue on Github. Someone else or I might be able to help out. No guarantees.
+ +If you find a bug, create an issue on Github. Include your operating system and browser version along with detailed steps on how to reproduce the bug.
+ +If you followed the instructions, but still can't get Lightbox working, search Stackoverflow to see if other people have run into the same issue as you. If not, post a new question.
+ +You can access older versions and see a changelog on the Github releases page.
++ Lightbox is 100% free to use. If you're using Lightbox on a commercial project and feeling generous, consider a donation. Thanks! +
+ +