Multiple Lightbox Groups In Repeat

Hi.
I have a repeat of cards, where each card has a bunch of images.
Using a repeat inside the card, I am able to setup a lightbox UI, where first image is shown. On click of it, the lightbox opens with all other images that user can scroll left/right.
First image link has the dmx attribute which looks like this: dmx-lightbox:lightboxroomcardsdesktop="".

But, since the above setup is on each card, the GROUP (lightboxroomcardsdesktop) of each lightbox cannot be dynamic using $index, the lightbox once opened, allows scrolling through all the images of all the cards.

Here the sample code:

<div class="d-flex flex-wrap justify-content-center" is="dmx-repeat" id="repeatRooms" dmx-bind:repeat="scGetPageInformation.data.repeatRooms">
                                <div class="card pkt-m-12 shadow pkt-border-radius pkt-mouse-pointer pkt-accomodation-card">
                                    <div class="card-body h-100">
                                        <div class="mb-3 pkt-roomcards-img-swiper position-relative">
                                            <a dmx-bind:href="il_url_local" dmx-repeat:repeatimages="GetImages" dmx-lightbox:lightboxroomcardsdesktop="">
                                                <img alt="Card image cap" class="img-fluid w-100 h-100 pkt-img-cover" dmx-lazyload-dynamic="" dmx-show="$index == 0" dmx-bind:data-src="il_url_local">
                                            </a>
                                            <dmx-lightbox id="lightboxRoomCardsDesktop" spinner="Spinner3" noscrollbars buttons="show"></dmx-lightbox>
                                        </div>
                                    </div>
                                 </div>
 </div>

Is there a way to define dynamic group names inside each of the repeat?

Community Page
Last updated: