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 (Contao 4):

<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>