ce_gc_colorbox_contao_4.html5

<!-- gallery_creator - album list -->
<div class="<?= $this->class ?> gallery_creator block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
    <?php if ($this->headline): ?>
        <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
    <?php endif; ?>

    <?= $this->pagination ?>
    <?php if (count($this->arrAlbums)>0): ?>

        <ul class="list_albums">
        <?php foreach ($this->arrAlbums as $Album): ?>
            <li class="level_1 <?= $Album['cssClass'] ?> clearfix block"<?= $this->imagemargin ? 'style="'.$this->imagemargin.'"' : '' ?>>
                <div class="tstamp block"><p>[<?= $Album['event_date'] ?>]</p></div>
                <div class="col_1">
                    <figure class="image_container" data-album="<?= $Album['id'] ?>" onmouseover="<?= $Album['thumbMouseover'] ?>">
                    <?php $this->insert('picture_default', $Album['picture']); ?>
                    </figure>
                </div>
                <div class="col_2">
                    <h2><?= $Album['name'] ?></h2>
                    <?php if ($Album['count']): ?>
                    <p class="count_pics"><?= $Album['count'] ?> <?= $GLOBALS['TL_LANG']['gallery_creator']['pictures'] ?></p>
                    <p class="visitors"><?= $Album['visitors'] ?> <?= $GLOBALS['TL_LANG']['gallery_creator']['visitors'] ?></p>
                    <?php endif; ?>
                    <?php if ($Album['count_subalbums']): ?>
                        <p class="count_pics"><?= $Album['count_subalbums'] ?> <?= $GLOBALS['TL_LANG']['gallery_creator']['subalbums'] ?></p>
                    <?php endif; ?>
                    <?php if ($Album['comment']): ?>
                    <div class="album_comment"><?= $Album['comment'] ?></div>
                    <?php endif; ?>
                </div>
            </li>
        <?php endforeach; ?>
        </ul>
    <?php endif; ?>
</div>





<script>
jQuery(function ($) {
    $().ready(function () {

        // Load image-data from server
        $('.list_albums figure.image_container').each(function () {
            var albumId = $(this).attr('data-album');

            $.ajax({
                dataType: "json",
                url: $(location).attr('href'),
                data: {
                    'isAjax': true,
                    'getImagesByPid': true,
                    'pid': albumId
                },
                success: function (response) {
                    if (response.success == 'true' && response.src.length > 0) {
                        $('#gcColorboxContainer' + albumId).remove();
                        $('<div></div>').prop('id', 'gcColorboxContainer' + albumId).hide().appendTo('body');

                        $.each(response.src, function (index, aImg) {
                            var path = aImg['href'];
                            var title = aImg['caption'];
                            $('<a></a>').prop('href', path).attr('title', title).attr('data-lightbox', 'lb' + albumId).appendTo($('#gcColorboxContainer' + albumId));
                        });

                        $('#gcColorboxContainer' + albumId + ' a').colorbox({
                            loop: false,
                            rel: 'lb' + albumId,
                            maxWidth: '95%',
                            maxHeight: '95%',
                            preloading: true
                        });
                    }
                }
            });
        }).click(function (event) {
            event.stopPropagation();
            var albumId = $(this).attr('data-album');
            $('#gcColorboxContainer' + albumId + ' a').first().trigger('click');
        });
    });
});
</script>

Gallery Creator Bundle Template. Albenauflistung ohne Detailseite. Anstatt auf die Detailseite zu linken, öffnet sich die Colorbox und zeigt die Bilder des angewählten Albums.

https://github.com/markocupic/gallery-creator-bundle