JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<script src="http://highslide.com/highslide/highslide-full.js"></script>
<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="Highslide JS"
        title="Click to enlarge" />
</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="Highslide JS"
        title="Click to enlarge" /></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="Highslide JS"
        title="Click to enlarge" /></a>

</div>

CSS

/* Spread controls mod: absolutely positioned buttons */
.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: -33px;
}
.highslide-controls .highslide-next {
    right: -33px;
}
.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

// Spread controls mod - buttons placed 100px from the top using offsetY

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'drop-shadow';
hs.wrapperClassName = 'borderless';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.75;

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

// Spread controls mod
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';
    }
};

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