Lightbox

Demo

Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

<a href="large_1.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">
	<img src="thumbnail_1.jpg" alt="">
</a>
<a href="large_2.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">
	<img src="thumbnail_2.jpg" alt="">
</a>
<a href="large_3.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">
	<img src="thumbnail_3.jpg" alt="">
</a>

$(".lightbox").lightbox();

Using Lightbox

Main

lightbox.js
lightbox.css

Dependencies

jQuery
core.js
touch.js
transition.js
viewer.js (optional)

Basic

Display images and videos in an overlay:

$("a").lightbox();

<a href="one.jpg" title="Image Caption">
  <img src="one_thumb.jpg" alt="">
</a>

Gallery

Link multiple images or videos together with the data-lightbox-gallery attribute:

<a href="one.jpg" title="Image Caption One" data-lightbox-gallery="photo_gallery">
  <img src="one_thumb.jpg" alt="">
</a>
<a href="two.jpg" title="Image Caption Two" data-lightbox-gallery="photo_gallery">
  <img src="two_thumb.jpg" alt="">
</a>
<a href="three.jpg" title="Image Caption Three" data-lightbox-gallery="photo_gallery">
  <img src="three_thumb.jpg" alt="">
</a>

Events

React to the lightbox by listening for the open.lightbox and close.lightbox events on the window:

$(window).on("open.lightbox", function() {
  // ...
}).on("close.lightbox", function() {
  // ...
});

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-lightbox-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Events

Events are triggered on the target instance's element, unless otherwise stated.

Methods

Methods are publicly available to all active instances, unless otherwise stated.

close

Closes active instance.

$.lightbox("close");

defaults

Extends plugin default settings; effects instances created hereafter.

$.lightbox("defaults", { ... });

Parameters

destroy

Removes plugin instance.

$(".target").lightbox("destroy");

resize

Resizes lightbox.

$.lightbox("resize");

Parameters

CSS