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 href="http://roadrash.no/hs-support/images/flower03.jpg" class="highslide" onclick="return hs.expand(this, null, { alternativeImage: 'http://roadrash.no/hs-support/images/flower03-1.jpg' })">
	<img src="http://roadrash.no/hs-support/images/flower03.thumb.jpg" alt="Hit TAB to change the image" /></a>
</div>

JavaScript

// change image onKeyDown
// NOTE: Requiers highslide.full.js

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.wrapperClassName = 'borderless';
hs.align = 'center';
hs.captionEval = 'this.thumb.alt';

hs.onKeyDown = function (sender, e) {
    if (e.keyCode == 9) {
        var exp = hs.getExpander();
        exp.content.src = exp.custom.alternativeImage; // set the new path
    }
};

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
});