0

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

agodoo
  • 409
  • 6
  • 21

0 Answers0