Grundsätzlich funktioniert die Galerie ja fast wie gewünscht.
Es gibt nur zwei Probleme, die ich nicht lösen kann.
Ansicht und Beschreibung hier:
Link entfernt
Javascript, j_colorbox.html5:
Code:
<?php
$GLOBALS['TL_CSS'][] = 'assets/colorbox/css/colorbox.min.css|static';
?>
<script src="<?= $this->asset('js/colorbox.min.js', 'contao-components/colorbox') ?>"></script>
<script>
(function($) {
$(document).ready(function() {
$('a[data-lightbox]').map(function() {
$(this).colorbox({
opacity: 0.6,
loop: false,
inline: true,
rel: $(this).attr('data-lightbox'),
maxWidth: '95%',
maxHeight: '95%'
});
});
});
})(jQuery);
</script>
Template Galerie 1:
HTML-Code:
<?php foreach ($this->boxes as $index => $box): ?>
<?php
$image = $this->getImageObject($box->image, $this->size);
$boxid = $this->id."_box".$index;
?>
<?php if ($index === 0): ?>
<a href="#<?php echo $boxid ?>" data-lightbox="<?php echo $this->id ?>">
<?php else: ?>
<a href="#<?php echo $boxid ?>" data-lightbox="<?php echo $this->id ?>" style="display:none">
<?php endif ?>
<div id="<?php echo $boxid ?>">
<?php $this->insert('picture_default', $image->picture) ?>
<h3><?php echo $box->headline ?></h3>
<?php echo $box->text ?>
</div>
</a>
<?php endforeach ?>
Template Galerie 2:
HTML-Code:
<a href="#<?php echo $this->id."_box0" ?>" data-lightbox="<?php echo $this->id ?>">
Trigger Lightbox
</a>
<div style="display:none">
<?php foreach ($this->boxes as $index => $box): ?>
<?php
$image = $this->getImageObject($box->image, $this->size);
$boxid = $this->id."_box".$index;
?>
<a href="#<?php echo $boxid ?>" data-lightbox="<?php echo $this->id ?>">
<div id="<?php echo $boxid ?>">
<?php $this->insert('picture_default', $image->picture) ?>
<h3><?php echo $box->headline ?></h3>
<?php echo $box->text ?>
</div>
</a>
<?php endforeach ?>
</div>
Danke und viele Grüße
Andreas
Lesezeichen