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 class="highslide-gallery">
    <a href="http://roadrash.no/hs-support/images/015.jpg" class="highslide" onclick="return hs.expand(this, config1)">
        <img src="http://roadrash.no/hs-support/images/015.thumb.jpg" alt="" />
    </a>
    <a href="http://roadrash.no/hs-support/images/016.jpg" class="highslide" onclick="return hs.expand(this, config1)">
        <img src="http://roadrash.no/hs-support/images/016.thumb.jpg" alt="" />
    </a>
    <a href="http://roadrash.no/hs-support/images/017.jpg" class="highslide" onclick="return hs.expand(this, config1)">
        <img src="http://roadrash.no/hs-support/images/017.thumb.jpg" alt="" />
    </a>
</div>

JavaScript

/*
   Temporarily fix when clicking onDoFullExpand when thumbstrip is position: ‘leftpanel’: 
   left is 0px - it should be the same as the width of the thumbstrip.
   Requires highslide-full.js and jQuery.
*/
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.align = 'center';

/*
   Temporarily fix when clicking onDoFullExpand when thumbstrip is position: ‘leftpanel’: 
   left is 0px - it should be the same as the width of the thumbstrip.
   Requires highslide-full.js and jQuery.
*/
var doFullExpand = hs.Expander.prototype.doFullExpand;
hs.Expander.prototype.doFullExpand = function (sender) {
    doFullExpand.apply(this, arguments);
    $('.highslide-wrapper .highslide-image').attr('style', function (i, s) {
        return s + 'left: 80px !important;';
    });
};

// Add the slideshow controller
hs.addSlideshow({
  //slideshowGroup: 'group1',
  interval: 5000,
  repeat: false,
  useControls: true,
  fixedControls: false,
  overlayOptions: {
    position: 'bottom center',
    opacity: .75,
    hideOnMouseOut: false
  },
  thumbstrip: {
    mode: 'vertical',
    position: 'leftpanel',
    width: '80px',
    relativeTo: 'expander'
  }
});

// gallery config object
var config1 = {
  slideshowGroup: 'group1',
  transitions: ['expand', 'crossfade'],
  useBox: true,
  width: 400,
  height: 300
};