Galerie mit nur einem Vorschaubild

Aus Contao Community Documentation


betrifft
Contao Version Alle Versionen


Obwohl für Alle Versionen angegeben, kann eine leichte Anpassung bei älteren Versionen als Contao 3.2.0 notwendig sein.

"Warnhinweis"


Galerie mit nur einem Vorschaubild

Ziel

Als Ergebnis erhält man im FE eine Galerie, welche das erste Bild als Vorschaubild präsentiert. Bei aktiviertem Javascript wird das große Bild bei Mausklick in einer Lightbox geöffnet. In der Lightbox kann man nun durch alle Bilder der Galerie blättern.

Umsetzung

Die Umsetzung erfolg mittels einer einfachen Erstellung, Umbenennung und Anpassung des Templates gallery_default.html5.

Template

Hier ist das Template gallery_single_image.html5. Bei einer XHTML-Ausgabe muss das Tag figure durch div ersetzt werden.

<?php
 
/**
 * @filename gallery_single_image.html5
 * @version Contao 3.2.0
 * @license LGPL
 * @description A gallery template that only loads the first thumb but shows all pics in mediabox or colorbox.
                Check 'Full-size view/new window' in your gallery.
                Don't forget to load moo_mediabox or j_colorbox in your layout.
 */
 
?>
 
<div class="gallery-single-image">
<?php $i = 1; foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): ?>
<?php if ($col->addImage): ?>
<?php if ($i == 1): ?>
<figure class="image_container">
<?php endif; ?>
<?php if ($col->href): ?>
<a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><?php if ($i == 1): ?><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>"><?php endif; ?></a>
<?php endif; ?>
<?php if ($i == 1): ?>
</figure>
<?php endif; ?>
<?php endif; ?>
<?php $i++; endforeach; ?>
<?php endforeach; ?>
</div>

--Andreas Burg 01:01, 23. Nov. 2013 (CET)

Ansichten
Meine Werkzeuge

Contao Community Documentation

Meiner Meinung nach, sollten zu kleine Webspacepakete entweder Webspaß-Pakete (man beachte die Ironie) oder Horsting-Pakete heißen!

Sascha Müller
In anderen Sprachen
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge