Lightbox help ASAP

[Cassiopeia]

I'm not sure if this is general enough for people to help but I figured I'd ask anyway: Here's the deal:


Click here for the page (http://fadingeclipse.net/Testing/4miniatures.html)
Only the last image works on the page, or is supposed to work on the page.

Using Highslide JS, also posted to their forum but you guys are usually pretty fast and this is time sensitive:

So basically, I'm trying to set up an image gallery. There are multiple image for each item, but I only want ONE thumbnail for each item visible on the main page. I have the lightboxes set up for a gallery style with the thumbnails on the right side of the image. I only want the thumbnails on the right to show for that particular item, not all the items on the page.

I went back through the FAQ and found the following: viewtopic.php?f=4&t=4682

So I did what it said Code being:

Code: Select all

// gallery config object
var config01 = {
slideshowGroup: 'group01',
thumbnailId: 'thumb01',
numberPosition: 'heading',
transitions: ['expand', 'crossfade']
};

var config02 = {
slideshowGroup: 'group02',
thumbnailId: 'thumb02',
transitions: ['expand', 'crossfade']
};



Because there will be about 20 images, on some of the pages, I figured I would just write the code from 1-20

Then in my main page my code is:

Code: Select all

<div class="highslide-gallery">
<a id="thumb20" href="images/knives/4miniatures/4Mini_Miniature_010SM1.jpg" class="highslide" onclick="return hs.expand(this, {thumbnailId: 'thumb20', slideshowGroup: 20 } )">
<img src="images/knives/4miniatures/4Mini_Miniature_0101THUMB.jpg" alt="Collection of Miniature knifes that can fit on a quarter" title="This gallery holds a collection of the smallest knives to ever come out of the shop. There are three different styles, all small enough to fit on the head of a quarter. # Mini01" />
</a>
<div class="hidden-container">
<a href="images/knives/4miniatures/4Mini_Miniature_0102SM.jpg" class="highslide" onclick="return hs.expand(this, {thumbnailId: 'thumb20', slideshowGroup: 20 })">
<img src="images/knives/4miniatures/4Mini_Miniature_0102SM.jpg" alt="Collection of Miniature knifes that can fit on a quarter" title="This gallery holds a collection of the smallest knives to ever come out of the shop. There are three different styles, all small enough to fit on the head of a quarter. #DBF-Mini-01" />


So, here's my confusion. According to the tutorial if we have multiple images for one thumbnail, and therefore will have hidden thumbnails we use this code:
onclick="return hs.expand(this, { slideshowGroup: 1 } )"
Which will result in the lightbox closing after the last image of that group.

Then it says that if there are HIDDEN thumbnails to use THIS code:
a id="thumb2"
Onclick="return hs.expand(this, { thumbnailId: 'thumb2', slideshowGroup: 2 })"


So I've tried it a whole bunch of ways and all I'm getting is a single lightbox without the gallery. Please help!