gallery_creator template for contao 3.2

gc_default_extended.html5

<?php
/* CSS for the frontend-output */
$GLOBALS['TL_CSS'][] = 'system/modules/gallery_creator/assets/css/gallery_creator_fe.css';

/* javascript for the frontend-output */
$GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/gallery_creator/assets/js/gallery_creator_fe.js';
?>

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

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

       <ul class="list_albums">
<?php foreach ($this->arrAlbums as $Album): ?> 
              <li class="level_1 block"<?php echo $this->imagemargin ? 'style="'.$this->imagemargin.'"' : ''; ?>>
                     <div class="tstamp block"><p>[<?php echo $Album['event_date']; ?>]</p></div>
                     <div class="col_1">
                            <figure class="image_container" onmouseover="<?php echo  $Album['thumbMouseover']; ?>">
<?php if ($Album['href']): ?>
                                   <a href="<?php echo $Album['href']; ?>" title="<?php echo $Album['title']; ?>">
<?php endif; ?>
                                          <img src="<?php echo $Album['thumb_src']; ?>" width="<?php echo $Album['size'][0]; ?>" height="<?php echo $Album['size'][1]; ?>" alt="<?php echo $Album['alt']; ?>" class="<?php echo $Album['class']; ?>">
<?php if ($Album['href']): ?>
                                   </a>
<?php endif; ?>
                            </figure>
                     </div>
                     <div class="col_2">
                            <h2><?php echo $Album['name']; ?></h2>
<?php if ($Album['count']): ?>
                            <p class="count_pics"><?php echo $Album['count']; ?> <?php echo $GLOBALS['TL_LANG']['gallery_creator']['pictures']; ?></p>
                            <p class="visitors"><?php echo $Album['visitors']; ?> <?php echo $GLOBALS['TL_LANG']['gallery_creator']['visitors']; ?></p>
    
<?php endif; ?>
<?php if ($Album['count_subalbums']): ?>
                            <p class="count_pics"><?php echo $Album['count_subalbums']; ?> <?php echo $GLOBALS['TL_LANG']['gallery_creator']['subalbums']; ?></p>
<?php endif; ?>		
<?php if ($Album['comment']): ?>
                            <p class="album_comment"><?php echo $Album['comment']; ?></p>
<?php endif; ?>
                     </div>
              </li>
<?php endforeach; ?>
       </ul>
<?php endif; ?>	
</div>
<?php endif; ?>






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

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

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

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

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

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


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

<?php echo $this->pagination; ?>
<?php $col=0; ?>
<?php if ($this->arrPictures): ?>
<div id="galleryContainer" class="block">
<ul class="album_preview">
<?php foreach ($this->arrPictures as $Picture): ?>
       <li class="col_<?php echo $col; ?><?php echo ($col == 0 ? ' col_first' : ''); ?><?php echo ($col == $this->colsPerRow - 1 ? ' col_last' : ''); ?>">
              <figure<?php echo (strlen($Picture['cssID']) ? ' id="' . $Picture['cssID'] . '"' : ''); ?> class="image_container<?php echo strlen($Picture['cssClass']) ? ' ' . $Picture['cssClass'] : ''; ?>"<?php echo $this->imagemargin ? 'style="'.$this->imagemargin.'"' : ''; ?>>
<?php if ($Picture['href']): ?>
                     <a href="<?php echo $Picture['href']; ?>" <?php echo $Picture['lightbox']; ?> title="<?php echo $Picture['comment'] ? $Picture['comment'] : ($Picture['title'] ? $Picture['title'] : $Picture['filename']); ?>">
<?php endif; ?>
                            <img src="<?php echo $Picture['thumb_src']; ?>" width="<?php echo $Picture['size'][0]; ?>" height="<?php echo $Picture['size'][1]; ?>" alt="<?php echo $Picture['alt']; ?>" data-config="<?php echo $Picture['album_id']; ?>,<?php echo $Picture['id']; ?>">
<?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">
<?php echo $this->insertArticlePost; ?>
</div>
<!-- end articleBoxPost-->
<?php endif; ?>

</div>
<script>
    // Dollar Safe Mode
    (function ($) {
        window.addEvent('domready', function () {
            $$(".album_preview a").each(function (el) {
                el.href = 'javascript:void(0)';
                el.removeProperty('data-lightbox');
            });

            $$(".album_preview img").addEvent('click', function (event) {
                event.stopPropagation();
                var el = $(this);
                // get album-and image-id from the data-config property
                var arrDataConfig = el.getProperty('data-config').split(',');
                if (arrDataConfig.count < 2) return false;
                var albumId = arrDataConfig[0];
                var startId = arrDataConfig[1];
                // start ajax request
                startXhr(albumId, startId);
            });

            function startXhr(albumId, startImg) {
	     
	         var lightboxOptions = {
                    // Put custom options here
                    counterText: '<br>(Bild {x} von {y})',
                    buttonText: ['<big>&laquo; Zurück</big>','<big>Vorwärts &raquo;</big>','<big>Schliessen &times;</big>']
                };
		  
                var xhr = new Request.JSON({
                    url: 'ajax.php',
                    method: 'get',

                    onSuccess: function (responseText) {
                        if (responseText.arrImage != "") {
                            var responseArray = responseText.arrImage.split('***');
                            var imageArray = [];
                            var startIndex = 0;
                            responseArray.each(function (str, index) {
                                // eval server response
                                var arrImg = str.split('###');
                                if (arrImg[0] != "") {
                                    // fill the image array
                                    imageArray[index] = [arrImg[0], arrImg[1], ''];
                                    if (parseInt(arrImg[2]) == parseInt(startImg)) {
                                        startIndex = index;
                                    }
                                }
                            });
                            if (typeof Mediabox != "undefined") {
                                Mediabox.open(imageArray, startIndex, lightboxOptions);
                            }
                            if (typeof Slimbox != "undefined") {
                                Slimbox.open(imageArray, startIndex, lightboxOptions);
                            }
                        }
                    }
                });
                xhr.send('isAjax=1&action=<?php echo $this->elementType; ?>&id=<?php echo $this->elementId; ?>&LightboxSlideshow=true&albumId=' + albumId + '');
            }
        });
    })(document.id);
</script>

<?php endif; ?>

Mediabox template for contao gallery_creator extensions. The mediabox plugin travereses the whole album. Even if its images are hidden through the pagination option.