The solution is to specify a different slideshowGroup option for the gallery popups.
1) Uncomment the slideshowGroup line in hs.addSlideshow so that the slideshowGroup is effectively set to 'group1':
- Code: Select all
// Add the controlbar
hs.addSlideshow({
slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
If you have more than one gallery in your page, you need to specify the slideshowGroups for all the galleries:
- Code: Select all
// Add the controlbar
hs.addSlideshow({
slideshowGroup: ['group1', 'group2'],
...
2) Update the onclicks of your gallery thumbnails:
- Code: Select all
<a href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'group1' })">
<img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" />
</a>