Startseite » Gedanken, Notizen, Projektbeispiele, Tipps & Tricks ...


Kopieren Sie diesen Link in Ihren RSS-Reader

RSS valid feed Nachrichten
09.02.2010

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: 

Madeira im RegenMit dem Bus an den StrandVögel im MeeresgoldAm Ende des RegenbogensFlashing GrassMöwe und FotografMeeresfrucht
Weiches Wasser

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. 

Permalink | TrackbackTags:wrap, content, typo3, typoscript, fotogalerie, fotostrecke, css, javascript,

Fragen? ... für Fragen, Anregungen oder Bemerkungen bitte einfach eine Mail über das Kontaktformular senden.

Keine Antwort zu

Diesen Beitrag teilen