JSFiddle - React, Tailwind, and code Playground

by roadrash

HTML

<script src="http://roadrash.no/hs-support/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://roadrash.no/hs-support/highslide/highslide.css">
<div id="gallery-area" style="width: 620px; height: 570px; margin: 0 auto; border: 1px solid silver">
    <div class="hidden-container">
        <a id="thumb1" class='highslide' href='http://roadrash.no/hs-support/images/015.jpg'
			onclick="return hs.expand(this, inPageOptions)" title="Tree" name="Second line - 1">
		<img src='http://roadrash.no/hs-support/images/015.smallthumb.jpg' alt='Tree'/>
        </a>
        <a class='highslide' href='http://roadrash.no/hs-support/images/016.jpg'
			onclick="return hs.expand(this, inPageOptions)" title="Autumn leaves" name="Second line - 2">
		<img src='http://roadrash.no/hs-support/images/016.smallthumb.jpg' alt='Autumn leaves'/>
        </a>
        <a class='highslide' href='http://roadrash.no/hs-support/images/017.jpg'
			onclick="return hs.expand(this, inPageOptions)" title="Dessert scenery" name="Second line - 3">
		<img src='http://roadrash.no/hs-support/images/017.smallthumb.jpg' alt='Dessert scenery'/>
        </a>
    </div>
</div>

<div style="background: silver; padding: 5px; margin: 10px; text-align: center;">
    <a class='highslide' href='http://roadrash.no/hs-support/images/full-image.jpg' onclick="return hs.expand(this)" title="Caption">
        Single image
    </a>
</div>

CSS

body {background: black;}

.highslide-wrapper {
    background: none; 
}
.in-page .closebutton {
    display: none;
}
.highslide-image {
    border: none;
}
/*.highslide-controls {
	width: 90px !important;
}*/
.controls-in-heading .highslide-controls {
    width: 90px !important;
	background: none;
}
.controls-in-heading .highslide-controls ul {
	background: none;
}
.controls-in-heading .highslide-controls a {
	background-image: url(http://roadrash.no/hs-support/highslide/graphics/controlbar-black-small.gif);
}
.highslide-controls .highslide-close {
	display: none;
}
.in-page .highslide-caption {
	padding: .5em 0;
    color: silver;
}

JavaScript

// in-page gallery with small delayed loading + single image

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
hs.align = 'center';
hs.captionEval = 'this.a.title';
hs.dimmingOpacity = 0.6;
hs.wrapperClassName = 'borderless';

//close button 
    hs.registerOverlay({
    html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
    position: 'top right',
    fade: 2
});

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
	slideshowGroup: 'group1',
	interval: 4000,
	repeat: true,
	useControls: true,
	overlayOptions: {
		position: 'bottom right',
		hideOnMouseOut: true,
		offsetY: 50
	},
	thumbstrip: {
		position: 'above',
		mode: 'horizontal',
		relativeTo: 'expander'
	}
});

// Options for the in-page items
var inPageOptions = {
	slideshowGroup: 'group1',
	outlineType: null,
	dimmingOpacity: 0,
	allowSizeReduction: false,
	wrapperClassName: 'in-page controls-in-heading',
	thumbnailId: 'gallery-area',
	useBox: true,
	width: 600,
	height: 400,
	targetX: 'gallery-area 10px',
	targetY: 'gallery-area 10px'
};

// Insert text from the anchors name attribute in the second line of the caption
hs.Expander.prototype.onAfterGetCaption = function (sender) {
    if (sender.caption && /in-page/.test(this.wrapper.className)) {
        sender.caption.innerHTML += '<br />' + this.a.name;
    }
};

// Open the first thumb on page load with a small delay
setTimeout(function () {
    try {
        document.getElementById('thumb1').onclick();
    } catch (e) {}
}, 1000);

// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
	if (/in-page/.test(this.wrapper.className))	return hs.next();
};
 
// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
	if...