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/gallery-1.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>

CSS

.highslide-loading {
  display: block;
  position:fixed;
  /*top:0 !important;
  left:0 !important;*/
    top:50%;
  left:50%;
  height:32px;
  width:32px;
  padding: 24px;
  margin:0;
  text-indent:-9999em;
  background: red url(http://roadrash.no/hs-support/highslide/graphics/loader.big.white.gif) 50% 50% no-repeat;
  -webkit-box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.75);
  box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

JavaScript

// test center loading lable
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;

/*hs.Expander.prototype.onShowLoading = function (sender) {
    var width = $(document).width(); 
    var height = $(document).height();
    sender.loading.style.width = width + 'px';
    sender.loading.style.height = width + 'px';
    alert(width + ' + ' + height);
};
*/
// Add the controlbar
hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: false,
    useControls: true,
    fixedControls: 'fit',
    overlayOptions: {
        opacity: 0.75,
        position: 'bottom center',
        hideOnMouseOut: true
    }
});