how to configure an active class with couch for Lightbox
need help.
I use image gallery a lot and I use it with repeatable region.
But in every gallery there is a Lightbox where I repeat the information for the image but to work it needs an active class. But when I repeat the snippet, the active is repeated and the lightbox doesn't work. Already have with <cms:if> but even so I can not find a solution. Has anyone gone through this, if so please help me it is very important.
need help.
I use image gallery a lot and I use it with repeatable region.
But in every gallery there is a Lightbox where I repeat the information for the image but to work it needs an active class. But when I repeat the snippet, the active is repeated and the lightbox doesn't work. Already have with <cms:if> but even so I can not find a solution. Has anyone gone through this, if so please help me it is very important.
- Code: Select all
div>
<!-- Filter -->
<!-- Gallery -->
<div class="mbr-gallery-row">
<div class="mbr-gallery-layout-default">
<div>
<div>
<cms:show_mosaic 'gallery' tiles='image_gallery' startcount='0'>
<div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="<cms:show tag_image />">
<div href="#lb-portfolio-sr" data-slide-to="<cms:show k_count />" data-bs-slide-to="<cms:show k_count />" data-toggle="modal" data-bs-toggle="modal">
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="<cms:show altitle />" title="<cms:show altitle />" loading="lazy" class="lazyload" data-src="<cms:show imagegl />"><span class="icon-focus"></span>
</div>
</div>
</cms:show_mosaic>
</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
<!-- Lightbox -->
<div data-app-prevent-settings="" class="mbr-slider modal fade carousel slide" tabindex="-1" data-keyboard="true" data-bs-keyboard="true" data-interval="false" data-bs-interval="false" id="lb-portfolio-sr">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="carousel-inner">
<!-- light -->
<cms:show_mosaic 'gallery' tiles='image_gallery' startcount='0'>
<div class="carousel-item active" >
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="<cms:show altitle />" title="<cms:show altitle />" loading="lazy" class="lazyload" data-src="<cms:show imagegl />">
</div>
</cms:show_mosaic>
</div>
<a class="carousel-control carousel-control-prev" role="button" data-slide="prev" data-bs-slide="prev" href="#lb-portfolio-sr"><span class="mbri-left mbr-iconfont" aria-hidden="true"></span><span class="sr-only visually-hidden">Previous</span></a><a class="carousel-control carousel-control-next" role="button" data-slide="next" data-bs-slide="next" href="#lb-portfolio-sr"><span class="mbri-right mbr-iconfont" aria-hidden="true"></span><span class="sr-only visually-hidden">Next</span></a><a class="close" href="#" role="button" data-dismiss="modal" data-bs-dismiss="modal"><span class="sr-only visually-hidden">Close</span></a>
</div>