JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<div class="unit size1of1 gallery gallery-big">
                <div class="hotelpic-large gallery-index" data-content="5 / 5">
                    <a class="previous" href="#previous"><i class="icons icon-arrow btn"></i></a>
                    <a class="next" href="#next"><i class="icons icon-arrow btn"></i></a>

                    <div class="gallery-loader hidden"></div>
                 
                 <div class="thumbs">
                    <a class="thumb" href="http://i.snoozee.com/_v232/public/img/cities/slider/frankfurt07.jpg">
                        <i class="disc"></i>
                    </a>
                    <a class="thumb" href="http://a.snoozee.com/_v232/public/img/cities/slider/dresden01.jpg">
                        <i class="disc"></i>
                    </a>
                    <a class="thumb" href="http://a.snoozee.com/_v232/public/img/cities/slider/duesseldorf01.jpg">
                        <i class="disc"></i>
                    </a>
                    <a class="thumb active" href="http://i.snoozee.com/_v232/public/img/cities/slider/dresden02.jpg">
                        <i class="disc"></i>
                    </a>
                </div>
            </div>

CSS

.thumb { width: 40px; height: 40px; background:red;margin: 10px; display:inline-block }
img {
    position: absolute;
    display:block;
    transition: opacity 0.6s ease 0s;
}

JavaScript

/**
     * @module jquery-plugin
     * @return {jQuery}
     */
    var pluginName = 'gallery',
        defaults = {
            /**
             * loader element with spinning gif
             *
             * @property loader
             * @type string
             */
            loader: 'div.gallery-loader',
            /**
             * where the thumbnail elements reside
             *
             * @property thumbnails
             * @type string
             */
            thumbnails: 'div.thumbs',
            /**
             * bigImage
             *
             * @property bigImage
             * @type string
             */
            bigImage: 'div.hotelpic-large',
            /**
             * controls for next and previous
             *
             * @property controls
             * @type string
             */
            controls: 'a.previous, a.next, button.previous, button.next',
            /**
             * automatic slideshow
             *
             * @property slideShow
             * @type boolean
             */
            slideShow: false,
            /**
             * timing for slideshow between images in ms
             *
             * @property slideShowTiming
             * @type number
             */
            slideShowTiming: 5000,
            /**
             * enable/disable crossfading
             *
             * @property crossFading
             * @type boolean
             */
            crossFading: false,
            /**
             * image queue for images
             *
             * @property imageQueue
             * @type array
             */
            imageQueue: [],
            /**
             * caption for images
             *
             * @property caption
             * @type string
             */
            caption: ''
        };

    /**
     * __Gallery-Plugin__
     *
     * @class Gallery
     * @constructor
     * @param element {Object} element from selection
     * @param...