Having trouble with multiple galleries

[requena79]

hi there, I don't really know javascript, so i'm just hacking about having trouble.

i'm trying to set up 10 galleries on one page, but every time i click the link for the galleries (i have two on the page at the moment) the same galleries pop up. i have had a look at http://www.highslide.com/forum/viewtopic.php?f=4&t=4682 but don't really understand it.

could someone show me what changes to make to the code to get the two galleries working? then I can probably work out how to set it up for 10!

uploaded the page here: http://www.athielmarketing.com/customwi ... ntario.php

if you click the casements 'view examples' button, and the awnings 'view example' button, these are the ones in question (if I can figure these out I can do the rest)

thanks in advance any help is much appreciated

[RoadRash]

Each button (View examples) must have a unique id ÔÇô this id must be used as thumbnailId.
The first image for each gallery must also have a unique id ÔÇô this id must be used in the document.getElementById code for the corresponding button.

Markup for your first gallery:

Code: Select all

<div class="highslide-gallery portfolio">
<a [hilight]id="opener1"[/hilight] href="javascript:;" onclick="document.getElementById('[hilight]thumb1'[/hilight]).onclick(); return false;"><img src="i/button-view-examples.png" alt=`View Examples` /></a>
<div style="display: none;">

<a [hilight]id="thumb1"[/hilight] class='highslide' href='i/windows/casement/1.jpg' onclick="return hs.expand(this, {[hilight]thumbnailId: 'opener1'[/hilight], slideshowGroup: 1 })"><img src="i/windows/casement/1.jpg" alt="" /></a>

<a class='highslide' href='i/windows/casement/2.jpg' onclick="return hs.expand(this, {[hilight]thumbnailId: 'opener1'[/hilight], slideshowGroup: 1 })"><img src="i/windows/casement/2.jpg" alt="" /></a>

<a class='highslide' href='i/windows/casement/3.jpg' onclick="return hs.expand(this, {[hilight]thumbnailId: 'opener1'[/hilight], slideshowGroup: 1 })"><img src="i/windows/casement/3.jpg" alt="" /></a>

</div>
</div>

Markup for your second gallery:

Code: Select all

<div class="highslide-gallery portfolio">
<a [hilight]id="opener2"[/hilight] href="javascript:;" onclick="document.getElementById([hilight]'thumb2'[/hilight]).onclick(); return false;"><img src="i/button-view-examples.png" alt=`View Examples` /></a>
<div style="display: none;">

<a [hilight]id="thumb2"[/hilight] class='highslide' href='i/windows/awning/1.jpg' onclick="return hs.expand(this, {[hilight]thumbnailId: 'opener2'[/hilight], slideshowGroup: 2 })"><img src="i/windows/casement/1.jpg" alt="" /></a>

<a class='highslide' href='i/windows/awning/2.jpg' onclick="return hs.expand(this, {[hilight]thumbnailId: 'opener2'[/hilight], slideshowGroup: 2 })"><img src="i/windows/casement/2.jpg" alt="" /></a>

<a class='highslide' href='i/windows/awning/3.jpg' onclick="return hs.expand(this, {[hilight]thumbnailId: 'opener2'[/hilight], slideshowGroup: 2 })"><img src="i/windows/casement/3.jpg" alt="" /></a>

<a class='highslide' href='i/windows/awning/4.jpg' onclick="return hs.expand(this, {[hilight]thumbnailId: 'opener2'[/hilight], slideshowGroup: 2 })"><img src="i/windows/casement/4.jpg" alt="" /></a>

<a class='highslide' href='i/windows/awning/5.jpg' onclick="return hs.expand(this, {[hilight]thumbnailId: 'opener2[/hilight]', slideshowGroup: 2 })"><img src="i/windows/casement/5.jpg" alt="" /></a>

</div>
</div>