Mit dem Einverständnis von Spooky poste ich hier die Lösung die er in meinem Auftrag entwickelt hat, vielleicht kann der/die ein oder andere diese Lösung auch gebrauchen.
Das Galerie Template:
PHP-Code:
<ul class="cols_<?= $this->perRow ?> inline">
<?php $i = 0; ?>
<?php foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): ?>
<?php if ($col->addImage): ?>
<li class="<?= $class ?> <?= $col->class ?>">
<figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
<?php if ($col->href): ?>
<a href="#g<?= $this->id ?><?= $i ?>"<?= $col->attributes ?> title="<?= $col->alt ?>"><?php $this->insert('picture_default', $col->picture); ?></a>
<?php else: ?>
<?php $this->insert('picture_default', $col->picture); ?>
<?php endif; ?>
<?php if ($col->caption): ?>
<figcaption class="caption"><?= $col->caption ?></figcaption>
<?php endif; ?>
</figure>
<div style="display:none">
<?php \Controller::addImageToTemplate($this, array(
'singleSRC' => $col->singleSRC,
'size' => 3 /* insert tl_image_size ID here */
)) ?>
<figure id="g<?= $this->id ?><?= $i ?>" class="fullsize">
<?= $this->insert('picture_default', $this->picture); ?>
</figure>
</div>
</li>
<?php ++$i; ?>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>
Das j_colorbox Template:
PHP-Code:
<?php
// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'assets/jquery/colorbox/'. $GLOBALS['TL_ASSETS']['COLORBOX'] .'/css/colorbox.min.css|static';
?>
<script src="<?= TL_ASSETS_URL ?>assets/jquery/colorbox/<?= $GLOBALS['TL_ASSETS']['COLORBOX'] ?>/js/colorbox.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$('a[data-lightbox]').map(function() {
$(this).colorbox({
// Put custom options here
loop: false,
rel: $(this).attr('data-lightbox'),
maxWidth: '95%',
maxHeight: '95%'
});
});
$('.ce_gallery ul.inline a[data-lightbox]').map(function() {
$(this).colorbox({
// Put custom options here
transition: 'none',
loop: false,
rel: $(this).attr('data-lightbox'),
maxWidth: '95%',
maxHeight: '95%',
inline: true,
scrolling: false
});
});
});
$(document).bind('cbox_complete', function() {
$content = $('#cboxLoadedContent');
$content.children('figure.fullsize').each(function() {
$figure = $(this);
if($figure.height() > $content.height()) {
var newWidth = ($figure.width() / $figure.height()) * $content.height();
$.colorbox.resize({
width: newWidth,
height: $content.height()
});
}
});
});
})(jQuery);
</script>
Wichtig:
Im Backend eine entsprechende Bildgrößeneinstellung anlegen und im Template einbinden.
Lesezeichen