Download a zip of the latest release (or any previous one) from the Github Releases page.
Or install using npm:
npm install lightbox2 --saveOpen up the zip file and take a peek at the barebones, working example that is included in the /examples folder.
Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the /dist folder.
<head> tag:
</body> tag:
Make sure jQuery, which is required by Lightbox, is also loaded.
lightbox.js. jQuery 1.7 or greater is required, and since the effects module is utilized, the jQuery slim build is not supported.dist/js/lightbox-plus-jquery.js instead of lightbox.js.lightbox.css are in the correct location. You can grab the images from the /dist/images folder.
data-lightbox attribute to any image link to enable Lightbox. For the value of the attribute, use a unique name for each image. For example:
Optional:
data-title attribute if you want to show a caption.data-alt attribute if you want to set the alt attribute of the linked image.data-lightbox attribute value for all of the images. For example:
If you want to change any of the default options, call the option method.
| Option | Default | Description |
|---|---|---|
| alwaysShowNavOnTouchDevices | false | If true, the left and right navigation arrows which appear on mouse hover when viewing image sets will always be visible on devices which support touch. |
| albumLabel | "Image %1 of %2" | The text displayed below the caption when viewing an image set. The default text shows the current image number and the total number of images in the set. |
| disableScrolling | false | If true, prevent the page from scrolling while Lightbox is open. This works by settings overflow hidden on the body. |
| fadeDuration | 600 | The time it takes for the Lightbox container and overlay to fade in and out, in milliseconds. |
| fitImagesInViewport | true | If true, resize images that would extend outside of the viewport so they fit neatly inside of it. This saves the user from having to scroll to see the entire image. |
| imageFadeDuration | 600 | The time it takes for the image to fade in once loaded, in milliseconds. |
| maxWidth | If set, the image width will be limited to this number, in pixels. Aspect ratio will not be maintained. | |
| maxHeight | If set, the image height will be limited to this number, in pixels. Aspect ratio will not be maintained. | |
| positionFromTop | 50 | The distance from top of viewport that the Lightbox container will appear, in pixels. |
| resizeDuration | 700 | The time it takes for the Lightbox container to animate its width and height when transition between different size images, in milliseconds. |
| showImageNumberLabel | true | If false, the text indicating the current image number and the total number of images in set (Ex. "image 2 of 4") will be hidden. |
| wrapAround | false | If true, when a user reaches the last image in a set, the right navigation arrow will appear and they will be to continue moving forward which will take them back to the first image in the set. |
Lightbox2 has been tested successfully in the following browsers:
lightbox-plus-jquery.js file includes jQuery v2.x and supports IE 9+. If you want to support IE 6, 7, and 8, use your own copy of jQuery v1.x with lightbox.js.Lightbox2 is licensed under The MIT License.
Follow the steps below to get help. Make sure you have read the documentation on this page and looked at the included example first.
lightbox2 tag.Do not use Github Issues to report personal support requests.
If you find a bug, please file a Github issue.