JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Bootstrap Lightbox

    A simple lightbox plugin based on the bootstrap modal plugin.
    Filed under  › 

    • 🔾43%Overall
    • 1,093
    • 27.5 days
    • 🕩337
    • 👥10

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

    Bootstrap - Lightbox Build Status

    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.
    Show All