Hi John,
This part
must be added only once, and you should add in the head section of your page ÔÇô not in the body section:
Code: Select all
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->
Next step is to open your highslide.config.js file. Find this part of the code and remove the highlighted line:
Code: Select all
// Add the slideshow controller
hs.addSlideshow({
[hilight]slideshowGroup: 'group1',[/hilight]
interval: 3500,
repeat: true,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: '0.75',
position: 'bottom center',
offsetX: '0',
offsetY: '-10',
hideOnMouseOut: true
},
thumbstrip: {
mode: 'horizontal',
position: 'below',
relativeTo: 'image'
}
});
Then add this to the bottom of highslide.config.js:
Code: Select all
var config2 = {
slideshowGroup: 'group2',
autoplay: true,
transitions: ['expand', 'crossfade']
};
This is the configuration object for the second gallery.
You also need to do some changes in the HTML markup for your second gallery.
The onclick code for the images in the
second gallery looks like this:
Code: Select all
onclick="return hs.expand(this, config1 )"
Change all of them to look like this:
Code: Select all
onclick="return hs.expand(this, config2 )"