Highslide JS

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 class='highslide' id="thumb1" href='http://highslide.com/images/thumbstrip11.jpg' title="Two cabins" 
    onclick="return hs.expand(this, miniGalleryOptions1)">
        <img src='http://highslide.com/images/thumbstrip11.thumb.png' alt=''/>
    </a>
    <a class='highslide' href='http://highslide.com/images/thumbstrip12.jpg' title="Patterns in the snow" 
    onclick="return hs.expand(this, miniGalleryOptions1)">
        <img src='http://highslide.com/images/thumbstrip12.thumb.png' alt=''/>
    </a>
    <a class='highslide' href='http://highslide.com/images/thumbstrip13.jpg' title="Cabins" 
    onclick="return hs.expand(this, miniGalleryOptions1)">
        <img src='http://highslide.com/images/thumbstrip13.thumb.png' alt=''/>
    </a>
    <a class='highslide' href='http://highslide.com/images/thumbstrip14.jpg' title="Old stone cabins" 
    onclick="return hs.expand(this, miniGalleryOptions1)">
        <img src='http://highslide.com/images/thumbstrip14.thumb.png' alt=''/>
    </a>
    
    <div class="hidden-container">
        <a class='highslide' href='http://highslide.com/images/thumbstrip15.jpg' title="A litte open water" 
        onclick="return hs.expand(this, miniGalleryOptions1)">
            <img src='http://highslide.com/images/thumbstrip15.thumb.png' alt=''/>
        </a>
        <a class='highslide' href='http://highslide.com/images/thumbstrip16.jpg' title="Dipper"
        onclick="return hs.expand(this, miniGalleryOptions1)">
            <img src='http://highslide.com/images/thumbstrip16.thumb.png' alt=''/>
        </a>
        <a class='highslide' href='http://highslide.com/images/thumbstrip17.jpg' title="Dipper"
        onclick="return hs.expand(this, miniGalleryOptions1)">
            <img src='http://highslide.com/images/thumbstrip17.thumb.png' alt=''/>
       ...

JavaScript

// Four visible thumbnails - put the markup for the four thumbnails outside the hidden-container div

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.outlineType = 'glossy-dark';
hs.wrapperClassName = 'dark';
hs.captionEval = 'this.a.title';
hs.numberPosition = 'caption';
hs.useBox = true;
hs.width = 600;
hs.height = 400;
//hs.dimmingOpacity = 0.8;

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		position: 'bottom center',
		opacity: 0.75,
		hideOnMouseOut: true
	},
	thumbstrip: {
		position: 'above',
		mode: 'horizontal',
		relativeTo: 'expander'
	}
});

// Make all images animate to the one visible thumbnail
var miniGalleryOptions1 = {
	thumbnailId: 'thumb1'
}