LIGHTBOX Link from Single Image (multiple hidden images)

By csdesign - November 1, 2017

Hello!

I'm trying to get my single thumbnail image to link to a lightbox slideshow of additional hidden images. As it is right now, if I click on the thumbnail, it just brings up that image by itsself in lightbox. No links/slideshow to view the additional photos. 

If I remove the  <?php break ?> then all thumbnails display and lightbox works as expected (opens to large images & slideshow/back/next)
However, I only want one thumbnail to show. Any advice?

Here's a link to my current working sample (still being styled so ignore that part). I've put the number of images that each listing contains in the title for reference. 

SAMPLE PAGE:
http://www.webportfolio.com/acms/sipowellcraftfair/vendor-list-craft-fair-powell-wy2.php

<?php foreach ($vendor_listRecords as $record): ?>
     <div class="eight columns">
      
     <!--IMAGE AREA-->
     <?php foreach ($record['upload_images'] as $index => $upload): ?>
      
          <div class="four columns">
          <a href="<?php echo $upload['urlPath'] ?>" data-lightbox="vendor<?php echo htmlencode($record['vendor_number']) ?>" data-title="<?php echo htmlencode($record['title']) ?>">
          <img src="<?php echo $upload['thumbUrlPath2'] ?>" alt="<?php echo $upload['info1'] ?>"/></a>
          </div>
          <?php break /* only show one image */ ?>

     <?php endforeach ?>
  
     <?php if (!$record['upload_images']) : /* if no uploads show this: */ ?>
          <div class="four columns"><img src="images/craft-fair-badge-noimg-gray.png" alt="Powell Craft Fairs Festivals Markets" /></div>
     <?php endif ?>
  
  
     <!--TEXT AREA-->
       <H3><?php echo htmlencode($record['title']) ?></H3>
       <H4><?php echo htmlencode($record['vendor_names']) ?></H4>
       <?php echo htmlencode($record['content']) ?><br/><br/>
       <i class="fa fa-tags"></i> <?php echo $record['vendor_type'] ?><br/>
       <strong><em><i class="fa fa-location-arrow"></i> <?php echo $record['location'] ?> / Table # <?php echo htmlencode($record['vendor_number']) ?></em></strong>
      
   </div>
<?php endforeach ?>

<?php if (!$vendor_listRecords): ?>
No Vendors Found<br/><br/>
<?php endif ?>

By Toledoh - November 1, 2017

You need to add a count so that the first image is shown as is, but then after the fisrt image, the rest are coded without the thumbnail. something like this - but not tested :)

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

<?php if $count ==1 ?>
<div class="four columns">
<a href="<?php echo $upload['urlPath'] ?>" data-lightbox="vendor<?php echo htmlencode($record['vendor_number']) ?>" data-title="<?php echo htmlencode($record['title']) ?>">
<img src="<?php echo $upload['thumbUrlPath2'] ?>" alt="<?php echo $upload['info1'] ?>"/></a>
</div>
<?php else ?>
<a href="<?php echo $upload['urlPath'] ?>" data-lightbox="vendor<?php echo htmlencode($record['vendor_number']) ?>" data-title="<?php echo htmlencode($record['title']) ?>"></a>
<?php endif ?>

<?php $count++ ?>

<?php endforeach ?>

Cheers,

Tim (toledoh.com.au)

By csdesign - November 1, 2017

Working on it... Tomorrow. 

By csdesign - November 2, 2017

Hi Tim, 

Thanks so much for the help. I've worked for hours on this (definitely not an expert coder). I've tried a lot of variations but can't make it work correctly. The only browser error I'm getting is 500.  However, I am getting 3 line code errors in dreamweaver... that to be honest, I don't know how to fix. 

I know, stupid question, but the "php else" command is being used to eliminate the need for "php break", correct?

Any advice?  (3 screenshots attached - 1 for each error) 

By Deborah - November 2, 2017

Hi, csdesign. I've done similar setups for image galleries. I merged your code and Tim's and added a semi-color or colon here/there and the errors appear to be eliminated in Dreamweaver. I've not tested this specific code, but you may wish to try it with your setup.

<?php $count = 1; ?>

<?php foreach ($record['upload_images'] as $index => $upload): ?>
<?php if ($count == 1): ?>
<div class="four columns">
<a href="<?php echo $upload['urlPath'] ?>" data-lightbox="vendor<?php echo htmlencode($record['vendor_number']) ?>" data-title="<?php echo htmlencode($record['title']) ?>">
<img src="<?php echo $upload['thumbUrlPath2'] ?>" alt="<?php echo $upload['info1'] ?>"/></a>
</div>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>" data-lightbox="vendor<?php echo htmlencode($record['vendor_number']) ?>" data-title="<?php echo htmlencode($record['title']) ?>"></a>
<?php endif; ?>

<?php $count++ ?>

<?php endforeach ?>

Give it a try if you'd like and let us know if it works!

~ Deborah

By csdesign - November 2, 2017

Thanks Deborah!!!  Kinda funny because I just got it to work using this code but I'm going to try yours too because I have another one that was working a few years ago and now it's not. (was similar to this one I'm posting) 

http://www.webportfolio.com/acms/sipowellcraftfair/vendor-list-craft-fair-powell-wy3a.php

<?php $count = 0; foreach ($record['upload_images'] as $index => $upload): ?>
      
<div class="four columns">
<a <?php echo $count > 0 ? 'style="display: none;"' : ''; ?>href="<?php echo $upload['urlPath'] ?>" data-lightbox="vendor<?php echo htmlencode($record['vendor_number']) ?>" data-title="<?php echo htmlencode($record['title']) ?>">
<img src="<?php echo $upload['thumbUrlPath2'] ?>" alt="<?php echo $upload['info1'] ?>"/></a>
</div>

<?php $count++; endforeach ?>
  
<?php if (!$record['upload_images']) : /* if no uploads show this: */ ?>
<div class="four columns"><img src="images/craft-fair-badge-noimg-gray.png" alt="Powell Craft Fairs Festivals Markets" /></div>
<?php endif ?>

By csdesign - November 2, 2017

Thanks Tim! Thanks Deborah!

Worked like a charm! Now I have two options.  I'm going to use the one you sent me to try to fix the older page that's giving an error. 

By csdesign - November 2, 2017

This is not entirely the same subject, but in the same area. I'm trying to add an uploaded image count. For instance, under each single image. I put an icon and text for more images but I would also like to show the image count (number of images uploaded for that record) next to it. 

See Images [6]

Screenshot Attached

Thanks!!! Tina