Bootstrap Lightbox - v0.6.1

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.min.css">
<p><a data-toggle="lightbox" href="#demoLightbox1">Small Lightbox</a>

</p>
<div id="demoLightbox1" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="lightbox-dialog">
        <div class="lightbox-content">
            <img...

CSS

/*!
* bootstrap-lightbox.css v0.6.1 
* Copyright 2013 Jason Butz
* http://www.apache.org/licenses/LICENSE-2.0.txt
*/
 .lightbox-open {
    overflow: hidden;
}
body.lightbox-open, .lightbox-open .navbar-fixed-top, .lightbox-open .navbar-fixed-bottom {
    margin-right: 15px;
}
.lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: none;
    overflow: auto;
    overflow-y: scroll;
}
.lightbox .fade .lightbox-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    transform: translate(0, -25%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}
.lightbox .in .lightbox-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
.lightbox .lightbox-dialog {
    z-index: 1050;
    width: auto;
    /*padding: 10px;*/
    margin-right: auto;
    margin-left: auto;
}
.lightbox .lightbox-dialog .lightbox-header {
    float: right;
}
.lightbox .lightbox-dialog .lightbox-header .close {
    margin-top: -2px;
}
.lightbox .lightbox-dialog .lightbox-content {
    position: relative;
    display: inline-block;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #999999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    outline: none;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
}
.lightbox .lightbox-dialog .lightbox-content .lightbox-caption {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 10px;
    padding: 2%;
    font-size: 14px;
    line-height: 18px;
    color: white;
    text-align: center;
    text-shadow: 0 -1px 0 #000000;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    background: #000;
    background: rgba(0, 0, 0,...

JavaScript

/*!
 * bootstrap-lightbox.js v0.6.1
 * Copyright 2013 Jason Butz
 * http://www.apache.org/licenses/LICENSE-2.0.txt
 */

+ function ($) {
    "use strict";

    // LIGHTBOX CLASS DEFINITION
    // ======================

    var Lightbox = function (element, options) {
        this.options = options
        this.$element = $(element)
        this.$backdrop = null
        this.isShown = null

        if (this.options.remote) this.$element.load(this.options.remote)
    }

    // We depend upon Twitter Bootstrap's Modal library to simplify things here
    Lightbox.prototype = $.extend({}, $.fn.modal.Constructor.prototype);

    Lightbox.prototype.constructor = Lightbox;

    Lightbox.DEFAULTS = {
        backdrop: true,
        keyboard: true,
        show: true
    }

    Lightbox.prototype.show = function (_relatedTarget) {
        var that = this;
        var e = $.Event('show.bs.lightbox', {
            relatedTarget: _relatedTarget
        });

        this.$element.trigger(e);

        if (this.isShown || e.isDefaultPrevented()) return;

        this.isShown = true;

        this.escape();

        this.$element.on('click.dismiss.lightbox', '[data-dismiss="lightbox"]', $.proxy(this.hide, this));

        // This bit is added since we don't display until we have the size
        //  which prevents image jumping
        this.preloadSize(function () {
            that.backdrop(function () {
                var transition = $.support.transition && that.$element.hasClass('fade');

                if (!that.$element.parent().length) {
                    that.$element.appendTo(document.body); // don't move modals dom position
                }

                that.$element.show();

                if (transition) {
                    that.$element[0].offsetWidth; // force reflow
                }

                that.$element.addClass('in')
                    .attr('aria-hidden', false);

                that.enforceFocus();

                var e =...