Tutorial: Lightbox „Fancybox” ohne Extension in TYPO3 4.5+ einbauen
In diesem Tutorial geht es um den Einbau einer Lightbox in TYPO3, ohne dabei eine TYPO3-Extension wie z.B. kj_imagelightbox2, perfectlightbox, … zu verwenden. Wer noch nicht weiß, was eine Lightbox macht, muss nur auf ein Bild in diesem Artikel klicken. Bisher hat TYPO3 eine Klick-Vergrößerungs-Funktion bei den Content-Elementen „Text und Bilder” und „Bilder” über die Funktion showpic.php ermöglicht. Es wurde mit JavaScript aber nur ein neues Browserfenster geöffnet und man hatte nicht die Möglichkeit bei dem vergrößertem Bild zwischen weiteren Bildern des Artikels hin- und her zu wechseln.
Seit der TYPO3 Version 4.5 ist es nun dank neuer Eigenschaften bei dem cObject Image möglich, sowohl dem Link-Tag neue Parameter als auch den Pfad zur Orginaldatei zu übergeben.
Mit der Einstellung directImageLink = 1 wird der Pfad zum Orginalbild direkt verwendet.
Damit die Bilder gezielt über Javascript angesprochen werden können, müssem jedem Link-Tag beispielsweise die zwei Parameter class=”lightbox” und rel="lightbox1" zugewiesen werden. Mit der Eigenschaft linkParams wird genau dieses erreicht. Die CSS-Klasse ermöglicht es dem Lightbox-Script, alle Bilder herauszusuchen, auf die der Lighbox-Effekt angewendet werden soll. Das rel-Attribut wird in diesem Beispiel mit der UID des Inhaltselements versehen, um alle Bilder des Inhaltselements für die Navigation in der Lightbox zu gruppieren.
TypoScript Setup (in das Root-Template eintragen)
JSwindow = 0
directImageLink = 1
linkParams.ATagParams {
dataWrap = class="lightbox" rel="lightbox{field:uid}"
}
}
Alternativ zum Eintrag ins TypoScript-Setup können die Werte auch über die folgenden CSS-Styled-Content-Konstanten gesetzt werden. Bei Verwendung des Konstanten-Editors löschen sie bitte die eckigen Klammern, da die hier eingesetze Lightbox „Fancybox” ansonsten JavaScript-Fehler ausgibt und somit nicht funktioniert.
TypoScript Konstanten (alternativ zum TS-Setup)
lightboxEnabled = 1
lightboxRelAttribute = lightbox{field:uid}
lightboxCssClass = lightbox
}
Größe der verlinkten Bilder
Damit TYPO3 kleine Bilder in der Lightbox nicht hochskaliert, können Sie entweder die Orginaldateien mit den folgenden 2 Zeilen verwenden:
oder im TS-Setup config.noScaleUp = 1 verwenden.
Lightbox für die TYPO3-Extension News (tt_news)
Sie können den Lightbox-Effekt auch bei tt_news (und bei anderen Erweiterungen, die imageLinkWrap einsetzen) aktivieren. Am einfachsten findet man die zu verändernden Stellen im TypoScript-Objectbrowser → Setup im Bereich plugin.[extensionkey]. …
TypoScript-Setup für Lightbox in tt_news
JSwindow = 0
directImageLink = 1
linkParams.ATagParams.dataWrap = class = "lightbox" rel="lightbox{field:uid}"
height =
width =
}
Einbinden der Lightbox jQuery Fancybox
Bei der Auswahl der Lightbox sollten Sie darauf achten, dass Sie nicht unbedingt mehrere JavaScript-Frameworks einsetzen – größere Downloads und mögliche Konflikte wären die Folge. Als Beispiel soll hier daher das auf jQuery aufbauende Fancybox dienen, dass Sie unter der URL http://fancybox.net/ herunterladen können.
Im entpackten Zip-Archiv finden Sie einen Ordner fancybox, den Sie im Ordner fileadmin/templates/js/ hochladen können. Dieser enthält die CSS-, JavaScript und Bilddateien der Fancybox.
Im head-Bereich der Webseite muss das CSS eingefügt werden:
Die JavaScript-Dateien werden für einen schnelleren Seitenaufbau vor dem schließenden body-Tag eingebunden. Sinnvoll ist es, jQuery über die URL http://jquery.com aktuell herunterzuladen. Diese ist im folgenden Beispiel schon eingebunden:
TypoScript Setup
jquery = fileadmin/templates/js/libs/jquery-1.6.2.min.js
# Optionales Plugin für mehr Effekte als "swing" & "linear"
jquery_easing = fileadmin/templates/js/fancybox/jquery.easing-1.3.pack.js
# Fancybox Plugin
fancybox = fileadmin/templates/js/fancybox/jquery.fancybox-1.3.4.pack.js
# Initialisierung des Plugins
enable_fancybox = fileadmin/templates/js/script.js
}
Eigenes JavaScript zur Aktivierung der Fancybox
In der von Ihnen anzulegenden JavaScript-Datei script.js wird der Lightbox-Effekt für alle Links mit der Klasse „lightbox“ aktiviert. Für weitere Konfigurationsmöglichkeiten der Fancybox besuchen Sie bitte die Website http://fancybox.net/api/.
JavaScript (script.js)
jQuery(document).ready(function() {
jQuery('a.lightbox').fancybox({
'titlePosition' : 'inside',
'overlayColor' : '#aaa',
'overlayOpacity' : '0.5',
'hideOnContentClick' : 'true',
'speedIn' : '100',
'speedOut' : '100',
'transitionIn' : 'fade',
'transitionOut' : 'elastic'
});
});