Lightbox gallery question
3 posts by 2 authors in: Forums > CMS Builder
Last Post: October 24, 2018 (RSS)
By kovali - October 16, 2018
Hi,
I would like to use a lightbox gallery with a single text hyperlink to launch the gallery. I have it working in HTML with this code:
<a class="read-more" href="image-3.jpg" data-lightbox="example-set" data-title="Test1">More images</a>
<a class="read-more" href="image-4.jpg" data-lightbox="example-set" data-title="Test2"></a>
<a class="read-more" href="image-5.jpg" data-lightbox="example-set" data-title="Test3"></a>
<a class="read-more" href="image-6.jpg" data-lightbox="example-set" data-title="Test4"></a>
Now, in CMSB, when I use the code below it will return a text link for every image:
<?php foreach ($eb_fotosRecord['fotos'] as $index => $upload): ?>
<a class="read-more" href="<?php echo $upload['urlPath'] ?>" data-lightbox="example-set" data-title="Test1">More images</a>
<?php endforeach ?>
Resulting in:
<a class="read-more" href="image-3.jpg" data-lightbox="example-set" data-title="Test1">More images</a>
<a class="read-more" href="image-4.jpg" data-lightbox="example-set" data-title="Test2">More images</a>
<a class="read-more" href="image-5.jpg" data-lightbox="example-set" data-title="Test3">More images</a>
<a class="read-more" href="image-6.jpg" data-lightbox="example-set" data-title="Test4">More images</a>
Is there a solution to have only one text link for the first image found, and no more links for the rest of the images ??
Help is much appreciated ! Thanks!
Koen
By daniel - October 16, 2018
Hi Koen,
Yes, you can do this relatively simply by only displaying the "More Images" text when the $index variable is equal to 0. It would look something like this:
<?php foreach ($eb_fotosRecord['fotos'] as $index => $upload): ?>
<a class="read-more" href="<?php echo $upload['urlPath'] ?>" data-lightbox="example-set" data-title="Test1"><?php echo ($index == 0 ? 'More images' : ''); ?></a>
<?php endforeach ?>Let me know if you have any further questions!
Thanks,
Technical Lead
interactivetools.com