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.
Lightbox2 is open-source.
View and fork the code on Github.
js
folder to find
jquery-1.10.2.min.js
and lightbox-2.6.min.js
and
load both of these files from your html page. Load jQuery first:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
css
folder to find lightbox.css
and load it from your html page:
<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" title="My caption">image #1</a>
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>
rel="lightbox"
. The new
data-lightbox
approach is preferred though as it is valid
html.If you find a bug, create an issue on Github. Include your operating system and browser version along with detailed steps to reproduce the bug.
If you want a feature added, please create an issue on Github. Someone else or I might be able to help out. No guarantees.
If you have a question that is not a bug or a feature request, your best chance of getting an answer is by following these steps:
See a change log and access older versions on the Github releases page.
Lightbox is completely free to use. If you're using Lightbox on a commercial project and are feeling generous, consider a donation. Thanks!