It is currently Tue Sep 02, 2014 8:47 am Advanced search

2 or more galleries on a single page

Help for using the Highslide Editor, the visual way of setting up Highslide.

2 or more galleries on a single page

Postby johnduckworth » Thu Feb 17, 2011 8:36 pm

I am trying to get 2 galleries to load on a single page. The problem is that the pictures flow from one gallery into the next. Can I solve this?

I am testing this on a page here:

http://www.duckworthhouse.com/2Gal/test2.htm

I have asked the question before in a little more detail!

viewtopic.php?f=7&t=8492#p39629

Any help would be gratefully received!

Many thanks

John
johnduckworth
 
Posts: 8
Joined: Wed Nov 24, 2010 9:47 pm

Re: 2 or more galleries on a single page

Postby RoadRash » Fri Feb 18, 2011 5:24 am

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 )"
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8210
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: 2 or more galleries on a single page

Postby johnduckworth » Mon Feb 21, 2011 4:19 pm

Thank you....Thank you .....Thank you!

Stunning and it works REALLY well!

John
johnduckworth
 
Posts: 8
Joined: Wed Nov 24, 2010 9:47 pm


Return to Highslide Editor

Who is online

Users browsing this forum: No registered users and 1 guest