JSFiddle - React, Tailwind, and code Playground

SimplBox Lightbox https://github.com/Dendrochronologyy/SimplBox

by Jennifer Perrin

HTML

<section class="container">
     <h1>SimplBox</h1>

     <h3>Default box</h3>

    <ul>
        <li> <a href="http://genert.laal.ee/demo/simplbox/gfx/image_01.jpg" data-simplbox="demo1"><img src="http://genert.laal.ee/demo/simplbox/gfx/image_01_thumb.jpg" alt="Image 01" /></a>

        </li>
        <li> <a href="http://genert.laal.ee/demo/simplbox/gfx/image_02.JPG" data-simplbox="demo1"><img src="http://genert.laal.ee/demo/simplbox/gfx/image_02_thumb.jpg" alt="Image 02" /></a>

        </li>
    </ul>
     <h3>With loading icon</h3>

    <ul>
        <li> <a href="http://genert.laal.ee/demo/simplbox/gfx/image_03.JPG" data-simplbox="demo2"><img src="http://genert.laal.ee/demo/simplbox/gfx/image_03_thumb.jpg" alt="Image 03" /></a>

        </li>
        <li> <a href="http://genert.laal.ee/demo/simplbox/gfx/image_04.JPG" data-simplbox="demo2"><img src="http://genert.laal.ee/demo/simplbox/gfx/image_04_thumb.jpg" alt="Image 04" /></a>

        </li>
    </ul>
     <h3>With loading icon and overlay</h3>

    <ul>
        <li> <a href="http://genert.laal.ee/demo/simplbox/gfx/image_05.jpg" data-simplbox="demo3"><img src="http://genert.laal.ee/demo/simplbox/gfx/image_05_thumb.jpg" alt="Image 05" /></a>

        </li>
        <li> <a href="http://genert.laal.ee/demo/simplbox/gfx/image_06.jpg" data-simplbox="demo3"><img src="http://genert.laal.ee/demo/simplbox/gfx/image_06_thumb.jpg" alt="Image 06" /></a>

        </li>
    </ul>
     <h3>With loading icon, overlay and quit icon</h3>

    <ul>
        <li> <a href="http://genert.laal.ee/demo/simplbox/gfx/image_07.jpg" data-simplbox="demo4"><img src="http://genert.laal.ee/demo/simplbox/gfx/image_07_thumb.jpg" alt="Image 07" /></a>

        </li>
        <li> <a href="http://genert.laal.ee/demo/simplbox/gfx/image_08.jpg" data-simplbox="demo4"><img src="http://genert.laal.ee/demo/simplbox/gfx/image_08_thumb.jpg" alt="Image 08" /></a>

        </li>
    </ul>
     <h3>With loading icon, overlay, quit icon and caption</h3>

   ...

CSS

@import url(http://fonts.googleapis.com/css?family=Quicksand);
 html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
#simplbox {
    z-index: 10000;
    ms-touch-action: none;
    touch-action: none;
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
}
body {
    font-family:"Quicksand", sans-serif;
    z-index: 1;
    background: #F3F3F3;
    font-size: 16px;
}
.container {
    min-width: 280px;
    max-width: 750px;
    margin: 30px auto;
    padding: 0 15px;
    text-align: center;
}
.container h1 {
    margin: 30px 0 0 0;
    padding: 0;
    color: #545976;
    font-size: 45px;
}
.container h2 {
    margin: 10px 0 0 0;
    padding: 0;
    font-size: 20px;
    line-height: 26px;
    color: #545976;
}
.container h3 {
    margin: 30px 0 0 0;
    padding: 20px 0 10px 0;
    color: #888a85;
    line-height: 20px;
    font-size: 18px;
    border-top: 1px solid #e4e4e4;
}
.container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.container ul li {
    display: inline-block;
    margin: 0.7em;
}
.container ul li img {
    width: 200px;
    height: auto;
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.container ul .social li {
    margin: 0;
    margin-top: 1em;
}
#simplbox-loading {
    position: fixed;
    z-index: 10003;
    top: 50%;
    left: 50%;
}
#simplbox-loading:before {
    display: block;
    width: 8px;
    height: 8px;
    background-color: #ccc;
    content:"";
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-animation: loader 1s linear infinite;
    -webkit-animation: loader 1s linear infinite;
    animation: loader 1s linear infinite;
    -moz-transform-origin: 8px 8px;
    -ms-transform-origin: 8px 8px;
    -webkit-transform-origin: 8px 8px;
    transform-origin: 8px...

JavaScript

/***
 * SimplBox - v1.0.0 - 2014.08.04
 * Author: (c) Dendrochronology - @Dendrochronolo - http://genert.laal.ee/
 * Available for use under the MIT License.
 ***/;
(function (window, document, undefined) {
    "use strict";

    var docElem = document.documentElement,
        bodyElem = document.getElementsByTagName("body")[0],

        FALSE = false,
        ATTACHEVENT = "attachEvent",
        ADDEVENTLISTENER = "addEventListener",

        isEventListener = ADDEVENTLISTENER in document;

    function SimplBox(p_Elements, p_Options) {
        var base = this;

        base.m_Elements = p_Elements;
        base.m_UserOptions = p_Options || {};
        base.m_Options = {};

        base.m_CurrentTargetElements = FALSE;
        base.m_CurrentTargetElementsLength = FALSE;
        base.m_CurrentTargetNumber = FALSE;
        base.m_CurrentImageElement = FALSE;
        base.m_InProgress = FALSE;
        base.m_InstalledImageBox = FALSE;
        base.m_Alt = FALSE;
        base.m_AnimateDone = FALSE; // For browsers that do not support hardware acceleration.

        var __construct = function () {
            for (var i in SimplBox.options) {
                if (base.m_UserOptions.hasOwnProperty(i)) {
                    base.m_Options[i] = base.m_UserOptions[i];
                } else {
                    base.m_Options[i] = SimplBox.options[i];
                }
            }
        }();
    }

    SimplBox.prototype = {
        init: function () {
            var base = this;

            // API start
            base.API_AddEvent = base.addEvent;
            base.API_RemoveImageElement = base.removeImageElement;
            // API end

            base.checkBrowser();
            base.addEvents();
        },

        checkBrowser: function () {
            var base = this,
                isTouch = "ontouchstart" in window || window.navigator.msMaxTouchPoints || navigator.maxTouchPoints || FALSE,
                hasPointers = isTouch &&...