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 Kittybiccy - April 12, 2016

Hi Damon,Sorry those images are missing because of another issue you are helping me with. But yes, I would like there to be 3 uploads displayed which then open a lightbox on click, when the user keeps clicking through, further uploads are displayed in the lightbox but these are not displayed on the page. Here is a test version (it's the strip of thumbnails halfway down): http://www.straloch.com/NEW1/accomodation-stalkers-lodge.html

Thank you!

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/