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">
<!--  in-page gallery -->
<div id="gallery-area" style="width: 370px; height: 447px; margin: 0 auto; border: 1px solid silver">
    <div class="hidden-container">
        <a id="thumb1" class='highslide' href='http://highslide.com/images/thumbstrip11.jpg' onclick="return hs.expand(this, inPageOptions, {id: 'top1'})" title="Two cabins">
            <img src='http://highslide.com/images/thumbstrip11.thumb.png' alt=''/>
        </a>
        <a id="thumb2" class='highslide' href='http://highslide.com/images/thumbstrip12.jpg' onclick="return hs.expand(this, inPageOptions, {id: 'top2'})" title="Patterns in the snow">
            <img src='http://highslide.com/images/thumbstrip12.thumb.png' alt=''/>
        </a> 	
        <a id="thumb3" class='highslide' href='http://highslide.com/images/thumbstrip13.jpg' onclick="return hs.expand(this, inPageOptions, {id: 'top3'})" title="Cabins">
            <img src='http://highslide.com/images/thumbstrip13.thumb.png' alt=''/>
        </a>
        <a id="thumb4" class='highslide' href='http://highslide.com/images/thumbstrip14.jpg' onclick="return hs.expand(this, inPageOptions, {id: 'top4'})" title="Old stone cabins">
            <img src='http://highslide.com/images/thumbstrip14.thumb.png' alt=''/>
        </a>
        <a id="thumb5" class='highslide' href='http://highslide.com/images/thumbstrip15.jpg' onclick="return hs.expand(this, inPageOptions, {id: 'top5'})" title="A litte open water">
            <img src='http://highslide.com/images/thumbstrip15.thumb.png' alt=''/>
        </a> 
    </div>
</div>

<!-- drop-down list -->
<div style="width: 350px; margin: 0 auto;">
    <form method="post" action="navigation">
        <p>
            <select id="lstOptions2" name="dropdown">
                <option value="1" selected="selected">image #1</option>
                <option...

CSS

.in-page .highslide-image {
    border: none;
    cursor: url(http://highslide.com/highslide/graphics/zoomin.cur), pointer !important;
}
.top-gallery .highslide-image {
    border: none;
    cursor: url(http://highslide.com/highslide/graphics/zoomout.cur), pointer !important;
}
.in-page .highslide-caption {
    padding: .5em 0;
}
.highslide-wrapper {
    background: none;
}
.in-page a.highslide-full-expand {
    display: none !important;
}

/* for this demo only */
body {
    margin: 50px;
}

JavaScript

// test koble sammen in-page og top-gallery

// for the drop-down list
$(function () {
    $('#lstOptions2').bind('change', function () {
        ChangeImage();
    });
});

function ChangeImage() {
    var theValue = $('#lstOptions2').val();
    var node = 'thumb' + theValue;
    $('#thumb' + theValue).trigger('click');
    hs.close(); // Important! Close the the in-page gallery
}

hs.Expander.prototype.onBeforeClose = function (sender) {
    if (/top-gallery/.test(this.wrapper.className)) {

        var topGalleryID = this.custom.topID;
        var inPageID = $('#gallery-area a').attr('id');
        
        hs.close(inPageID);
        //alert('topGalleryID='+ topGalleryID +' + inPageID='+ inPageID);
        
        $('#thumb' + topGalleryID).trigger('click');
    }
};

// Highslide settings
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
hs.expandDuration = 0;
hs.restoreDuration = 0;
hs.marginTop = 50;
hs.marginRight = 50;
hs.marginBottom = 50;
hs.marginLeft = 50;
hs.zIndexCounter = 20000;
hs.showCredits = false;
 
// Add the slideshow providing the controlbar and the thumbstrip for the in-page gallery
hs.addSlideshow({
	slideshowGroup: 'inPage',
	interval: 5000,
	repeat: true,
	useControls: false,
	thumbstrip: {
		position: 'bottom center',
		mode: 'horizontal',
        width: '350px',
		relativeTo: 'expander',
        offsetY: 90
	}
});
 
// Options for the in-page gallery
var inPageOptions = {
	slideshowGroup: 'inPage',
	outlineType: null,
	allowSizeReduction: true,
	wrapperClassName: 'in-page',
	useBox: true,
	width: 350,
	height: 350,
	targetX: 'gallery-area 10px',
	targetY: 'gallery-area 10px',
	captionEval: 'this.a.title'
};
 
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
	document.getElementById('thumb1').onclick();
});
 
// Prevent to close the gallery from ESC key
hs.onKeyDown =...