Galerie mit nur einem Vorschaubild: Unterschied zwischen den Versionen
Aus Contao Community Documentation
K |
K (→Ziel) |
||
| Zeile 12: | Zeile 12: | ||
==Ziel== | ==Ziel== | ||
| − | Als Ergebnis erhält man im FE eine Galerie, welche das erste Bild als Vorschaubild präsentiert. Bei aktiviertem Javascript wird das Bild in einer ''Lightbox'' geöffnet. In der ''Lightbox'' kann man nun durch alle Bilder der Galerie blättern. | + | 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== | ==Umsetzung== | ||
Version vom 23. November 2013, 01:05 Uhr
| betrifft | |
|---|---|
| Contao Version | Alle Versionen |
Inhaltsverzeichnis
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 * @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)
