Can I make multiple galleries with editor?

[Lady SleepsAlot]

I would like to have several thumbnail galleries on one page.
Can the editor be used to have two or three thumbnail galleries on one page?
I found out after much try and fail how to write the code myself, but it would really make things easier for me if this was possible with the editor.
Sorry for my very bad English, hope you understand what I'm trying to ask here.

[RoadRash]

No, you canÔÇÖt make multiple galleries with the editor. But you can make them separate and copy/paste the code. You would probably need to do some changes in slideshowGroup etc in the code to make it work.

[markspenser]

is there any other way if i would like to do the same in defined way only???

[RoadRash]

See this FAQ: How do I put more than one gallery in the same page?

[simplesimon]

Hey,

Strange...I was wondering why your example above didn't work. I am using Safari 4 on a Mac, and when you click on any of the thumbnails you just get a larger version of the image.

Wen I try the same thing in Firefox, it works. So I wonder if this method is perhaps not the best way for cross-browser compatibility? What do you think? Maybe download Safari and have a look?
Thanks,

Simon

[simplesimon]

The problem I mentioned above seems to have been fixed by choosing 'Reset Safari' from the Safari menu! Strange!

Simon

[SamPERRET]

Hello

I am following indication given by admin and I cannot find where paste the following code
"// gallery config objects
var config1 = {
slideshowGroup: 'group1',
thumbnailId: 'thumb1',
transitions: ['expand', 'crossfade']
};
var config2 = {
slideshowGroup: 'group2',
thumbnailId: 'thumb2',
transitions: ['expand', 'crossfade']
};"

Could you help me please
Thanks a lot
Cheers from Avignon-France !

[RoadRash]

If you used the Highslide Editor to set up your gallery you can put he code inside your highslide.config.js file.
If you didnÔÇÖt use the Editor you can put the code between the head tags with the rest of the Highslide settings.

[SamPERRET]

I did progress....a few only !

OK I did change and copied the body.
Thus I obtain well 3 gallery on the same page.
Nevertheless Only 1st gallery (in fact the original one) shows the thumbstrip and control button.
Could you help me please ?
demo can be reach at
http://samuel.perret.free.fr/

Thank you in advance for your advices
Samuel

[SamPERRET]

Thanks Roadrash for your advice.
I did not read it before my my previous message
Unfortunately there is no change
?????
Samuel

[RoadRash]

Hi Samuel,

Gallery 2 and 3 are missing closing > at the end of all the onclick lines.
You have this:

Code: Select all

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

Code: Select all

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

Add > at the end of all the onclick lines for both gallery 2 and 3 (28 lines).

Code: Select all

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

Code: Select all

onclick="return hs.expand(this, { thumbnailId: 'thumb3', slideshowGroup: 3 })" >

Then you need to do changes inside the onclick code for gallery 2 and 3.
Gallery 2 ÔÇô replace this:

Code: Select all

{ thumbnailId: 'thumb2', slideshowGroup: 2 }

with this in 13 places:

Code: Select all

config2

Gallery 3 ÔÇô replace this:

Code: Select all

{ thumbnailId: 'thumb3', slideshowGroup: 3 }

with this in 15 places:

Code: Select all

config3

[SamPERRET]

Dear Roadrash,
thanks so much for your help.
I did what you adviced.
Unfortunatelly, situation did not improved and moreover the thumbtrip for gallery does no more appear for gallery1.
Any idea ?

Thank you for your help
Samuel

NB : my site has been updated according your recommendations

[RoadRash]

You have a redundant } at the end of the onclick for the fifth image inside the hidden-container for the second gallery.
You have this:

</a>
<a href="highslide/images/large/DSC0153border.jpg" class="highslide"
title="Mont Ventoux & berges du rhone"
onclick="return hs.expand(this, config2 })">

<img src="highslide/images/thumbs/DSC0153border.jpg" alt=""
title="Gallery n´┐¢2" />
</a>

Change it to this:

Code: Select all

	</a>
	<a href="highslide/images/large/DSC0153border.jpg" class="highslide" 
			title="Mont Ventoux & berges du rhone" 
			onclick="return hs.expand(this, config2 )">

		<img src="highslide/images/thumbs/DSC0153border.jpg"  alt=""
			title="Gallery n´┐¢2" />
	</a>

[SamPERRET]

Wahoo I am very impressed by your analysis : now it works !! on my computer only....
Nevertheles (on my computer) for galleries 2 and 3 the control buttons do not appear.
Image can be changed with the < & >
Do you what to do for that ?

It does not work on the web site : how can we explain that ??? when clicking on the gallery, only 1 image appears (fixe)

Thanks a lot Roadrash.
Sam
Site is updated

[RoadRash]

Hi Sam,

In the addSlideshow part of your highslide.config.js file you have set the controls/thumbstrip to appear for the first gallery only (slideshowGroup: ÔÇÿgroup1ÔÇÖ - marked with red)

// Add the slideshow controller
hs.addSlideshow({
slideshowGroup: 'group1',
interval: 5000,
repeat: true,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
className: 'controls-in-heading',
opacity: '0.75',
position: 'bottom center',
offsetX: '0',
offsetY: '0',
hideOnMouseOut: true
},
thumbstrip: {
mode: 'vertical',
position: 'top left',
relativeTo: 'viewport'
}

});

You need to add all the slideshowGroups to the slideshowGroup line like this:

Code: Select all

// Add the slideshow controller
hs.addSlideshow({
	slideshowGroup: ['group1', 'group2', 'group3'],
	interval: 5000,
	repeat: true,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		className: 'controls-in-heading',
		opacity: '0.75',
		position: 'bottom center',
		offsetX: '0',
		offsetY: '0',
		hideOnMouseOut: true
	},
	thumbstrip: {
		mode: 'vertical',
		position: 'top left',
		relativeTo: 'viewport'
	}

});

BTW ÔÇô I can use the arrow keys in all your galleries.