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 style="width: 600px; margin: 0 auto;"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel tortor in erat eleifend porttitor. Sed eget purus at nunc luctus ultrices in eget neque. In hac habitasse platea dictumst. Nulla non sagittis tellus, nec sodales nibh. Fusce tincidunt non elit vel rutrum? Morbi tristique nibh in posuere ullamcorper. Maecenas dui mi, pellentesque vitae lacus luctus, viverra commodo neque! In convallis sed nulla in viverra. Curabitur at dui quis leo tristique imperdiet vel et nisi. Sed luctus neque ut mauris porta malesuada. Sed feugiat, risus vitae tincidunt commodo, orci nisi tempus lacus, eget facilisis ligula orci dictum tellus.
</p>

<p>
Vivamus at venenatis metus. Vestibulum faucibus mi sapien, eu condimentum lorem blandit id. Nunc accumsan imperdiet mattis. Nunc nec interdum dolor, sit amet porta est. Pellentesque nec nunc hendrerit; feugiat nisi id; ullamcorper nulla. Suspendisse cursus, velit nec bibendum sollicitudin, est augue blandit justo, vitae placerat erat est ut leo. Integer sagittis mauris ut nisl pharetra vehicula eu a ipsum. Vestibulum velit sem; posuere eget nunc ut, dictum aliquet neque. Vestibulum eget tellus tempor, tempus lacus eu, aliquam mauris. Phasellus gravida tellus vel luctus sagittis? Integer ut tincidunt sapien. Mauris ultricies rhoncus eros ut accumsan. Aliquam eleifend venenatis ipsum vitae convallis. Nunc ullamcorper ipsum ut odio scelerisque condimentum.
</p>
</div>
<!--
    4)    Div where the gallery appears
--> 
 
<div id="gallery-area" style="width: 620px; height: 520px; margin: 0 auto; border: 1px solid silver"> 
 
<!--
    5)    Put all the thumbnails inside a hidden div where Highslide can index them to
        create the slideshow.
--> 
 
<div class="hidden-container"> 
<!--
    6) This is how you mark up the thumbnail images...

CSS

.highslide-image {
        border: 1px solid black;
    }
    .highslide-controls {
        width: 90px !important;
    }
    .highslide-controls .highslide-close {
        display: none;
    }
    .highslide-caption {
        padding: .5em 0;
    }

JavaScript

/* in-page gallery - go to url when clicking the image using the custom variable (http://highslide.com/ref/hs.Expander.prototype.custom) and the onImageClick event (http://highslide.com/ref/hs.Expander.prototype.onImageClick) */

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click image to go to link';
hs.expandDuration = 0;

// 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',
    autoplay: true,
    outlineType: null,
    allowSizeReduction: true,
    wrapperClassName: 'in-page controls-in-heading',
    thumbnailId: 'gallery-area',
    useBox: true,
    width: 600,
    height: 400,
    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();
});

// go to url when clicking the image
hs.Expander.prototype.onImageClick = function() {
    if (this.custom) {
        window.open(this.custom.url);
    }
    return false;
};

// 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,...