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">
		<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">
		<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">
		<img src='http://roadrash.no/hs-support/images/017.smallthumb.jpg' alt='Dessert scenery'/>
        </a>
    </div>
</div>

<div style="text-align: center; margin: 30px;">
        <a href="http://highslide.com/images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)" title="Caption first image">
        <img src="http://highslide.com/images/gallery1.thumb.jpg" alt="" />
    </a>
    
    <a href="http://highslide.com/images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)" title="Caption second image">
    <img src="http://highslide.com/images/gallery2.thumb.jpg" alt="" />
    </a>
    
    <a href="http://highslide.com/images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)" title="Caption third image">
        <img src="http://highslide.com/images/gallery3.thumb.jpg" alt="" />
    </a>
</div>

CSS

.in-page .closebutton {
    display: none;
}
.in-page .highslide-image {
	border: 1px solid black;
}
.controls-in-heading .highslide-controls {
    width: 60px;
	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, .highslide-controls .highslide-full-expand {
	display: none;
}
.in-page .highslide-caption {
	padding: .5em 0;
}

JavaScript

// in-page gallery + plain image popups without controlbar

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 for the in-page gallery
hs.addSlideshow({
	slideshowGroup: 'group1',
	interval: 4000,
	repeat: true,
	useControls: true,
	overlayOptions: {
		position: 'bottom right',
		offsetX: -7,
        offsetY: 23
	},
	thumbstrip: {
		position: 'above',
		mode: 'horizontal',
		relativeTo: 'expander'
	}
});

// Options for the in-page gallery
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',
    numberPosition: 'caption',
    autoplay: true
};

// 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 (/in-page/.test(this.wrapper.className))	return false;
};
// ... nor dragged
hs.Expander.prototype.onDrag = function() {
	if (/in-page/.test(this.wrapper.className))	return false;
};

// in-page focus mod - prevent in-page gallery to focus above...