It is currently Fri Apr 25, 2014 8:42 am Advanced search

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

Frequently asked questions.

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

Postby torstein.honsi » Tue Oct 13, 2009 12:52 pm

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({
   [hilight]slideshowGroup: 'group1',[/hilight]


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({
   [hilight]slideshowGroup: [1, 2],[/hilight]
   interval: 5000,
   repeat: false,
   useControls: true,
   fixedControls: 'fit',
   overlayOptions: {
      opacity: .75,
      position: 'bottom center',
      hideOnMouseOut: true
   }
});
User avatar
torstein.honsi
Site Admin
 
Posts: 9182
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Return to Highslide FAQ

Who is online

Users browsing this forum: No registered users and 1 guest