search

trvswgnr / bs5-lightbox

A pure JS lightbox gallery plugin for Bootstrap 5 based on the Modal and Carousel components
https://trvswgnr.github.io/bs5-lightbox/
MIT License
133 stars 28 forks source link

Looping through a list of dynamic images gives galleries different IDs #75

Open Tigerlady opened 7 months ago

Tigerlady commented 7 months ago

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.

`

#product.product_name# #product.product_name# 
    <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.

<div class="modal lightbox fade" id="lightboxModal-kmmy8afy" <div class="modal lightbox fade" id="lightboxModal-bu0n30ky"

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/bs5-lightbox@1.8.3/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