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 class="highslide-gallery" id="gallery1">
    <a href="http://highslide.com/images/gallery1.jpg" class="highslide" onclick="return hs.expand(this, hs.extend(galleryOptions, {slideshowGroup: this.parentNode.id}))">
        <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, hs.extend(galleryOptions, {slideshowGroup: this.parentNode.id}))">
        <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, hs.extend(galleryOptions, {slideshowGroup: this.parentNode.id}))">
        <img src="http://highslide.com/images/gallery3.thumb.jpg" alt="Highslide JS" />
    </a>
</div>

<div class="highslide-gallery"  id="gallery2">
    <a href="http://highslide.com/images/gallery1.jpg" class="highslide" onclick="return hs.expand(this, hs.extend(galleryOptions, {slideshowGroup: this.parentNode.id}))">
        <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, hs.extend(galleryOptions, {slideshowGroup: this.parentNode.id}))">
        <img src="http://highslide.com/images/gallery2.thumb.jpg" alt="Highslide JS" />
    </a>
    <a href="http://highslide.com/images/gallery3.jpg" class="highslide" onclick="return hs.expand(this, hs.extend(galleryOptions, {slideshowGroup: this.parentNode.id}))">
        <img src="http://highslide.com/images/gallery3.thumb.jpg" alt="Caption text" />
    </a>
</div>

JavaScript

// slideshowGroup based on parent divs id

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;

// Add the controlbar
hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: false,
    useControls: true,
    fixedControls: false,
    overlayOptions: {
        opacity: 0.75,
        position: 'bottom center',
        hideOnMouseOut: true
    }
});

var galleryOptions = {
    captionEval: 'this.thumb.alt',
    numberPosition: 'caption'
};