JSFiddle - React, Tailwind, and code Playground

by Mukesh Yadav

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class='images'>

  <a data-imagelightbox="f" href="https://2.bp.blogspot.com/-tZlZMZoWSSo/VuKPK3O9dOI/AAAAAAAAAWY/qWS0ARGfsJc10EJ538Fywp8DKKHtUgCUw/s1600/demo5.jpg">
    <img alt='Sample caption' src="https://2.bp.blogspot.com/-tZlZMZoWSSo/VuKPK3O9dOI/AAAAAAAAAWY/qWS0ARGfsJc10EJ538Fywp8DKKHtUgCUw/s1600/demo5.jpg" />
  </a>
  <a data-imagelightbox="f" href="https://3.bp.blogspot.com/-w_GzlVRbQfY/VuKOdAE_emI/AAAAAAAAAVw/LRMazf4otRI4RY8Cmu1MjE7C0M9HII51g/s1600/demo1.jpg">
    <img alt='Sample caption' src="https://3.bp.blogspot.com/-w_GzlVRbQfY/VuKOdAE_emI/AAAAAAAAAVw/LRMazf4otRI4RY8Cmu1MjE7C0M9HII51g/s1600/demo1.jpg" />
  </a>
    <a data-imagelightbox="f" href="https://2.bp.blogspot.com/-z2o6BkG10w4/VuKO8UbHcYI/AAAAAAAAAWQ/kZtxu-uBJusdkTb1C6UHPIxp6ME87Su_Q/s1600/demo3.jpg">
    <img alt='Sample caption' src="https://2.bp.blogspot.com/-z2o6BkG10w4/VuKO8UbHcYI/AAAAAAAAAWQ/kZtxu-uBJusdkTb1C6UHPIxp6ME87Su_Q/s1600/demo3.jpg" />
  </a>
    <a data-imagelightbox="f" href="https://3.bp.blogspot.com/-w_GzlVRbQfY/VuKOdAE_emI/AAAAAAAAAVw/LRMazf4otRI4RY8Cmu1MjE7C0M9HII51g/s1600/demo1.jpg">
    <img alt='Sample caption' src="https://3.bp.blogspot.com/-w_GzlVRbQfY/VuKOdAE_emI/AAAAAAAAAVw/LRMazf4otRI4RY8Cmu1MjE7C0M9HII51g/s1600/demo1.jpg" />
  </a>
    <a data-imagelightbox="f" href="https://1.bp.blogspot.com/-9zapi-Z4wIw/VuKPasBb3vI/AAAAAAAAAWo/ZJSkxsWPMVUtewezSepCAyEb_iN2emz6w/s1600/demo7.jpg">
    <img alt='Sample caption' src="https://1.bp.blogspot.com/-9zapi-Z4wIw/VuKPasBb3vI/AAAAAAAAAWo/ZJSkxsWPMVUtewezSepCAyEb_iN2emz6w/s1600/demo7.jpg" />
  </a>
</div>

CSS

html {
  /* killing 300ms touch delay in IE */
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
a img {
  width: 200px;
  height: 200px;
}
button {
  border: none;
  cursor: pointer;
}
/* IMAGE LIGHTBOX SELECTOR */

#imagelightbox {
  cursor: pointer;
  position: fixed;
  z-index: 10000;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-box-shadow: 0 0 3.125em rgba(0, 0, 0, .75);
  box-shadow: 0 0 3.125em rgba(0, 0, 0, .75);
}
/* ACTIVITY INDICATION */

#imagelightbox-loading,
#imagelightbox-loading div {
  border-radius: 50%;
}
#imagelightbox-loading {
  width: 2.5em;
  height: 2.5em;
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
  z-index: 10003;
  top: 50%;
  left: 50%;
  margin: -1.25em 0 0 -1.25em;
  -webkit-box-shadow: 0 0 2.5em rgba(0, 0, 0, .75);
  box-shadow: 0 0 2.5em rgba(0, 0, 0, .75);
}
#imagelightbox-loading div {
  margin: 25%;
  width: 1.25em;
  height: 1.25em;
  background-color: #fff;
  -webkit-animation: imagelightbox-loading .5s ease infinite;
  animation: imagelightbox-loading .5s ease infinite;
}
@-webkit-keyframes imagelightbox-loading {
  from {
    opacity: .5;
    -webkit-transform: scale(.75);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  to {
    opacity: .5;
    -webkit-transform: scale(.75);
  }
}
@keyframes imagelightbox-loading {
  from {
    opacity: .5;
    transform: scale(.75);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: .5;
    transform: scale(.75);
  }
}
/* OVERLAY */

#imagelightbox-overlay {
  background-color: rgba(255, 255, 255, .9);
  position: fixed;
  z-index: 9998;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/* "CLOSE" BUTTON */

#imagelightbox-close {
  width: 2.5em;
  height: 2.5em;
  text-align: left;
  background-color: #666;
  border-radius: 50%;
  position: fixed;
  z-index: 10002;
  top: 2.5em;
  right: 2.5em;
  -webkit-transition: color .3s ease;
  transition: color .3s...

JavaScript

;

(function(e, t, n, r) {
  "use strict";  
  var i = function() {
      var e = n.body || n.documentElement,
        e = e.style;
      if (e.WebkitTransition == "") return "-webkit-";
      if (e.MozTransition == "") return "-moz-";
      if (e.OTransition == "") return "-o-";
      if (e.transition == "") return "";
      return false
    },
    s = i() === false ? false : true,
    o = function(e, t, n) {
      var r = {},
        s = i();
      r[s + "transform"] = "translateX(" + t + ")";
      r[s + "transition"] = s + "transform " + n + "s linear";
      e.css(r)
    },
    u = "ontouchstart" in t,
    a = t.navigator.pointerEnabled || t.navigator.msPointerEnabled,
    f = function(e) {
      if (u) return true;
      if (!a || typeof e === "undefined" || typeof e.pointerType === "undefined") return false;
      if (typeof e.MSPOINTER_TYPE_MOUSE !== "undefined") {
        if (e.MSPOINTER_TYPE_MOUSE != e.pointerType) return true
      } else if (e.pointerType != "mouse") return true;
      return false
    };
  e.fn.imageLightbox = function(r) {
    var r = e.extend({
        selector: 'id="imagelightbox"',
        allowedTypes: "png|jpg|jpeg|gif",
        animationSpeed: 250,
        preloadNext: true,
        enableKeyboard: true,
        quitOnEnd: false,
        quitOnImgClick: false,
        quitOnDocClick: true,
        onStart: false,
        onEnd: false,
        onLoadStart: false,
        onLoadEnd: false
      }, r),
      i = e([]),
      l = e(),
      c = e(),
      h = 0,
      p = 0,
      d = 0,
      v = false,
      m = function(t) {
        return e(t).prop("tagName").toLowerCase() == "a" && (new RegExp(".(" + r.allowedTypes + ")$", "i")).test(e(t).attr("href"))
      },
      g = function() {
        if (!c.length) return true;
        var n = e(t).width() * .8,
          r = e(t).height() * .9,
          i = new Image;
        i.src = c.attr("src");
        i.onload = function() {
          h = i.width;
          p = i.height;
      ...