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://highslide.com/images/gallery1.jpg" class="highslide" onclick="return hs.expand(this, configImage1)" title="Caption">
        <img src="http://highslide.com/images/gallery1.thumb.jpg" alt="Heading" />
    </a>
    <a href="http://highslide.com/images/gallery2.jpg" class="highslide" onclick="return hs.expand(this, configImage1)" title="Caption">
        <img src="http://highslide.com/images/gallery2.thumb.jpg" alt="Heading" />
    </a>
    <a href="http://highslide.com/images/gallery3.jpg" class="highslide" onclick="return hs.expand(this, configImage1)" title="Caption">
        <img src="http://highslide.com/images/gallery3.thumb.jpg" alt="Heading" />
    </a>
</div>

<div> 
    <a href="https://www.youtube.com/v/XiMnqPUTvWo&hl=nb_NO&fs=1&" class="highslide" onclick="return hs.htmlExpand(this, configVideo1)" title="Caption">
        <img src="http://img.youtube.com/vi/XiMnqPUTvWo/2.jpg" alt="Heading" />
    </a>
</div>

CSS

.titlebar .highslide-header .highslide-close {
    display: none;
}
.highslide-footer {
    display: none;
}

JavaScript

// Leave out HTML popups from slideshow

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.showCredits = false;
hs.outlineType = 'rounded-white';
hs.dimmingOpacity = 0.8;
hs.fadeInOut = true;
hs.align = 'center';
hs.allowSizeReduction = true;
hs.captionEval = 'this.a.title';
hs.headingEval = 'this.thumb.alt';

hs.registerOverlay({
    html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
    position: 'top right',
    useOnHtml: true,
    fade: 2 // fading the semi-transparent overlay looks bad in IE
});

// Add the slideshow controller
hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: false,
    useControls: true,
    fixedControls: false,
    allowSizeReduction: true,
    overlayOptions: {
        opacity: 0.75,
        position: 'bottom center',
        offsetX: 0,
        offsetY: -10,
        hideOnMouseOut: true
    }
});

// Leave out HTML popups from slideshow
hs.Expander.prototype.onInit = function () {
    if (this.contentType == 'html') {
        this.initSlideshow = function () {};
    }
};

// gallery config object
var configImage1 = {
    slideshowGroup: 'group1',
    numberPosition: 'caption',
    transitions: ['expand', 'crossfade']
};

// video popup config
var configVideo1 = {
    objectType: 'iframe',
    width: 640,
    height: 480,
    allowSizeReduction: false,
    wrapperClassName: 'titlebar',
    preserveContent: false,
    objectLoadTime: 'after',
    transitions: ['expand', 'crossfade']
};