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 ?>

You still have the break in the first code snippet, so you definitely won't see any more than one there.

Use that one, but try removing the break, and adding some logic to set a display:none on every link after the first one.

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