No results found. Please refine your search criteria or contact us.
MoreMenu

Photo Albums

Custom lightbox usage

At some point you may want to use the same lightbox script on your page globally. This can be accomplished by creating a new jQuery template called j_lightgallery.html5 and adding it to the page layout settings:

<?php
$GLOBALS['TL_CSS'][] = 'system/modules/cfg_photo_albums/assets/light-gallery/css/lightgallery.min.css';
$GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/cfg_photo_albums/assets/light-gallery/js/lightgallery.js';

// Modules (optional)
$GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/cfg_photo_albums/assets/light-gallery/js/lg-autoplay.min.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/cfg_photo_albums/assets/light-gallery/js/lg-fullscreen.min.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/cfg_photo_albums/assets/light-gallery/js/lg-pager.min.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/cfg_photo_albums/assets/light-gallery/js/lg-thumbnail.min.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/cfg_photo_albums/assets/light-gallery/js/lg-zoom.min.js';
?>

<script>
    (function ($) {
        $(document).ready(function () {
            $('.ce_gallery').lightGallery({
                selector: 'a',
                mode: 'lg-slide',
                download: true,
                loop: true,
                controls: true,
                counter: true
            });

            $('a[data-lightbox]').parent().lightGallery({
                selector: 'a',
                mode: 'lg-slide',
                download: true,
                loop: true,
                controls: true,
                counter: true
            });
        });
    })(jQuery);
</script>

Supporting the captions also requires a few gentle tweaks of the Contao core templates. Basically it's about adding the data-sub-html attribute and the special CSS class to the caption element. See the examples below.

ce_image.html5
<?php $this->extend('block_searchable'); ?>
 
<?php $this->block('content'); ?>
 
  <figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>
 
    <?php if ($this->href): ?>
      <a href="<?= $this->href ?>" data-sub-html=".lightgallery-caption-<?= $this->id ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
    <?php endif; ?>
 
    <?php $this->insert('picture_default', $this->picture); ?>
 
    <?php if ($this->href): ?>
      </a>
    <?php endif; ?>
 
    <?php if ($this->caption): ?>
      <figcaption class="caption lightgallery-caption-<?= $this->id ?>"><?= $this->caption ?></figcaption>
    <?php endif; ?>
 
  </figure>
 
<?php $this->endblock(); ?>
gallery_default.html5
<ul class="cols_<?= $this->perRow ?>">
  <?php $count = 0; foreach ($this->body as $class=>$row): ?>
    <?php foreach ($row as $col): ?>
      <?php if ($col->addImage): ?>
        <li class="<?= $class ?> <?= $col->class ?>">
          <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
            <?php if ($col->href): ?>
              <a href="<?= $col->href ?>"<?= $col->attributes ?> title="<?= $col->alt ?>" data-sub-html=".lightgallery-caption-<?= $this->id ?>-<?= ++$count ?>"><?php $this->insert('picture_default', $col->picture); ?></a>
            <?php else: ?>
              <?php $this->insert('picture_default', $col->picture); ?>
            <?php endif; ?>
            <?php if ($col->caption): ?>
              <figcaption class="caption lightgallery-caption-<?= $this->id ?>-<?= $count ?>"><?= $col->caption ?></figcaption>
            <?php endif; ?>
          </figure>
        </li>
      <?php endif; ?>
    <?php endforeach; ?>
  <?php endforeach; ?>
</ul>
image.html5
<figure class="image_container<?= $this->floatClass ?>"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?> itemscope itemtype="http://schema.org/ImageObject" itemprop="associatedMedia">
 
  <?php if ($this->href): ?>
    <a href="<?= $this->href ?>" data-sub-html=".lightgallery-caption-<?= $this->id ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?> itemprop="contentUrl">
  <?php endif; ?>
 
  <?php $this->insert('picture_default', $this->picture); ?>
 
  <?php if ($this->href): ?>
    </a>
  <?php endif; ?>
 
  <?php if ($this->caption): ?>
    <figcaption class="caption lightgallery-caption-<?= $this->id ?>" itemprop="caption"><?= $this->caption ?></figcaption>
  <?php endif; ?>
 
</figure>