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>
    <a id="autoload" onclick="return hs.expand(this)" href="http://placehold.it/3000.jpg/9932CC/D8BFD8vV/&text=Highslide+JS">
    <img src="http://placehold.it/3000.jpg/9932CC/D8BFD8vV/&text=Highslide+JS" alt="" style="width: 200px" />
    </a>
</div>

JavaScript

// open an existing (image) anchor after page load

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.align = 'center';
hs.outlineType = 'rounded-white';
hs.dimmingOpacity = 0.75;

hs.addEventListener(window, "load", function() {
   // click the element virtually:
   document.getElementById("autoload").onclick();
});

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