Lightbox

A jQuery plugin for simple modals.

Demo

Basic

Gallery

YouTube & Vimeo Videos

Mobile

Fixed Positioning

Top Positioning

In-Line Content

jQuery Objects

iFrame

Sizing

Caption Formating

Retina Support

Use

Main

lightbox.js
lightbox.css

Dependencies

core.js
touch.js
transition.js

Basic

Display images and videos in an overlay:

$("a").lightbox();
<a href="one.jpg" title="Image Caption">
    <img src="one_thumb.jpg" alt="">
</a>

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.

Name Type Default Description
customClass string '' Class applied to instance
extensions array "jpg", "sjpg", "jpeg", "png", "gif" Image type extensions
fixed boolean false Flag for fixed positioning
formatter function $.noop Caption format function
infinite boolean false Flag for infinite galleries
labels.close string 'Close' Close button text
labels.count string 'of' Gallery count separator text
labels.next string 'Next' Gallery control text
labels.previous string 'Previous' Gallery control text
labels.captionClosed string 'View Caption' Mobile caption toggle text, closed state
labels.captionOpen string 'View Caption' Mobile caption toggle text, open state
margin int 50 Margin used when sizing (single side)
minHeight int 100 Minimum height of modal
minWidth int 100 Minimum width of modal
mobile boolean false Flag to force 'mobile' rendering
retina boolean false Flag to use 'retina' sizing (halves natural sizes)
requestKey string 'fs-lightbox' GET variable for ajax / iframe requests
top int 0 Target top position; over-rides centering
videoRadio number 0.5625 Video height / width ratio (9 / 16 = 0.5625)
videoWidth int 800 Video max width

Events

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

Event Description
open.lightbox Lightbox opened; Triggered on window
close.lightbox Lightbox closed; Triggered on window

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

Name Type Default Description
options object {} New plugin defaults

destroy

Removes plugin instance.

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

resize

Resizes lightbox.

$.lightbox("resize");

Parameters

Name Type Default Description
height `int false`   Target height or false to auto size
width `int false`   Target width or false to auto size

CSS

Class Type Description
.fs-lightbox-element element Target elmement
.fs-lightbox element Base widget class
.fs-lightbox.fs-lightbox-open modifier Indicates open state
.fs-lightbox.fs-lightbox-loading modifier Indicates loading state
.fs-lightbox.fs-lightbox-animating modifier Indicates animating state
.fs-lightbox.fs-lightbox-mobile modifier Indicates mobile display
.fs-lightbox.fs-lightbox-fixed modifier Indicates fixed positioning
.fs-lightbox.fs-lightbox-inline modifier Indicates inline content
.fs-lightbox.fs-lightbox-iframed modifier Indicates iFrame content
.fs-lightbox-overlay element Overlay element
.fs-lightbox-close element Close element
.fs-lightbox-loading_icon element Loading icon element
.fs-lightbox-container element Container element
.fs-lightbox-content element Content element
.fs-lightbox-image element Image element
.fs-lightbox-video element Video element
.fs-lightbox-iframe element iFrame element
.fs-lightbox-tools element Tools element
.fs-lightbox-meta element Meta info element
.fs-lightbox-controls element Controls container element
.fs-lightbox-control element Control element
.fs-lightbox-control.fs-lightbox-control_previous modifier Indicates previous control
.fs-lightbox-control.fs-lightbox-control_next modifier Indicates next control
.fs-lightbox-control.fs-lightbox-control_disabled modifier Indicates disbaled state
.fs-lightbox-position element Position element
.fs-lightbox-position_current element Current position element
.fs-lightbox-position_total element Total position element
.fs-lightbox-caption element Caption element
.fs-lightbox-error element Error message element
.fs-lightbox-lock modifier Indicates locked state; Applied to body element