Creating a lightbox gallery with 'hidden' uploads

4 posts by 2 authors in: Forums > CMS Builder
Last Post: April 13, 2016   (RSS)

By Kittybiccy - April 11, 2016

Hi guys,

I have a strip of thumbnail images which open a lightbox however the lightbox goes on to display 'hidden' images.
Here's the link to the test page: http://straloch.com/natureDetail.php?Wildflowers-2

I'm wondering how I would acheive this using my upload field? Ideally, I'd like our client just to upload all the images into one upload field (I'd set the upload limit)? The HTML code I'm using is as follows:

<div class="col-md-offset-2 col-md-9">
                       <a href="img/Bog-Ashphodel.jpg" data-toggle="lightbox" data-gallery="hiddenimages" data-title="Some pretty flowers" class="col-sm-4">
                                    <img src="img/Bog-Ashphodel.jpg" class="img-responsive">
                                </a>
                                <a href="img/StrlchSpr400.jpg" data-toggle="lightbox" data-gallery="hiddenimages" data-title="Lovely white flowers" class="col-sm-4">
                                    <img src="img/StrlchSpr400.jpg" class="img-responsive">
                                </a>
                                <a href="img/Moutain-Everlasting.jpg" data-toggle="lightbox" data-gallery="hiddenimages" data-title="Someone lost their dress" class="col-sm-4">
                                    <img src="img/Moutain-Everlasting.jpg" class="img-responsive">
                                </a>
                                <!-- elements not showing, use data-remote -->
                              <div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="img/Greater-Sundew-Straloch.jpg" data-title="Hidden item 1"></div>
                                <div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="img/Northern-Marsh-Orchid-Straloch.jpg" data-title="Hidden item 2"></div>
                                <div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="img/Rock-rose-.jpg" data-title="Hidden item 3"></div>
                        </div>   

Do you think this could work at all?
Thanks in advance, Hannah

By Damon - April 11, 2016

Hi Hannah,

In your example, some of images don't exist.

Are you wanting to only show the first three thumbnails but using the lightbox popup, allow the user to go through all of them?

Can you provide some more details about what the end result should be?

Cheers,
Damon Edis - interactivetools.com

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

By Damon - April 13, 2016

Hi,

Just replied to your ticket. Just need you to upload some images to work with and then I can help with some code.

Cheers,
Damon Edis - interactivetools.com

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