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

10 posts by 2 authors in: Forums > CMS Builder
Last Post: July 30, 2014   (RSS)

By csdesign - July 29, 2014

Hello! 

Thanks in advance for the help! I've tried quite a few variations but none of them are quite right yet. 

What I'm trying to achieve is a list of cabins for rent. I want each cabin to display 1 thumbnail image and then open with lightbox to show the larger image (THIS PART IS DONE). 

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

I'm having issues with the cabins that have multiple photos. I can either get just 1 thumbnail to display (using <?php break /* only show one image */ ?>) or they all display vertically under each other. 
The php break gets the effect I want as far as having just one thumbnail show, but the additional photos for any lodge with more than one will not show via lightbox.

Bear has 2 photos, Moose has 4 photos. The number of photos per cabin will vary as they add them to the site. 

Any advice? 

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

<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[<?php echo htmlencode($record['title']) ?>]" title="<?php echo $upload['info1'] ?> South Fork Mountain Lodge 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 ?>

Thanks!! 

By claire - July 29, 2014

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.

--------------------

Claire Ryan
interactivetools.com

Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By csdesign - July 29, 2014

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

Attachments:

index.html 8K

lightbox.zip 115K

By claire - July 30, 2014

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?

--------------------

Claire Ryan
interactivetools.com

Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By csdesign - July 30, 2014

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

By claire - July 30, 2014

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.

--------------------

Claire Ryan
interactivetools.com

Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By claire - July 30, 2014

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

--------------------

Claire Ryan
interactivetools.com

Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By claire - July 30, 2014

No problem ^_^

--------------------

Claire Ryan
interactivetools.com

Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/