Highslide JS - RoadRash

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 red-border"> <a href="http://highslide.com/images/gallery1.jpg" class="highslide" onclick="return hs.expand(this, config1)">
        <img src="http://highslide.com/images/gallery1.thumb.jpg" alt="Caption 1"
        title="Click to enlarge" />
    </a>
 <a href="http://highslide.com/images/gallery2.jpg" class="highslide" onclick="return hs.expand(this, config1)">
        <img src="http://highslide.com/images/gallery2.thumb.jpg" alt="Caption 2"
        title="Click to enlarge" />
    </a>
 <a href="http://highslide.com/images/gallery3.jpg" class="highslide" onclick="return hs.expand(this, config1)">
        <img src="http://highslide.com/images/gallery3.thumb.jpg" alt="Caption 3"
        title="Click to enlarge" />
    </a>

</div>
<div class="highslide-gallery blue-border"> <a href="http://highslide.com/images/gallery1.jpg" class="highslide" onclick="return hs.expand(this, config2)">
        <img src="http://highslide.com/images/gallery1.thumb.jpg" alt="Caption 1"
        title="Click to enlarge" />
    </a>
 <a href="http://highslide.com/images/gallery2.jpg" class="highslide" onclick="return hs.expand(this, config2)">
        <img src="http://highslide.com/images/gallery2.thumb.jpg" alt="Caption 2"
        title="Click to enlarge" />
    </a>
 <a href="http://highslide.com/images/gallery3.jpg" class="highslide" onclick="return hs.expand(this, config2)">
        <img src="http://highslide.com/images/gallery3.thumb.jpg" alt="Caption 3"
        title="Click to enlarge" />
    </a>

</div>

CSS

.red-border .highslide img {
    border: 2px solid red;
}
.red-border .highslide:hover img {
    border-color: blue;
}
.red-border .highslide-active-anchor img {
	border-color: yellow;
}
.blue-border .highslide img {
    border: 2px solid blue;
}
.blue-border .highslide:hover img {
    border-color: red;
}
.blue-border .highslide-active-anchor img {
	border-color: orange;
}

JavaScript

// Different thumbnail borders for each gallery
// Add an additional CSS class to each highslide-gallery div
// and use this class name to style the thumbnails

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;

// Add the controlbar
hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: false,
    useControls: true,
    fixedControls: false,
    overlayOptions: {
        opacity: 0.75,
        position: 'bottom center',
        hideOnMouseOut: false
    }
});

var config1 = {
    slideshowGroup: 'group1',
    captionEval: 'this.thumb.alt'
};
var config2 = {
    slideshowGroup: 'group2',
    captionEval: 'this.thumb.alt'
};