The mediabox template for contao gallery_creator

ce_gc_mediabox.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']; ?>">

            <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']; ?>" data-config="<?php echo $Album["id"]; ?>">

        </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; ?>


<script>
    // Dollar Safe Mode
    (function ($) {
        window.addEvent('domready', function () {

            $$(".list_albums img").addEvent('click', function (event) {
                var el = $(this);
                var albumId = el.getProperty('data-config');
                startXhr(albumId);
            });

            function startXhr(albumId) {
                var xhr = new Request.JSON({
                    url: document.URL,
                    method: 'get',

                    onSuccess: function (responseText) {
                        if (responseText.arrImage != "") {
                            var responseArray = responseText.arrImage.split('***');
                            var imageArray = [];
                            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 (typeof Mediabox != "undefined") {
                                Mediabox.open(imageArray, 0, null);
                            }
                            if (typeof Slimbox != "undefined") {
                                Slimbox.open(imageArray, 0, null);
                            }
                        }
                    }
                });
                xhr.send('isAjax=1&LightboxSlideshow=true&albumId=' + albumId);
            }
        });
    })(document.id);
</script>