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>
     <h1>Gallery</h1>
</div>
<div id="gallery-area">
    <div class="hidden-container"> <a id="thumb1" href="http://roadrash.no/hs-support/images/015.large.jpg" class="highslide" onclick="return hs.expand(this, inPageOptions)" title="Caption #1">
        <img src="http://roadrash.no/hs-support/images/015.smallthumb.jpg" alt="" />
    </a>
 <a href="http://roadrash.no/hs-support/images/016.large.jpg" class="highslide" onclick="return hs.expand(this, inPageOptions)" title="Caption #2">
        <img src="http://roadrash.no/hs-support/images/016.smallthumb.jpg" alt="Highslide JS" />
    </a>
 <a href="http://roadrash.no/hs-support/images/017.large.jpg" class="highslide" onclick="return hs.expand(this, inPageOptions)" title="Caption #3">
        <img src="http://roadrash.no/hs-support/images/017.smallthumb.jpg" alt="Highslide JS" />
    </a>
    </div>
</div>

CSS

#gallery-area {
    width: 820px;
    height: 715px;
    margin: 0 auto 10px;
    border: 1px solid black;
    background: #fff;
}
@media (max-width: 1000px) {
    #gallery-area {
        width: 720px;
        height: 640px;
    }
}
@media (max-width: 800px) {
    #gallery-area {
        width: 620px;
        height: 565px;
    }
}
.highslide-image {
    border: 1px solid black;
}
.highslide-controls {
    width: 65px !important;
}
.highslide-controls .highslide-close, .highslide-controls .highslide-full-expand {
    display: none;
}
.highslide-caption {
    padding: .5em 0;
}

body {
    background: #DCDCDC;
}
 h1 {
    font-size: 2em;
    text-align: center;
    padding: 10px;
}

JavaScript

// in-page gallery - different size based on width of the viewport

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.showCredits = false;
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];

hs.useBox = true;
hs.width = 800;
hs.height = 600;

var pageSize = hs.getPageSize();
if (pageSize.width < 1000) {
    hs.width = 700;
    hs.height = 525;
}
if (pageSize.width < 800) {
    hs.width = 600;
    hs.height = 450;
}

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

// Options for the in-page items
var inPageOptions = {
    //slideshowGroup: 'group1',
    outlineType: null,
    allowSizeReduction: true,
    wrapperClassName: 'in-page controls-in-heading',
    targetX: 'gallery-area 10px',
    targetY: 'gallery-area 10px',
    captionEval: 'this.a.title',
    numberPosition: 'caption'
};

// Open the first thumb on page load
hs.addEventListener(window, 'load', function () {
    document.getElementById('thumb1').onclick();
});

// 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;
};

// Keep the position after window resize
hs.addEventListener(window, 'resize', function () {
    var i, exp;
    hs.page = hs.getPageSize();

    for (i = 0; i < hs.expanders.length; i++) {
        exp =...