ce_gc_default_colorbox_multipage.html5 for gallery_creator_bundle 1.2.0 tested on contao 4.7

ce_gc_default_colorbox_multipage.html5

<?php
/* CSS for the frontend-output */
//$GLOBALS['TL_CSS'][] = 'bundles/markocupicgallerycreator/css/gallery_creator_fe.css';
?>

<?php if (!\Input::get('items')): ?>
<!-- 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 row">
<?php foreach ($this->arrAlbums as $Album): ?> 
              <li class=" col-md-6 col-lg-4 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" onmouseover="<?= $Album['thumbMouseover'] ?>">
<?php if ($Album['href']): ?>
                                   <a href="<?= $Album['href'] ?>" title="<?= $Album['title'] ?>">
<?php endif; ?>
                                       <?php $this->insert('picture_default', $Album['picture']); ?>
<?php if ($Album['href']): ?>
                                   </a>
<?php endif; ?>
                            </figure> 
                     </div>
                     <div class="col_2">
<?php if ($Album['href']): ?>
                        <a href="<?= $Album['href'] ?>" title="<?= $Album['title'] ?>">
<?php endif; ?>
                            <h2><?= $Album['name'] ?></h2>
<?php if ($Album['href']): ?>
                        </a>
<?php endif; ?>

<?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>
<?php endif; ?>






<?php if (\Input::get('items')): ?>
<!-- gallery_creator - album preview -->
<div class="<?= $this->class ?> gallery_creator block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>

<?php if ($this->insertArticlePre):?>
<!-- articleBoxPre-->
<div id="articleBoxPre" class="block">
<?= $this->insertArticlePre ?>
</div>
<!-- end articleBoxPre-->
<?php endif; ?>

<?php if ($this->headline): ?>
<<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
<?php endif; ?>

<?php if ($this->backLink): ?>
<div class="backLink"><a href="<?= $this->backLink ?>" title="zurück"><?= $GLOBALS['TL_LANG']['gallery_creator']['back_to_general_view'] ?></a></div>
<?php endif; ?>
	
<?php if ($this->Albumname): ?>
<h2><?= $this->Albumname ?></h2>
<?php endif; ?>

<?php if ($this->subalbums): ?>
<div class="subalbums">
	<h3><?= $GLOBALS['TL_LANG']['gallery_creator']['subalbums_of'] ?>: <?= $this->Albumname ?></h3>

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


<?php if ($this->albumComment): ?>
<div class="album_comment">
       <?= $this->albumComment ?>
</div>
<?php endif; ?>

<?= $this->pagination ?>
<?php $col=0; ?>
<?php if ($this->arrPictures): ?>
<div id="galleryContainer" class="block">
<ul class="album_preview row">
<?php foreach ($this->arrPictures as $Picture): ?>
		<li class="col-md-4 col-lg-3 col_<?= $col ?><?= ($col == 0 ? ' col_first' : '') ?><?= ($col == $this->colsPerRow - 1 ? ' col_last' : '') ?>">
              <figure<?= (strlen($Picture['cssID']) ? ' id="' . $Picture['cssID'] . '"' : '') ?> class="image_container<?= strlen($Picture['cssClass']) ? ' ' . $Picture['cssClass'] : '' ?>"<?= $this->imagemargin ? ' style="'.$this->imagemargin.'"' : '' ?>>
<?php if ($Picture['href']): ?>
                     <a href="<?= $Picture['href'] ?>" <?= $Picture['lightbox'] ?> title="<?= $Picture['comment'] ? $Picture['comment'] : ($Picture['title'] ? $Picture['title'] : $Picture['filename']) ?>" data-config="<?php echo $Picture['album_id']; ?>,<?php echo $Picture['id']; ?>">
<?php endif; ?>
            <?php $this->insert('picture_default', $Picture['picture']); ?>
<?php if ($Picture['href'] != ''): ?>
                     </a>
<?php endif; ?>
              </figure>				
       </li>
<?php $col++;?>
<?php if ($col == $this->colsPerRow) $col=0; ?>
<?php endforeach;?>
</ul>
</div>
<?php endif;?>

<?php if ($this->insertArticlePost):?>
<!-- articleBoxPre-->
<div id="articleBoxPost" class="block">
<?= $this->insertArticlePost ?>
</div>
<!-- end articleBoxPost-->
<?php endif; ?>

</div>
<div id="hiddenLinks" style="display:none"></div>
<script>
    $(document).ready(function() {
        if(jQuery('.album_preview a[data-config]').length < 1)
        {
            return;
        }
        
        // Remove lightbox attribute
        jQuery(".album_preview a").removeAttr('data-lightbox');

        // Prevent default
        jQuery(".album_preview a").click(function(event) {
            event.preventDefault();
            event.stopPropagation();
        });

        var elFirst = jQuery('.album_preview a[data-config]').first();
        var arrData = jQuery(elFirst).data('config').split(',');
        var albumId = arrData[0];
        var href = location.pathname.substring(1) + '?isAjax=1&getImagesByPid=true&pid=' + albumId;
        $.getJSON(href, function(data) {
            if (data.src.length < 1) {
                return;
            }

            jQuery.each(data.src, function(index, value) {
                // Add hidden links
                $('#hiddenLinks').append('<a href="' + value["href"] + '" title="' + value["caption"] + '" data-image-id="' + value["id"] + '" data-lightbox="xhrLb' + value["pid"] + '"></a>');
                if (index + 1 === data.src.length) {
                    jQuery(".album_preview a[data-config]").click(function(event) {
                        var arrConfig = jQuery(this).data('config').split(',');
                        var imageId = arrConfig[1];
                        // Bypass lightbox trigger
                        jQuery('#hiddenLinks a[data-image-id="' + imageId + '"]').trigger('click');
                    });
                    // Colorbox
                    $('#hiddenLinks a[data-lightbox]').map(function() {
                        $(this).colorbox({
                            // Put custom options here
                            loop: false,
                            rel: $(this).attr('data-lightbox'),
                            maxWidth: '95%',
                            maxHeight: '95%'
                        });
                    });
                }
            });
        });
    });

</script>
<?php endif; ?>