TYPO3 Lightbox ohne Extension
Mit der TYPO3-Version 4.5 ist es einfacher geworden, auch ohne Extension eine Lightbox zum Vergrößern von Bildern einzubinden.
Beispiel (mit jQuery Fancybox)
Neue Eigenschaften "directImageLink" und "linkParams"
Die TypoScript-Funktion imageLinkWrap, mit der die Links um vergrößerbare Bilder erzeugt werden, hat mit der TYPO3-Version 4.5 zwei neue Eigenschaften erhalten: directImageLink und linkParams. Mit diesen neuen Eigenschaften können vergrößerbare Bilder in der Frontend-Ausgabe nun so gerendert werden, dass die meisten JavaScript Lightbox-Varianten auf den generierten HTML-Code angewendet werden können.
Das zu vergrößernde Bild wird bei der Einstellung directImageLink = 1 mit einem Link direkt zur großen Bild-Datei ausgegeben. Mit der Eigenschaft linkParams wird der Link mit passenden Attributen und Werten, z.B. class="lightbox" und rel="lightbox123" versehen. Das rel-Attribut wird im Beispiel mit der UID des Inhaltselements versehen, um die Bilder für die Navigation in der Lightbox zu gruppieren.
TypoScript Setup
tt_content.image.20.1.imageLinkWrap {
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:
TypoScript Konstanten (alternativ zum TS-Setup)
styles.content.imgtext.linkWrap {
lightboxEnabled = 1
lightboxRelAttribute = lightbox{field:uid}
lightboxCssClass = lightbox
}Größe der verlinkten Bilder
Auch die Breite und Höhe der großen Bildansicht kann eingestellt werden, wobei die Einstellung einer Maximalgröße mit TYPO3 Version 4.5.0 nicht wie gewünscht funktioniert und auch kleinere Originalbilder vergrößert werden. Deshalb ist es empfehlenswert, diesen Eigenschaften leere Werte zuzuweisen, sodass immer die originale Bilddatei verlinkt wird.
tt_content.image.20.1.imageLinkWrap.height =
tt_content.image.20.1.imageLinkWrap.width =
Grundsätzlich kann das Generieren von Bilddateien, die größer als die originale Bilddatei sind, auch über den TYPO3-Konfigurationsparameter $TYPO3_CONF_VARS['GFX']['im_noScaleUp'] = '1' im Install-Tool oder über den TypoScript-Parameter config.noScaleUp = 1 verhindert werden.
Lightbox für tt_news
Um die Lightbox entsprechend auch für vergrößerbare Bilder in der Extension tt_news anzuwenden, kann das folgende Typoscript-Setup eingebunden werden.
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
Nun müssen noch die Dateien für die gewünschte Lightbox-Variante eingebunden werden. In diesem Fall das jQuery-Framework, das Lightbox-Plugin Fancybox mit zugehöriger CSS-Datei und eine eigene JavaScript-Datei zur Aktivierung und Konfiguration der Lightbox.
Die CSS-, JavaScript- und Bilddateien der Fancybox werden im Beispiel unterhalb des Verzeichnisses fileadmin/templates/js/fancybox abgelegt.
Die JavaScript-Dateien werden hier vor dem schließenden body-Tag eingebunden. Alternativ können sie auch im Seiten-Header eingebunden werden.
TypoScript Setup
page.includeJSFooterlibs {
# Include jQuery library
jQuery = fileadmin/templates/js/jquery-1.4.4.min.js
}
page.includeJSFooter {
# Easing plugin (optional)
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
# Custom javascript for activation and configuration
enable_fancybox = fileadmin/templates/js/enable_fancybox.js
}
page.includeCSS {
# CSS for fancybox
fancybox = fileadmin/templates/js/fancybox/jquery.fancybox-1.3.4.css
}Eigene JavaScript-Datei zur Aktivierung der Fancybox
In der JavaScript-Datei enable_fancybox.js wird das fancybox-Plugin für alle Links mit der Klasse lightbox aktiviert und eine beispielhafte Konfiguration angegeben.
JavaScript (enable_fancybox.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'
});
});