JSFiddle - React, Tailwind, and code Playground

by roadrash

HTML

<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<script src="https://dl.dropboxusercontent.com/u/1081184/hstest/highslide-full-onmouseover-thumbs-line3221.js"></script>
<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="http://highslide.com/" />
    </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="http://forum.highcharts.com/highslide-js-the-javascript-image-and-media-viewer/" />
    </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="http://highslide.com/ref/" />
    </a>
    </div>
</div>

CSS

#gallery-area {
    width: 620px;
    height: 568px;
    margin: 0 auto 10px;
    border: 1px solid black;
    background: #fff;
}

.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

// Change image onmouseover on thumbstrip images - open url onclick
// IMPORTANT! Change the word onclick in line 3221 in highslide-full.js to the word onmouseover
// Add the url for the onclick in the alt attributes for the img tags in the HTML code

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.showCredits = false;
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';

// open url onclick on the images in the thumbstrip
hs.Expander.prototype.onAfterExpand = function () {
    $('.highslide-thumbstrip-inner img').each(function () {
        this.parentNode.title = $(this).attr('alt');
    });
    $('.highslide-thumbstrip-inner a').each(function () {
        var newHref = this.title;
        $(this)
            .attr('onclick', 'clickUrl(this)')
            .attr('target', '_blank')
            .attr('data-click-href', newHref);
    });
    clickUrl = function (e) {
        e.href = $(e).data('click-href');
    };
};

// 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,
    useBox: true,
    width: 600,
    height: 450,
    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...