TYPO3 Wissen – Lightbox ohne Extension
Lightboxen werden heutzutage auf sehr vielen Webseiten eingesetzt, um beim Klick-Vergrößern dem Betrachter eine besonders ansprechende Ansicht zu bieten. Die Verwendung ohne Extension wird dadurch ermöglicht, dass die TypoScript-Funktion imageLinkWrap, mit der die Links um vergrößerbare Bilder erzeugt werden, in der TYPO3-Version 4.5 zwei neue Eigenschaften erhalten hat, nämlich directImageLink und linkParams.
Bisher hat TYPO3 für die Klick-Vergrößerungs-Funktion showpic.php verwendet. Mit der Einstellung directImageLink = 1 wird der Pfad zum Orginalbild direkt verwendet. Damit die Bilder gezielt über Javascript angesprochen werden können, muss jedem Link-Tag bspw. 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)
tt_content.image.20.1.imageLinkWrap.JSwindow = 0
tt_content.image.20.1.imageLinkWrap.directImageLink = 1
tt_content.image.20.1.imageLinkWrap.linkParams.ATagParams {
dataWrap = rel="lightbox{field:uid}"
}Alternativ zum Eintrag ins TypoScript-Setup können die Werte auch über die folgenden CSS-Styled-Content-Konstanten gesetzt werden:
TypoScript Konstanten (alternativ zum TS-Setup)
styles.content.imgtext.linkWrap {
lightboxEnabled = 1
lightboxRelAttribute = lightbox{field:uid}
lightboxCssClass = lightbox
}Bei Verwendung des Konstanten-Editors löscht bitte die eckigen Klammern, da die hier eingesetzte Lightbox Fancybox ansonsten JS-Fehler ausgibt.
Größe der verlinkten Bilder
Damit TYPO3 kleine Bilder in der Lightbox nicht hochskaliert, könnt Ihr entweder die Originaldateien mit den folgenden zwei Zeilen
tt_content.image.20.1.imageLinkWrap.height =
tt_content.image.20.1.imageLinkWrap.width =oder im TS-Setup
config.noScaleUp = 1verwenden.
Lightbox für tt_news
Ihr könnt den Lightbox-Effekt auch bei tt_news (und bei anderen Erweiterungen, die imageLinkWrap einsetzen) aktivieren.
TypoScript Setup für Lightbox in tt_news
plugin.tt_news.displaySingle.image.imageLinkWrap {
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 solltet Ihr darauf achten, dass Ihr 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 Ihr unter fancybox.net herunterladen können. Im entpackten Zip-Archiv findet Ihr einen Ordner fancybox, den Ihr im Ordner fileadmin/templates/js/ hochladen könnt. Dieser enthält die CSS-, JS- und Bilddateien der Fancybox. Im head-Bereich der Webseite muss das CSS eingefügt werden:
page.includeCSS {
fancybox = fileadmin/templates/js/fancybox/jquery.fancybox-1.3.4.css
}Die JavaScript-Dateien werden für einen schnelleren Seitenaufbau vor dem schließenden body-Tag eingebunden. Sinnvoll ist es, jQuery über jquery.com aktuell herunterzuladen. Dieses ist im folgenden Beispiel schon eingebunden:
TypoScript Setup
page.includeJSFooter {
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 Euch anzulegenden JavaScript-Datei script.js wird der Lightbox-Effekt für alle Links mit der Klasse „lightbox“ aktiviert.
JavaScript (script.js)
jQuery.noConflict();
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'
});
});
Dieser Beitrag ist ein Artikel aus dem aktuellen Mittwald Kundenmagazin. Wenn Ihr mehr davon lesen möchtet, könnt Ihr das Magazin auf unserer Webseite kostenlos bestellen oder als PDF herunterladen.
Kommentare
Hallo Stefan und Lars,
es kann leider viele Ursachen dafür geben, warum ein bestimmter TypoScript-Befehl nicht greift. Ohne etwas Genaues gesehen zu haben, kann man da leider nicht viel sagen. Wir können uns das gerne einmal anschauen, dafür schickt Ihr am besten Eure Seiten mit Benutzerdaten an die E-Mail Adresse supportmittwald.de
Viele Grüße Philipp
Hallo an alle,
bei mir werden die JS Dateien nicht alle eingebunden.
page.includeJSFooter {
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
}
Es werden nur die beiden Dateien im Quelltext generiert.
jquery_easing = fileadmin/templates/js/fancybox/jquery.easing-1.3.pack.js
fancybox = fileadmin/templates/js/fancybox/jquery.fancybox-1.3.4.pack.js
Es sollten doch alle vier Dateien eingebunden sein oder?
Hallo zusammen,
ich habe alle Skripte eingebunden und Dateien hochgeladen. Es werden auch keine weiteren/anderen Skripte eingebunden.
Und trotzdem funktioniert die Lightbox nicht.
Habt ihr noch eine Idee, was ich falsch gemacht habe?
Vielen Dank!
Gruß,
Lars
Hallo,
stehe gerade vor der Frage, wie man das Script so erweitern kann, das auch Inhaltselemente in der Lightbox angezeigt werden können. Ich denke da z.B. powermail-Formular. Extensions dazu gibt es, allerdings bringt jede ihr eigenes Jquery mit. Da gibt es schon mal Konflikte.
Hat jemand eine Idee?
LG Andreas
Funktioniert gut, aber wie kann ich bei den News den alt-tag,title-tag oder caption auslesen?
Grüße
Ange
Danke Marco,
genau das hatte mir gefehlt.
Jetzt läuft es.
Gruß Andreas
web-aktiv.com – TYPO3 Lösungen
Im ersten Typoscript-Setup fehlt die Klasse.
dataWrap = class=“lightbox“ rel=“lightbox{field:uid}“
Kommentar hinzufügen