The original lightbox script.
Eight years later — still going strong!
jsfolder to find
lightbox.min.jsand 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>
cssfolder to find
lightbox.cssand load it.
<link href="css/lightbox.css" rel="stylesheet" />
imgfolder to find
next.png. These files are used in
lightbox.css. By default,
lightbox.csswill look for these images in a folder called
data-lightboxattribute 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
<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>
data-titleattribute if you want to show a caption.
data-lightboxattribute 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!