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">
<!--
    3) Put the thumbnails inside a div for styling
-->

<div class="highslide-gallery">
<!--
    4) This is how you mark up the thumbnail image with an anchor tag around it.
    The anchor's href attribute defines the URL of the full-size image.
-->
    <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>

<!--
    5 (optional). This is how you mark up the caption. The correct class name is important.
-->

<div class="highslide-caption">
    Caption for the first image. This caption can be styled using CSS.
</div>


<!-- Repetionion of the above -->
<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>

<div class="highslide-caption">
    Caption for the second image.
</div>

<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 class="highslide-caption">
    Caption for the third image.
</div>

</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem dolor, fringilla sit amet leo at, ullamcorper suscipit ante. Nam pellentesque lobortis quam; sed ultricies erat faucibus a. Mauris eu orci venenatis, semper urna non, condimentum sem! Nunc enim dolor, vestibulum sed augue in, dapibus viverra lacus. Proin vulputate commodo diam ac pharetra. Donec a viverra lorem, vel mollis nisl. Vestibulum sollicitudin facilisis ligula, vel volutpat odio ullamcorper a. Ut bibendum placerat nulla eget...

JavaScript

// remove the page scrollbar while tha gallery is open
// requires highslide-full.js and jQuery

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

// remove the page scrollbar while tha gallery is open
hs.Expander.prototype.onBeforeExpand = function (sender) {
    $('body').css('overflow','hidden');
};
hs.Expander.prototype.onBeforeClose = function (sender) {
    $('body').css('overflow','auto');
};

// Add the controlbar
hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: false,
    useControls: true,
    fixedControls: false,
    overlayOptions: {
        opacity: 0.75,
        position: 'bottom center',
        hideOnMouseOut: true
    }
});