by Lokesh Dhakar
Follow me on Twitter

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.


Single images

thumb-1 thumb-1

An image set

Plants: image 1 0f 4 thumb Plants: image 2 0f 4 thumb Plants: image 3 0f 4 thumb Plants: image 4 0f 4 thumb



Lightbox2 is open-source.
View and fork the code on Github.

How to use

Step-by-step instructions

Part 1 - Get setup

  1. Download and unzip the latest version of Lightbox from above.
  2. Look inside the 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>
  3. Look inside the css folder to find lightbox.css and load it from your html page:
    <link href="css/lightbox.css" rel="stylesheet" />
  4. 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.

Part 2 - Turn it on



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.

Feature requests

If you want a feature added, please create an issue on Github. Someone else or I might be able to help out. No guarantees.

Support questions

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:

  1. Search the Lightbox forums.
    You will not be able to post new questions in the forum as posting has been disabled. The forum is having spam problems and the forum will eventually be phased out.
  2. Search Stackoverflow.
  3. Create a new question on Stackoverflow.