Issue integrating Lightbox for bootstrap 5 in Joomla 4

Question

I have a Joomla site with helix Ultimate Framework template.

I would need to integrate "lightbox for bootstrap 5 " plugin (https://trvswgnr.github.io/bs5-lightbox/) I found this interesting article http://brian.teeman.net/900-responsive-joomla-lightbox-gallery

I tried implementing in this way. I have a override of the com_content output, in this file /shaper_helixultimate/overrides/com_content/article/default.php In this file I defines some if statements so that I can customize the output based on the content of the field customFields['tipo-contenuto']->value

In case customFields['tipo-contenuto']->value = "fiera", I want to build a gallery with lightbox effect integrated

This s the piece of code

<?php } elseif ($customFields['tipo-contenuto']->value == 'Fiera') { ?>

      $app = Factory::getApplication();                                                                            
      $templatePath = 'templates/' . $app->getDocument()->template;
      /** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
      $wa = $app->getDocument()->getWebAssetManager();
      $wa->useScript('bootstrap.modal');
      $wa->useScript('bootstrap.carousel');
      $wa->registerAndUseScript('lightbox', $templatePath . '/js/index.bundle.min.js', [], ['defer' => true], []);
    ?>

    <<?php echo $page_header_tag; ?> itemprop="headline">
        <?php echo $this->escape($this->item->title); ?>
    </<?php echo $page_header_tag; ?>>

    <?php 

    if (is_array($customFields['foto-fiera']->rawvalue)) { ?>
        <div class="row">
            <?php
            foreach($customFields['foto-fiera']->rawvalue as $foto) { ?>
                    <?php 
                        $imageTag = HTMLHelper::_('image', 'images/fiera/small/'.$foto, $foto, ["class" => "img-fluid"], false, 0); 
                        echo HTMLHelper::_('link', 'images/fiera/big/'.$foto, $imageTag, ["class" => "col-sm-6 col-md-4", "data-toggle" => "lightbox", "data-gallery" => "fiera"]);
                    ?>
                
            <?php }
            ?>
        </div>

    <?php } ?>

Actually this is the html output

<div class="row">
    <a href="/images/fiera/big/10_fiera_cosmoprof_big.jpg" class="col-sm-6 col-md-4" data-toggle="lightbox" data-gallery="fiera"><img class="img-fluid" src="/images/fiera/small/10_fiera_cosmoprof_big.jpg" alt="10_fiera_cosmoprof_big.jpg"></a>                      
    <a href="/images/fiera/big/11_fiera_cosmoprof_big.jpg" class="col-sm-6 col-md-4" data-toggle="lightbox" data-gallery="fiera"><img class="img-fluid" src="/images/fiera/small/11_fiera_cosmoprof_big.jpg" alt="11_fiera_cosmoprof_big.jpg"></a>                      
    <a href="/images/fiera/big/12_fiera_cosmoprof_big.jpg" class="col-sm-6 col-md-4" data-toggle="lightbox" data-gallery="fiera"><img class="img-fluid" src="/images/fiera/small/12_fiera_cosmoprof_big.jpg" alt="12_fiera_cosmoprof_big.jpg"></a>                      
    <a href="/images/fiera/big/13_fiera_cosmoprof_big.jpg" class="col-sm-6 col-md-4" data-toggle="lightbox" data-gallery="fiera"><img class="img-fluid" src="/images/fiera/small/13_fiera_cosmoprof_big.jpg" alt="13_fiera_cosmoprof_big.jpg"></a>                      
    <a href="/images/fiera/big/14_fiera_cosmoprof_big.jpg" class="col-sm-6 col-md-4" data-toggle="lightbox" data-gallery="fiera"><img class="img-fluid" src="/images/fiera/small/14_fiera_cosmoprof_big.jpg" alt="14_fiera_cosmoprof_big.jpg"></a>                      
    <a href="/images/fiera/big/15_fiera_cosmoprof_big.jpg" class="col-sm-6 col-md-4" data-toggle="lightbox" data-gallery="fiera"><img class="img-fluid" src="/images/fiera/small/15_fiera_cosmoprof_big.jpg" alt="15_fiera_cosmoprof_big.jpg"></a>                      
    <a href="/images/fiera/big/16_fiera_cosmoprof_big.jpg" class="col-sm-6 col-md-4" data-toggle="lightbox" data-gallery="fiera"><img class="img-fluid" src="/images/fiera/small/16_fiera_cosmoprof_big.jpg" alt="16_fiera_cosmoprof_big.jpg"></a>                      
    <a href="/images/fiera/big/17_fiera_cosmoprof_big.jpg" class="col-sm-6 col-md-4" data-toggle="lightbox" data-gallery="fiera"><img class="img-fluid" src="/images/fiera/small/17_fiera_cosmoprof_big.jpg" alt="17_fiera_cosmoprof_big.jpg"></a>                      
    <a href="/images/fiera/big/18_fiera_cosmoprof_big.jpg" class="col-sm-6 col-md-4" data-toggle="lightbox" data-gallery="fiera"><img class="img-fluid" src="/images/fiera/small/18_fiera_cosmoprof_big.jpg" alt="18_fiera_cosmoprof_big.jpg"></a>                      
    <a href="/images/fiera/big/19_fiera_cosmoprof_big.jpg" class="col-sm-6 col-md-4" data-toggle="lightbox" data-gallery="fiera"><img class="img-fluid" src="/images/fiera/small/19_fiera_cosmoprof_big.jpg" alt="19_fiera_cosmoprof_big.jpg"></a>                      
    <a href="/images/fiera/big/1_fiera_cosmoprof_big.jpg" class="col-sm-6 col-md-4" data-toggle="lightbox" data-gallery="fiera"><img class="img-fluid" src="/images/fiera/small/1_fiera_cosmoprof_big.jpg" alt="1_fiera_cosmoprof_big.jpg"></a>                     
</div>

it is correct as per lightbox docs but if you click on the image it opens the corresponding big one simply in another page instead of apply lightbox effect.

Any help? Matteo