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
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 csdesign - July 30, 2014
yes, exactly... that's the part I'm stuck on. How to code it to make that happen. :)
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 csdesign - July 30, 2014
oh Claire.. you are awesome! Thank you!!!!
http://www.bighornmountainlodges.com/south-fork-mountain-lodge-cabins-lodging-wy.php
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/