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">
    <a href="http://highslide.com/images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
        <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)">
        <img src="http://highslide.com/images/gallery2.thumb.jpg" alt="Caption Text" />
    </a>
    <!-- add last-image to the class -->
    <a href="http://highslide.com/images/gallery3.jpg" class="highslide last-image" onclick="return hs.expand(this)">
        <img src="http://highslide.com/images/gallery3.thumb.jpg" alt="Caption Text" />
    </a>
</div>

JavaScript

// running a function before the slideshow open and after the slideshow close 
// requires highslide-full.js

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

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

hs.Expander.prototype.onBeforeExpand = function () {
    if (!hs.upcoming) {
        var randomColorChange = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
        $('body').css('background-color', randomColorChange);
        alert('New background color set');
    }
};

hs.Expander.prototype.onAfterClose = function () {
    if (this.isClosing) {
        var randomColorChange = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
        $('body').css('background-color', randomColorChange);
        alert('New background color set');
    }
};