How to show SINGLE THUMBNAIL IMAGE then a multiple image "slideshow" via LIGHTBOX

Hey there

Have you any documentation for the lightbox you're using? This looks like a Javascript issue, so I'd like to be sure that this lightbox can take multiple images.

Hi Claire,

Yes I've attached the index page that came with the files, I recently downloaded the most current version of lightbox 2.7.2 (my version is attached in a zip file)

Thanks! Tina

Okay, from the docs there, it looks like your image link isn't being added properly. You need to use the "data-lightbox" attribute to combine the images into one set. Here's the relevant section from the html file:

If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:
<a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

Does this make sense?

Hi Claire, Yes, makes perfect sense. I had used it at one point then I think I reverted to an old version on accident while trying to get it to work the way I wanted it to. both versions worked, but I have the new code in there now. I had testing it multiple ways before getting to this point, but I will back up a little. 

My goal is to get 1 thumbnail showing for each cabin (13 cabins) and when I click on Deer Cabin or Moose Cabin, or any other cabin with multiple pics - that just the photos for that cabin will come up as a group slideshow in lightbox. (just reposting to make things faster) :)  Thanks for your help!! 

PAGE 1 - changed to new code "data-lightbox" and "data-title". 
RESULT: each cabin shows 1 thumbnail and only 1 large image is available in the lightbox screen.
http://www.bighornmountainlodges.com/south-fork-mountain-lodge-cabins-lodging-wy.php

<?php foreach ($record['images'] as $index => $upload): ?>

<a href="<?php echo $upload['urlPath'] ?>" data-lightbox="<?php echo htmlencode($record['title']) ?>" data-title="<?php echo $upload['info1'] ?> South Fork Mountain Cabins"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" border="1" alt="<?php echo $record['info2'] ?>" /></a>

<?php break /* only show one image */ ?>
<?php endforeach ?>

PAGE 2 - same as page 1, but changed the group name from the title generated by cms to "cabin-photos" so they are all in the same group (as a test)
RESULT: all 21 images show as one group in lightbox and all thumbnails display (rather than just 1 per cabin). 
http://www.bighornmountainlodges.com/south-fork-mountain-lodge-cabins-lodging-wy02.php

<?php foreach ($record['images'] as $index => $upload): ?>

<a href="<?php echo $upload['urlPath'] ?>" data-lightbox="cabin-photos" data-title="<?php echo $upload['info1'] ?> South Fork Mountain Cabins"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" border="1" alt="<?php echo $record['info2'] ?>" /></a>

<?php endforeach ?>

PAGE 3 - same as page 2, but added the php break back in
RESULT: each cabin shows 1 thumbnail, however, when you click on the first cabin - it brings up a slideshow of the thumbnail image for all 13 cabins. - of course... since they all have the same group name. 
http://www.bighornmountainlodges.com/south-fork-mountain-lodge-cabins-lodging-wy03.php

<?php foreach ($record['images'] as $index => $upload): ?>

<a href="<?php echo $upload['urlPath'] ?>" data-lightbox="cabin-photos" data-title="<?php echo $upload['info1'] ?> South Fork Mountain Cabins"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" border="1" alt="<?php echo $record['info2'] ?>" /></a>

<?php break /* only show one image */ ?>
<?php endforeach ?>

yes, exactly... that's the part I'm stuck on. How to code it to make that happen. :)

Like this:

<?php $count = 0; foreach ($record['images'] as $index => $upload): ?>

<a <?php echo $count > 0 ? 'style="display: none;"' : ''; ?>href="<?php echo $upload['urlPath'] ?>" data-lightbox="<?php echo htmlencode($record['title']) ?>" data-title="<?php echo $upload['info1'] ?> South Fork Mountain Cabins"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" border="1" alt="<?php echo $record['info2'] ?>" /></a>

<?php $count++; endforeach ?>

oh Claire.. you are awesome! Thank you!!!!

http://www.bighornmountainlodges.com/south-fork-mountain-lodge-cabins-lodging-wy.php

No problem ^_^