Slideshow gallery inside a lightbox opened from a button click

Wappler General How To
#1

Probably not something many people have a need to do, but every now and again it can be useful, here is how I went about it.

Dynamic or Static

  1. Add the Element Animation > Lightbox Options to your page, because we only need one of these for many galleries, I add it under App so it’s at the root level. This should add the following to the <head>...</head> section.
<link rel="stylesheet" href="dmxAppConnect/dmxLightbox/dmxLightbox.css" />
<script src="dmxAppConnect/dmxLightbox/dmxLightbox.js" defer=""></script>

Dynamic Version

  1. We need a Server Action that gets all the image urls we may need, so set that up as required, and add the Element Data > Server Connect linking to it.

  2. Select where you would like your button to go and add Element Data > Repeat Children, edit the ID if needed and add an expression of your Server Connect database query, not a column in the database query, but the actual parent query itself. I gave mine an ID of repeatFlowers.

  3. Add an anchor tag inside the repeat with Element Content > Link and change the default Your Link Title in the anchor text to whatever you need. I also needed mine to look like a button so I added a class of btn btn-lg btn-info.

  4. With the Anchor selected in the App Structure scoll down the Properties panel and add a Dynamic Attribute of Display > Open in Lightbox and give it some unique Group name, keeping in mind any other galleries with the same group name will show their images to the same lightbox. I called mine flowerGallery.
    Add a second Dynamic Attribute of Links > Link and select the Dynamic Data selector for Value, look for your repeat we made earlier, mine was repeatFlowers and under there I select the database column holding my url, mine was called the_urls.
    What this will do is show as many buttons as there are images, which we do not really want, we just want a single button, so with the Anchor Button still selected in the App Structure add another Dynamic Attribute of Display > Show and click the Dynamic Data selector for When, find your repeat in the list and click $index from the list, then click the formatters “magic wand” button, select $index from the list, click the + button and choose Operation, set it to == and set the Value field to 0.
    Now we will only see the first button in the pile and all the others will be hidden.

Below is my code for this, as you can see I have also added a dynamic title to mine, which gets additional data from the database for each image.

<div id="repeatFlowers" is="dmx-repeat" dmx-bind:repeat="sc_retrieve_page_contents.data.query_all_flower_images_for_gallery">
    <a dmx-bind:href="the_urls" dmx-lightbox:flowerGallery="" class="btn btn-lg btn-info py-3 px-5" dmx-show="$index==0" dmx-bind:title="'THE FLOWER SHOP – '+flower_name.uppercase()+' GALLERY – '+($index+1)+' / '+sc_retrieve_page_contents.data.query_all_flower_images_for_gallery.count()">View Gallery</a>
</div>

To do the same thing but for static images, the process is almost the same as above, however you need a way without a database to create a repeat with all your urls inside them.

I had no need to add the Lightbox Options Element again as I am using the same one as I used for the dynamic data, and I will just change my Group name for this second gallery.

Add an Element of Data > Array, give it an ID, mine was arrTheFlowerShopStaff then click the Dynamic Data selector for Items and click Code, as I could find no way in Wappler design view to do this like I needed. I only had 4 images for this so it was easy to manually type them in, this is what I entered.

["/image_assets/jack.jpg","/image_assets/fred.jpg","/image_assets/greg.jpg","/image_assets/cindy.jpg"]

For the repeat expression I chose arrTheFlowerShopStaff.count which just returns a number of 4.

For the Anchor Button I changed the Dynamic Attribute Link > Value to arrTheFlowerShopStaff.items[$index]. I used the same show when $index==0 as I previously used, and for the Dynamic Attribute Open in Lightbox, I changed the Group to flowerStaff.

Here is the final code for this

<dmx-array id="arrTheFlowerShopStaff" dmx-bind:items="[&quot;/image_assets/jack.jpg&quot;,&quot;/image_assets/fred.jpg&quot;,&quot;/image_assets/greg.jpg&quot;,&quot;/image_assets/cindy.jpg&quot;]"></dmx-array>

<div id="repeatTheFlowerShopStaff" is="dmx-repeat" dmx-bind:repeat="arrTheFlowerShopStaff.count" class="mt-4">
    <a dmx-bind:href="arrTheFlowerShopStaff.items[$index]" dmx-lightbox: flowerStaff ="" class="btn btn-lg btn-info py-3 px-5" dmx-show="$index==0">See Gallery</a>
</div>

As you can see Wappler has converted all the " (Double Quote) characters to &quot; correctly.

And that was it, hope this helps someone, good luck.

4 Likes