1) Add different slideshowGroup options inline to the thumbnails of your gallery. This makes sure that when you arrow through the first gallery, it will close at the last image instead of jumping to the first image in the next gallery.
Thumbnails of the first gallery:
Code: Select all
onclick="return hs.expand(this, { slideshowGroup: 1 } )"
Code: Select all
onclick="return hs.expand(this, { slideshowGroup: 2 } )"
Code: Select all
// gallery config objects
var config1 = {
slideshowGroup: 'group1',
thumbnailId: 'thumb1',
transitions: ['expand', 'crossfade']
};
var config2 = {
slideshowGroup: 'group2',
thumbnailId: 'thumb2',
transitions: ['expand', 'crossfade']
};
Code: Select all
onclick="return hs.expand(this, config1 )"
Code: Select all
onclick="return hs.expand(this, config2 )"
Code: Select all
hs.addSlideshow({
[hilight]slideshowGroup: 'group1',[/hilight]
For the second gallery, change the thumbnail's id:
Code: Select all
<a id="thumb2" ...
Code: Select all
onclick="return hs.expand(this, { thumbnailId: 'thumb2', slideshowGroup: 2 })"
3) If you have popups on your page that are not part of a gallery, for example HTML popups, you need to update the hs.addSlideshow call with your new slideshowGroups from #1.
Code: Select all
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
[hilight]slideshowGroup: [1, 2],[/hilight]
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});