JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<script src="http://sarasoueidan.com/demos/s-gallery/js/plugins.js"></script>
<script src="http://sarasoueidan.com/demos/s-gallery/js/scripts.js"></script>
<div id="gallery-container">
    <ul class="items--small">
        <li class="item"> <a href="#">
                <img src="http://sarasoueidan.com/demos/s-gallery/images/small-1.png" alt="" />
            </a>

        </li>
        <li class="item"><a href="#"><img src="http://sarasoueidan.com/demos/s-gallery/images/small-2.png" alt="" /></a>

        </li>
        <li class="item"><a href="#"><img src="http://sarasoueidan.com/demos/s-gallery/images/small-3.png" alt="" /></a>

        </li>
        <li class="item"><a href="#"><img src="http://sarasoueidan.com/demos/s-gallery/images/small-4.png" alt="" /></a>

        </li>
        <li class="item"><a href="#"><img src="http://sarasoueidan.com/demos/s-gallery/images/small-5.png" alt="" /></a>

        </li>
        <li class="item"><a href="#"><img src="http://sarasoueidan.com/demos/s-gallery/images/small-6.png" alt="" /></a>

        </li>
    </ul>
    <ul class="items--big">
        <li class="item--big"> <a href="#">
          <figure>
            <img src="http://sarasoueidan.com/demos/s-gallery/images/big-1.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>

        </li>
        <li class="item--big"> <a href="#">
          <figure>
            <img src="http://sarasoueidan.com/demos/s-gallery/images/big-2.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>

        </li>
        <li class="item--big"> <a href="#">
          <figure>
            <img src="http://sarasoueidan.com/demos/s-gallery/images/big-3.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>

        </li>
       ...

CSS

/*
*
* Gallery-specific Styles
*
*/

* {

    margin: 0;

    padding: 0;

    list-style: none;

    -moz-box-sizing: border-box;

    box-sizing: border-box

}

#gallery-container {

    font-size: 20px;

    margin: auto;

    position: relative;

    max-width: 50em;

    text-align: center;

    overflow: hidden;

    padding-top: 1em

}

#gallery-container:full-screen {

    max-width: 100% !important;

    width: 100%;

    height: 100% !important;

    background-color: #111

}

#gallery-container:-webkit-full-screen {

    max-width: 100% !important;

    width: 100%;

    height: 100% !important;

    background-color: #111

}

#gallery-container:-moz-full-screen {

    max-width: 100% !important;

    width: 100%;

    height: 100% !important;

    background-color: #111

}

.controls {

    text-align: center;

    font-size: 1em;

    opacity: 0;

    pointer-events: none;

    -webkit-transition: opacity .3s ease;

    transition: opacity .3s ease;

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0

}

.control, .grid, .fs-toggle {

    width: .66em;

    height: .66em;

    text-align: center;

    line-height: .5em;

    cursor: pointer;

    display: inline-block;

    margin-right: 10px

}

.showControls {

    opacity: 1;

    pointer-events: auto;

    -webkit-transition: opacity .6s 1s ease;

    transition: opacity .6s 1s ease

}

.hideControls {

    opacity: 0;

    pointer-events: none

}

.icon-grid, .icon-arrow-left, .icon-arrow-right, .icon-fullscreen-exit, .icon-fullscreen {

    display:inline-block;

    width: 20px;

    height: 20px;

    background-image: url(http://sarasoueidan.com/demos/s-gallery/images/controls-light2.png);

    background-repeat: no-repeat

}

.icon-grid {

    background-position: 0 0

}

.icon-arrow-left {

    background-position: -40px 0

}

.icon-arrow-right {

    background-position: -80px 0

}

.icon-fullscreen-exit {

    background-position: -120px 0

}

.icon-fullscreen {

   ...

JavaScript

$(document).ready(function () {
     $('#gallery-container').sGallery({
         fullScreenEnabled: true
     });
 });