Examples

Relatively loaded target

<a href="../css/alerts.html #examples" data-lightbox-title="Relative url">
    Launch relative overlay
</a>

External target with iframe header and footer

<a href="//bbc.co.uk" data-lightbox-title="BBC" 
   data-lightbox-description="<p>sample text or the footer.</p>">
    Launch external overlay
</a>

External target with iframe header and footer and scrollbars

<a href="//bbc.co.uk" data-lightbox-title="BBC" 
   data-lightbox-description="<p>sample text or the footer.</p>" 
   data-lightbox-iframe-scroll="true">
    Launch external overlay
</a>

Youtube

<a href="//www.youtube.com/embed/eRW84aVCMWo" data-lightbox-title="Youtube">
Launch Youtube overlay
</a>

Vimeo

<a href="//player.vimeo.com/video/24954567" data-lightbox-title="Vimeo">
    Launch Vimeo overlay
</a>

Google Maps

<a href="//maps.google.co.uk/maps?safe=off&q=glasgow&ie=UTF8&hq=&hnear=Glasgow,+Glasgow+City,+United+Kingdom&gl=uk&t=h&z=11&ll=55.864237,-4.251806&output=embed" 
   data-lightbox-title="Google Maps">
    Launch Google Map overlay
</a>

Internal target

<a href="#" data-lightbox-target="#overlay1">Launch internal overlay</a>
<div id="overlay1" class="hidden">
    <p>
        Lorem ipsum dolor sit amet...
    </p>
</div>

Form

<a href="#" data-lightbox-target="#form-overlay" data-lightbox-fit-viewport="false">
    Launch internal overlay containing a form
</a>

Modal

<a href="#" class="modal" data-lightbox-target="#modal" data-lightbox-modal="true">
    Launch modal overlay
</a>
<div id="modal" class="hidden">
    <p>
        Lorem ipsum dolor sit amet...
    </p>
    <p>
        <button role="button" data-lightbox-modal-trigger=".modal">
            Click to close.
        </button>
    </p>
</div>

Wrapped Image

<a href="../assets/img/768x900.jpg" data-lightbox-title="Kittens!">
    <img src="../assets/img/768x900_thumb.jpg" />
</a>

Mobile Redirect

Redirects on viewports of 768px and below. (settable)

<a href="../assets/img/768x900.jpg" 
   data-lightbox-mobile-target="../assets/img/768x900.jpg" 
   data-lightbox-mobile-viewport-width="768">
    <img src="../assets/img/768x900_thumb.jpg" />
</a>

Grouped

<a href="../assets/img/hydrangeas.jpg" 
   data-lightbox-title="Hydrangeas with a long title appended" 
   data-lightbox-group="grouped">
    Grouped Item 1
</a>

Markup

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

Methods

The lightbox exposes the following method signatures.

.lightbox(options)

Initialises the plugin with an optional options object

Name	Type	Description	Default Value
modal	boolean	Whether to the lightbox should be in modal mode.	false
external	boolean	Whether the target is on a different page..	false
group	string	A string containing a group identifier for creating galleries.
iframe	boolean	Whether to use an iframe.	false
iframeScroll	boolean	Whether the iframe should have scrollbars.	false
fitViewport	boolean	Whether locally loaded content width should be forced to fit the viewport.	true
keyboard	boolean	Whether to enable keyboard control.	true
title	string	The text to insert as the title of the lightbox.
description	string	The text to insert as the description of the lightbox in the footer.
next	string	The text to insert into the next indicator.	>
previous	string	The text to insert into the previous indicator.	>
mobileTarget	string	An alternative url for mobile views.
mobileViewportWidth	number	The maximum viewport width in pixels to present the alternative url for.	480
enabletouch	boolean	Whether the carousel responds to touch events	true

.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 exposes the following events allowing the developer to tap into its behaviour.

show.r.lightbox

This event is fired immediately when the plugins show instance method is invoked.

shown.r.lightbox

This event is fired when the plugins shown instance method is invoked once the target has completed the animation and is shown.

hide.r.lightbox

This event is fired immediately when the plugins hide instance method is invoked.

hidden.r.lightbox

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.r.lightbox")
                .on("click.r.lightbox", ":attrStart(data-lightbox)", function (event) {    
                    // Your custom behaviour...
                });
                    
// Bind to the show event.
$("YOUR_TRIGGER_SELECTOR").on("show.r.lightbox", function(event) {
    // Your custom behaviour...
});
                                               
// Bind to the shown event.
$("YOUR_TRIGGER_SELECTOR").on("shown.r.lightbox", function(event) {
    // Your custom behaviour...
});
// Bind to the hide event.
$("YOUR_TRIGGER_SELECTOR").on("hide.r.lightbox", function(event) {
    // Your custom behaviour...
});
// Bind to the hidden event.
$("YOUR_TRIGGER_SELECTOR").on("hidden.r.lightbox", function(event) {
    // Your custom behaviour...
});