Looping through a list of dynamic images gives galleries different IDs

[Tigerlady]

I am working on a site where I have started using bs5-lightbox because we use Bootstrap 5 as the base CSS and stumbled across your code.

I am doing a database query to pull images for a product. I do a loop around the data that displays the images. Lightbox works, except each popup gets a new ID and does not go back and forth between the images.

I use ColdFusion for my code, but I am sure you will understand. I gave the gallery the product name in the code.

<cfloop list="#product.image_thumbnails#" index="i"> <cfif request.cwpage.imageZoom> <!--- show the image with zoom link ---> <a href="#request.cwpage.zoomDir##i#" class="CWimageZoomLink CWlink" title="#product.product_name#" data-toggle="lightbox" data-gallery="#product.product_name#" data-title="#product.product_name#"><img class="CWthumb" src="#request.cwpage.thumbDir##i#" alt="#product.product_name#"></a> <cfelse> <!--- show only the image, no link, no zoom ---> <img class="CWthumb" src="#request.cwpage.thumbDir##i#" alt="#product.product_name#"> </cfif> <cfif loopCt mod request.cwpage.thumbsPerRow eq 0> </div><div class="CWproductThumbs"> </cfif> <cfset loopCt = loopCt + 1> </cfloop>

What happens is that each image gets a different ID for the lightbox. So, instead of one lightbox modal ID, I get several.

Ect. So, each image in the loop is being displayed with a different ID.

Is there some JS that I am missing that will get this to work?
I only have https://cdn.jsdelivr.net/npm/[email protected]/dist/index.bundle.min.js in the footer, but should I have some other special markup after that to do this?

This site is in development, so I don't want to put a direct link here so it doesn't get indexed in Google. If you'd like to see the site, please let me know how to reach you so I can send you a link.

I hope to get this working soon.

Thank you