THIS PLUGIN IS NO LONGER BEING MAINTAINED. IF SOMEONE ELSE WANTS TO MAINTAIN IT FEEL FREE TO FORK THE REPO.

Bootstrap - Lightbox

This is a plugin for Twitter Bootstrap that adds a lightbox that is based off the modal dialog

Quick start

You have several options. You can clone the repository git clone git://github.com/jbutz/bootstrap-lightbox.git, grab an archive, or use cdnjs.

Once you have the files include the CSS and JavaScript files in your page and then give the example code below a shot.

Example

<a data-toggle="lightbox" href="#demoLightbox">Open Lightbox</a>
<div id="demoLightbox" class="lightbox fade"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class='lightbox-dialog'>
        <div class='lightbox-content'>
            <img src="image.png">
            <div class='lightbox-caption'>
                Your caption here
            </div>
        </div>
    </div>
</div>

Usage

Via data attributes

All you need to do is add data-toggle="lightbox" and href="#lightbox" or data-target="#lightbox" to a link, and set the href so it references the lightbox you want to display.

<a data-toggle="lightbox" href="#demoLightbox">Open Lightbox</a>

Via JavaScript

Open the lightbox with the id myLightbox.

$('#myLightbox').lightbox(options)

Options

Name	Type	Default	Description
backdrop	boolean	true	This adds a modal-backdrop element.
keyboard	boolean	true	Pressing escape closes the lightbox.
show	boolean	true	Shows the lightbox when initialized. Note: This only applies when using JavaScript to setup the lightbox.
resizeToFit	boolean	true	This resizes the image to fit the window if the image is too large.