JSFiddle - React, Tailwind, and code Playground

by roadrash

HTML

<script src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<div>
    <p>
        <a href="/roadrash/7AHX9/show/light/" onclick="return hs.htmlExpand(this, { objectType: 'iframe', wrapperClassName: 'draggable-header', slideshowGroup: 'html' } )">
        Content in iframe
        </a>
    </p>
</div>

<div class="highslide-gallery"> <a href="http://highslide.com/images/gallery1.jpg" class="highslide" onclick="return hs.expand(this, config1)">
        <img src="http://highslide.com/images/gallery1.thumb.jpg" alt="Caption text" />
    </a>
 <a href="http://highslide.com/images/gallery2.jpg" class="highslide"
    onclick="return hs.expand(this, config1)">
        <img src="http://highslide.com/images/gallery2.thumb.jpg" alt="Caption text" />
    </a>
 <a href="http://highslide.com/images/gallery3.jpg" class="highslide"
    onclick="return hs.expand(this, config1)">
    <img src="http://highslide.com/images/gallery3.thumb.jpg" alt="Caption text" />
    </a>

</div>

JavaScript

// Leave out HTML popups from slideshow

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.align = 'center';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';
hs.marginBottom = 105; // make room for the thumbstrip and the controls

// Leave out HTML popups from slideshow
hs.Expander.prototype.onInit = function () {
    if (this.contentType == 'html') {
        this.initSlideshow = function () {};
    }
};

// config object for the gallery
var config1 = {
    transitions: ['expand', 'crossfade'],
    numberPosition: 'caption',
    captionEval: 'this.thumb.alt'
};

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: false,
    useControls: true,
    overlayOptions: {
        className: 'text-controls',
        position: 'bottom center',
        relativeTo: 'viewport',
        offsetY: -60
    },
    thumbstrip: {
        position: 'bottom center',
        mode: 'horizontal',
        relativeTo: 'viewport'
    }
});