How do I put more than one gallery in the same page?

[torstein.honsi]

The key to separating two or more galleries in the same page is using a different slideshowGroup. In addition to that, there are a couple of minor things to check depending on how your galleries are set up. A live example can be seen at http://www.highslide.com/examples/mini-galleries.html. This example uses the same setup as http://www.highslide.com/examples/mini-gallery.html, except with two galleries. Here's how you do it:

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 } )"

Thumbnails of the second gallery:

Code: Select all

onclick="return hs.expand(this, { slideshowGroup: 2 } )"

If you created your gallery in the Editor, the config object will be defined in your highslide.config.js file. In that case, you need to create another config object for the second gallery in addition to the already existing config1:

Code: Select all

// gallery config objects
var config1 = {
   slideshowGroup: 'group1',
   thumbnailId: 'thumb1',
   transitions: ['expand', 'crossfade']
};
var config2 = {
   slideshowGroup: 'group2',
   thumbnailId: 'thumb2',
   transitions: ['expand', 'crossfade']
};

And call it like this:

Code: Select all

onclick="return hs.expand(this, config1 )"

Code: Select all

onclick="return hs.expand(this, config2 )"

Find the part of the code in your highslide.config.js file that starts like this and remove the highlighted line:

Code: Select all

hs.addSlideshow({
   slideshowGroup: 'group1',

2) If your gallery is set up with the subsequent thumbnails hidden, you want to update the reference to thumbnailId so that the subsequent images animate back to the right thumbnail.

For the second gallery, change the thumbnail's id:

Code: Select all

<a id="thumb2" ...

And change the references in all the hidden thumbnails:

Code: Select all

onclick="return hs.expand(this, { thumbnailId: 'thumb2', slideshowGroup: 2 })"

If you created your gallery using the Editor, see the config objects in #1.

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({
   slideshowGroup: [1, 2],
   interval: 5000,
   repeat: false,
   useControls: true,
   fixedControls: 'fit',
   overlayOptions: {
      opacity: .75,
      position: 'bottom center',
      hideOnMouseOut: true
   }
});