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

2 or more galleries on a single page

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!

http://highslide.com/forum/viewtopic.ph ... 492#p39629

Any help would be gratefully received!

Many thanks

John
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: 2 or more galleries on a single page

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
johnduckworth
Posts: 8
Joined: Wed Nov 24, 2010 7:47 pm

Re: 2 or more galleries on a single page

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

Stunning and it works REALLY well!

John

Return to “Highslide Editor”