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:
Last updated: