bootstrap lightbox

by secretgspot

HTML

<article class="item">
        
            <header>
                <h1 class="title">Lightbox</h1>
            </header>
            
            <div class="content clearfix"><p>Lightbox allows you to view images, HTML and multi-media content on a dark dimmed overlay without having to leave the current page.</p>

<h2>Features</h2>

<ul class="check">
    <li>Display images, videos, HTML, Iframes, Ajax requests and SWF</li>
    <li>Supports YouTube, Vimeo, MP4 (h.264), WebM and FLV movies</li>
    <li>Group lightboxes and mix different content types</li>
    <li>3 different opening and closing transitions</li>
    <li>4 different caption styles</li>
    <li>Keyboard and mouse scroll wheel navigation</li>
</ul>

<h2>Examples</h2>

<p>Different animations – <code>fade</code>, <code>elastic</code> and <code>none</code></p>
<p class="gallery">
    <a data-lightbox="transitionIn:fade;transitionOut:fade;" href="//placehold.it/200x150"><img src="//placehold.it/200x150" width="180" height="120" alt="Lightbox Image"></a>
    <a data-lightbox="transitionIn:elastic;transitionOut:elastic;" href="//placehold.it/200x150"><img src="//placehold.it/200x150" width="180" height="120" alt="Lightbox Image"></a>
    <a data-lightbox="transitionIn:none;transitionOut:none;" href="//placehold.it/200x150"><img src="//placehold.it/200x150" width="180" height="120" alt="Lightbox Image"></a>
</p>

<p>Different title positions – <code>float</code>, <code>inside</code> and <code>over</code></p>
<p class="gallery">
    <a data-lightbox="group:mygroup1;titlePosition:float" href="//placehold.it/200x150" title="Title Position: Float"><img src="//placehold.it/200x150" width="180" height="120" alt="Lightbox Image"></a>
    <a data-lightbox="group:mygroup1;titlePosition:inside" href="//placehold.it/200x150" title="Title Position: Inside"><img src="//placehold.it/200x150" width="180" height="120" alt="Lightbox Image"></a>
    <a data-lightbox="group:mygroup1;titlePosition:over;padding:0"...

CSS

.clearfix:before, .clearfix:after, .grid-block:before, .grid-block:after { content: ""; display: table;
}
.clearfix:after, .grid-block:after { clear: both
}
.grid-box { float: left
}
.width20 { width: 20%
}
.width25 { width: 25%
}
.width33 { width: 33.333%
}
.width50 { width: 50%
}
.wk-content>*:first-child { margin-top: 0
}
.wk-content>*:last-child { margin-bottom: 0
}
.wk-slideshow, .wk-slideshow
.slides { position: relative
}
.wk-slideshow .slides, .wk-slideshow
.nav { list-style: none; margin: 0; padding: 0;
}
.wk-slideshow .slides>li { position: absolute
}
.wk-slideshow .nav
li { cursor: pointer
}
.wk-slideshow .nav
span { display: block
}
.wk-slideshow .next, .wk-slideshow
.prev { position: absolute; z-index: 5; cursor: pointer;
}
.wk-slideshow
.caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 10px; background: rgba(0,0,0,0.5);
}
.wk-slideshow
.captions { display: none
}
.wk-slideshow .caption, .wk-slideshow .caption
a { color: #fff
}
.wk-slideshow .caption
a { text-decoration: underline
}
.wk-slideshow .wk-content > a:first-child, .wk-slideshow .wk-content > img:first-child, .wk-slideshow .wk-content>a:first-child>img { display: block
}
.wk-slideshow .slides > li > *, .wk-slideshow .slides>li>*>img { display: block
}
.wk-gallery
a { display: inline-block
}
.wk-gallery a>img:first-child { display: block
}
.wk-slideset
.sets { overflow: hidden
}
.wk-slideset .set, .wk-slideset
.nav { list-style: none; margin: 0; padding: 0;
}
.wk-slideset
.set { display: none; position: relative; margin: 0 auto; text-align: center;
}
.wk-slideset .set:first-child { display: block
}
.wk-slideset .set>li { display: inline-block
}
.wk-slideset .nav
span { display: block; cursor: pointer;
}
.wk-slideset .next, .wk-slideset
.prev { position: absolute; z-index: 5; cursor: pointer;
}
.wk-slideset .wk-content > a:first-child, .wk-slideset .wk-content > img:first-child, .wk-slideset .wk-content>a:first-child>img { display:...

JavaScript

/*
 Lightbox Plugin is based on Fancybox (http://fancybox.net, Janis Skarnelis, MIT License)
*/
(function(b) {
    var i, l, t, p, e, B, k, A, f, x, y, D, q = 0,
        c = {},
        m = [],
        n = 0,
        a = {},
        j = [],
        C = null,
        s = new Image,
        E, F = 1,
        G = /\.(jpg|gif|png|bmp|jpeg)(.*)?$/i,
        K = /[^\.]\.(swf)\s*$/i,
        H = /(\/\/.*?youtube\.[a-z]+)\/watch\?v=([^&]+)&?(.*)/,
        I = /(\/\/.*?)vimeo\.[a-z]+\/([0-9]+).*?/,
        L = /\.(mp4|ogv|webm|flv)(.*)?$/i,
        w = 0,
        u = "",
        r, g, h = !1,
        z = b.extend(b("<div/>")[0], {
            prop: 0
        });
    _abort = function() {
        t.hide();
        s.onerror = s.onload = null;
        C && C.abort();
        l.empty()
    };
    _error = function() {
        !1 === c.onError(m, q, c) ? (t.hide(), h = !1) : (c.titleShow = !1, c.width = "auto", c.height = "auto", l.html('<p id="lightbox-error">The requested content cannot be loaded.<br />Please try again later.</p>'), _process_inline())
    };
    _start = function() {
        var d = m[q],
            a, o, e, g, j, f;
        _abort();
        c = b.extend({}, i.defaults, typeof b(d).data(i.name) == "undefined" ? c : b(d).data(i.name));
        b(d).attr("data-lightbox") && b.each(b(d).attr("data-lightbox").split(";"), function(a, d) {
            var b = d.match(/\s*([A-Z_]*?)\s*:\s*(.+)\s*/i);
            b && (c[b[1]] = b[2])
        });
        f = c.onStart(m, q, c);
        if (f === !1) h = !1;
        else {
            typeof f == "object" && (c = b.extend(c, f));
            e = c.title || (d.nodeName ? b(d).attr("title") : d.title) || "";
            if (d.nodeName && !c.orig) c.orig = b(d).children("img:first").length ? b(d).children("img:first") : b(d);
            e === "" && c.orig && c.titleFromAlt && (e = c.orig.attr("alt"));
            a = c.href || (d.nodeName ? b(d).attr("href") : d.href) || null;
            if...