Eine Fotostrecke mit Typo3-Boardmitteln in 15 Minuten
Etwas Javascript, CSS und das Auslesen der Content-ID für einen simplen Element-Wrap per Typoscript reichen aus. Zusammen mit der Lightbox oder Shadowbox lässt sich so im Handumdrehen eine schöne kleine Fotogalerie als Fotostrecke erstellen:
Und so einfach geht´s
Als erstes definieren wir uns ein neues Rahmen-Element mit der Bezeichnung 'Bildergalerie / Fotostrecke'. Dazu einfach im TyoscriptConfig der Seite (Page TSCONFIG) folgende Zeile einfügen:
1. # neues Element
TCEFORM.tt_content.section_frame { addItems.104 = Bildergalerie / Fotostrecke }
Im Typoscript der Website definieren wir einen neuen Wrap für diesen Rahmen-Typ:
2. # Rahmentyp 104 definieren
tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
key.field = section_frame
104 = TEXT
104.value = <div class="imagegallery" id="gallery{field:uid}"> | <script language="javascript" src="hier_pfad_zum_javascript-file/gallery.js"></script><script language="javascript"> writeGalleryViewLink('gallery{field:uid}'); </script></div>
104.insertData = 1
}
3. # etwas Javascript und CSS
Das Javascript baut uns den Link unterhalb der Fotostrecke und liest dazu einfach den ersten von der Lightbox/Shadowbox-Extension erzeugten rel-Link aus. Das CSS formatiert uns den Image-Container mit fester Breite und Höhe so, dass überlaufende Bilder einfach ausgeblendet werden. Breite und Höhe des Containers lassen sich flexibel im CSS anpassen, je nach gewünschter Größe der Fotostrecke.
4. # Inhaltselement Text/Bild anlegen
Nun einfach noch auf der gewünschten Seite ein Inhaltselement vom Typ 'Text mit Bild' einfügen, Bilder hinzufügen, Höhe der Bilder (=Fotostrecke) angeben und den Haken bei 'Klick vergrößern' setzen. Fertig!
Hier nun noch die Beispieldateien für CSS und Javascript zum herunterladen:
Viel Spaß beim Ausprobieren und Verwenden. Bei Fragen einfach fragen.