Durch Neuerungen in TYPO3 4.5 ist es einfacher geworden, die integrierte „Enlarge on Click“ Funktion als Lightbox umzusetzen. Hier ist nun eine kurze Anleitung, wie man eine solche Funktion umsetzen kann und dabei sogar ohne Extension auskommt.

Um Bilder per Klick größer anzeigen zu lassen, gibt einem TYPO3 die Möglichkeit, bei den Content-Elementen Bild bzw. Text/Bild die Funktion „Enlage on Click“ zu setzen. Dies veranlasst TYPO3, bei einem Klick auf ein Bild dieses in einem Popup in der Originalgröße anzuzeigen. Eine nicht ganz zeitgemäße Funktion.

Häufiger wird deswegen diese Funktion umgebaut, so dass die größere Ansicht des Bildes in einer Lightbox angezeigt wird. Hierfür hat man früher häufig Extensions wie beispielsweise „perfect_lightbox“ eingesetzt. Durch Erweiterungen an den TypoScript-Eigenschaften einer Image-Resource ist die Verwendung einer Extension nun nicht mehr nötig.

Auswahl der Lightbox

Es gibt eine Vielzahl von JavaScript-Bibliotheken, welche unterschiedliche Implementierungen der Funktion einer vergrößerten Darstellung des Bildes innerhalb der Seite mit einem JavaScript-Popup, normalerweise „Lightbox“ genannt, vornehmen. Die meisten Bibliotheken funktionieren so, dass sie auf allen Links laufen, welche eine bestimmte CSS-Klasse gesetzt haben. Manche Implementierungen unterstützen darüber hinaus die Möglichkeit, die verschiedenen Lightbox-Bilder zu gruppieren, um diese innerhalb der Lightbox durchblättern zu können. Dies wird häufig mit dem rel-Attribut gruppiert.

Das Urgestein der Lightbox-Funktionen ist die JavaScript-Bibliothek Lightbox, welche der ganzen Funktion auch Ihren Namen gegeben hat. Diese identifiziert die Links über die Klasse lightbox und unterstützt das Gruppieren der Bilder über einheitliche rel-Attribute. Anhand dieser JavaScript-Klasse wollen wir die Beispiel-Implementierung vornehmen.

TypoScript-Konfiguration

Am einfachsten ist dabei die Arbeit über TypoScript-Konstanten, welche in der aktuellsten Version der CSS Styled Content enthalten sind. Hierbei kann man durch das Setzen der folgenden Einstellungen bereits die gewünschte Funktionalität verwenden:

styles.content.imgtext.linkWrap {
lightboxEnabled = 1
lightboxRelAttribute = lightbox{field:uid}
lightboxCssClass = lightbox
}


Wer hingegen nicht über die Konstanten arbeiten möchte, beispielsweise weil er am Rendering der Bilder in TYPO3 bereits einige Anpassungen gemacht hat, kann einfach die entsprechenden Einstellungen im Setup-Bereich des TypoScript-Templates vornehmen. Die benötigten Einstellungen sind:

tt_content.image.20.1.imageLinkWrap {
directImageLink = 1
linkParams.ATagParams.dataWrap = class="lightbox" rel="lightbox{field:uid}"
JSwindow = 0
}


Entscheidend ist dabei vor allem die TypoScript-Eigenschaft „directImageLink“, welche neu hinzugekommen ist und TYPO3 anweist, das Bild direkt zu verlinken. Über die „linkparams“ setzt man die benötigten CSS-Klassen. Diese Zeile muss also vorallem angepasst werden, wenn eine andere Lightbox-Klasse als die klassische Version verwendet wird.

Hinweis

Die obige Implementierung geht davon aus, dass alle Bilder eines Content-Elements zusammen gruppiert werden sollen. Häufig sollen aber auch alle Bilder einer Seite unabhängig vom Content Element gruppiert werden. Dies lässt sich ähnlich einfach mit folgender TypoScript-Zeile realisieren.

linkParams.ATagParams.dataWrap = class="lightbox" rel="lightbox{TSFE:id}"