I have 5 images with dynamic sources displayed inside a data detail modal.
I want to click on an image to launch a lightbox with a bigger version of the clicked image.
I have checked the tutorial on using a light box but that is for static images found in the sites images folder and not for dynamic images.
I tried adding a dynamic source for Anchor Image but it doesn’t allow me to add a dynamic attribute to load the light box.
How do I show a lightbox with dynamic images?
Have to take a look at this …
I have almost exactly the same need as @fafa
But this video didn’t help me at all.
This is from 5 years ago.
There are no ‘current’ docs on how to use Lightbox?
Its actually quite easy, but I was only able to figure this out with trial and error, using an example on some ‘caravans’ site.
live link here: http://137.184.106.209/vehicle_list3_dayof
Click on a vehicle in the list and the details are shown in a data-detail panel on the right.
Fafa, here’s what I did for my 5 image fields:
<a href="" dmx-bind:href="data_detail1.data.image1" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image1"> </a>
<a href="" dmx-bind:href="data_detail1.data.image2" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image2"> </a>
<a href="" dmx-bind:href="data_detail1.data.image3" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image3"> </a>
<a href="" dmx-bind:href="data_detail1.data.image4" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image4"> </a>
<a href="" dmx-bind:href="data_detail1.data.image5" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image5"> </a>
Although I have an issue where a record might not be using all 5 images and i’m seeing “rogue” data from previous records. I posted a thread to try and resolve that.