Problems, need help? Have a tip or advice? Post it here.
3 posts Page 1 of 1
lightbox_error.jpg
print error lightbox
lightbox_error.jpg (123.63 KiB) Viewed 4053 times
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.

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>

Attachments

Hi,

The meat of your code is the following loop -
Code: Select all
<cms:show_mosaic 'gallery' tiles='image_gallery' startcount='0'>
    <div class="carousel-item active" >
        <img src="..
    </div>   
</cms:show_mosaic>

Now since you have hardcoded 'active' with the enclosed div, it gets repeated for each row of the mosaic.
To output the term with only one of the rows, we'll need to enclose it within a conditional <cms:if>.

For example, to add it to only the first row, we may do it as follows (using 'k_count' that increases with each row) -
Code: Select all
<cms:show_mosaic 'gallery' tiles='image_gallery' startcount='0'>
    <div class="carousel-item <cms:if k_count='0'>active</cms:if>" >
        <img src="..
    </div>   
</cms:show_mosaic>

Hope this helps.
Excellent, I was looking for something like that for my new Bootstrap.

It always seems obvious... after!

Thanks

:D
3 posts Page 1 of 1