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>
    <a href="http://highslide.com/images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="http://highslide.com/images/gallery3.thumb.jpg" alt="Caption text" />
    </a>
</div>

CSS

/* Spread controls mod: absolutely positioned buttons */
.highslide-caption {
    margin-left: 35px;
    margin-right: 35px;
}
 .highslide-controls {
    position: absolute;
    width: 100%;
    height: 0;
    margin: 0;
}
.highslide-controls ul {
    position: absolute;
    width: 100%;
    height: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    left: 0;
    background: none;
}
.highslide-controls li {
    position: absolute;
    padding: 0;
}
.highslide-controls .highslide-close {
    display: none;
}
.highslide-controls .highslide-previous {
    left: 0;
}
.highslide-controls .highslide-next {
    right: 0;
}
.highslide-controls .highslide-move {
    display: none;
}
.highslide-controls .highslide-full-expand {
    display: none;
}
.highslide-controls .highslide-play {
    display: none;
}
.highslide-controls .highslide-pause {
    display: none;
}

JavaScript

// Custom controls in the caption

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;
hs.captionEval = 'this.thumb.alt';
hs.restoreTitle = 'Click for next image, click and drag to move. Use arrow keys for next and previous image.';

// add the close button
hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});

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

// go to next image when clicking the image
hs.Expander.prototype.onImageClick = function (sender) {
   return hs.next();
};

// Spread controls mod: reposition the lower buttons
hs.Expander.prototype.onAfterExpand = function () {
    if (this.slideshow && this.slideshow.btn) {
        var btn = this.slideshow.btn;
        btn.previous.style.middle = (this.y.size - btn.previous.offsetHeight) + 'px';
        btn.next.style.middle = (this.y.size - btn.next.offsetHeight) + 'px';
    }
};