Lightbox

A jQuery plugin that adds lightbox functionality to any element it targets. Uses CSS transitions to perform the animation.

Comes with keyboard controls ESC, LEFT, and RIGHT to help navigation.

Comes with a markup API that allows running the plugin without writing a single line of JavaScript. This is Responsive's first class API and should be your first consideration when using a plugin.

Example

Relatively loaded target

Launch relative overlay

External target with iframe header and footer

Launch external overlay

External target with iframe header and footer and scrollbars

Launch external overlay

Youtube

Launch Youtube overlay

Vimeo

Launch Vimeo overlay

Google Maps

Launch Google Map overlay

Internal target

Launch internal overlay

Grouped

Grouped Item 1
Grouped Item 2
Grouped Item 3

The Markup

/* Add inside any element. */
<a href="YOUR_TARGET" or data-lightbox-target="YOUR_TARGET" data-lightbox-title="YOUR_TITLE" data-lightbox-group="YOUR_GROUP_NAME" >
Lightbox trigger
</a>

Methods

The lightbox plugin exposes the following method signatures.

.lightbox(options)
Initialises the plugin with an optional options object
options
Contains parameters to pass to the plugin.
close
Whether to add a close indicator to the lightbox.
external
Whether the target is on a different page.
group
A string containing a group identifier for creating galleries.
iframe
Whether to use an iframe.
iframeScroll
Whether the iframe should have scrollbars.
keyboard
Whether to enable keyboard control.
title
The text to insert as the title of the lightbox
description
The text to insert as the description of the lightbox in the footer
next
The text to insert into the next indicator. Defaults to >
previous
The text to insert into the previous indicator. Defaults to <
.lightbox(toggle)
Toggle the visibility of the lightbox.
.lightbox("show")
Show the lightbox.
.lightbox("hide")
Show the lightbox.
.lightbox("previous")
Cycles the lightbox instance to the previous item.
.lightbox("next")
Cycles the lightbox instance to the next item.

Events

The lightbox plugin exposes the following events allowing the developer to tap into its behaviour. These events can be tapped into by selecting the lightbox trigger.

show.lightbox.responsive
This event is fired immediately when the plugins show instance method is invoked.
shown.lightbox.responsive
This event is fired when the plugins shown instance method is invoked once the target has completed the animation and is shown.
hide.lightbox.responsive
This event is fired immediately when the plugins hide instance method is invoked.
hidden.lightbox.responsive
This event is fired when the plugins hidden instance method is invoked once the target has completed the animation and is hidden.

Data API

The lightbox's default behaviour is bound using a markup API that allows running the plugin without writing a single line of JavaScript. If you need to override this behaviour the following code will allow you to do so. 

// Override the default behaviour
$(document.body).off("click.lightbox.responsive")
                .on("click.lightbox.responsive", ":attrStart(data-lightbox)", function (event) {    
                    // Your custom behaviour...
                });
                    
// Bind to the show event.
$("YOUR_TRIGGER_SELECTOR").on("show.lightbox.responsive", function(event) {
    // Your custom behaviour...
});
                                               
// Bind to the shown event.
$("YOUR_TRIGGER_SELECTOR").on("shown.lightbox.responsive", function(event) {
    // Your custom behaviour...
});
// Bind to the hide event.
$("YOUR_TRIGGER_SELECTOR").on("hide.lightbox.responsive", function(event) {
    // Your custom behaviour...
});
// Bind to the hidden event.
$("YOUR_TRIGGER_SELECTOR").on("hidden.lightbox.responsive", function(event) {
    // Your custom behaviour...
});