Bis Typo3 4.4 musste man das Lightbox / Fancybox Feature für eine Klickvergrößerung (enlarge on click) noch per Erweiterung einbinden oder sich etwas über Typoscript zusammen stricken (Bildergallery ohne Erweiterung in Typo3 einbinden), um die vergrößerten Bilder nicht im üblich Popup anzeigen zu lassen. Ab der neueste Typo3 Version 4.5 kann man das ganze nun direkt mit onboard Mitteln lösen.
Typoscript: Aktivieren per Konstanten
Zwar soll man die Aktivierung des Lightbox Features auch direkt im Typoscript Template (TYPO3 Lightbox ohne Extension) machen können, allerdings konnte ich das nicht so recht nachvollziehen. Der Object-Browser zeigte mir hier keine derartige Funktionen, also packen wir dann alles in die Konstanten:
styles.content.imgtext.linkWrap {
lightboxEnabled = 1
lightboxRelAttribute = lightbox{field:uid}
lightboxCssClass = lightbox
}tt_news und Lightbox
Auch für tt_news Beiträge lässt Lightbox einbinden:
plugin.tt_news.displaySingle.image.imageLinkWrap {
JSwindow = 0
directImageLink = 1
linkParams.ATagParams {
dataWrap = class="lightbox" rel="lightbox{field:uid}"
}
height = {$styles.content.imgtext.linkWrap.height}m
width = {$styles.content.imgtext.linkWrap.width}m
}Bisher habe ich immer folgendes genutzt:
#tt_news displaySingle image handler
plugin.tt_news.displaySingle.image.imageLinkWrap {
JSwindow >
bodyTag >
height >
wrap >
width >
typolink {
target = {$styles.content.links.target}
extTarget = {$styles.content.links.extTarget}
# Link mit Pfad und Name zum Originalbild oder
# Pfad und Name des umgerechneten Lightbox Bild
parameter.cObject = IMG_RESOURCE
parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
# Maximale Größe des Bildes anpassen; (sonst wird Link zum orignal ausgegeben)
parameter.cObject.file.maxW = {$styles.content.imgtext.linkWrap.width}
# rel-Attribut hinzufügen, für Galerie-Funktion
ATagParams = class="lightbox" rel="gallery" title="{field:title}"
ATagParams.insertData = 1
}
} Aktivieren von Fancybox auf den gewünschten Bildern.
Wie üblich muss über die "CSS Klassen" dann noch ein Lightbox Plugin (The Lightbox Clones Matrix), wie zum Beispiel Fancybox aktiviert werden.
jQuery(document).ready(function(){
// Fancybox Image
jQuery("a.lightbox").fancybox({
'zoomSpeedIn':500,
'zoomSpeedOut':500,
'transitionIn':'elastic',
'titlePosition':'over',
'overlayShow': true
});
});Optimierung: Bilder Attribute
Wie bei meinem bisher genutzten Typoscript zur Einbindung von Fancybox, ist es zwecks Suchmaschinenoptimierung sinnvoll die Attribute alt und title zu befüllen. Dazu wird einfach der Titel / Header vom übergeordneten Content-Element genutzt, wenn nicht explizit ein Wert eingetragen wurde.
Auch noch Hilfreich ist config.meaningfulTempFilePrefix = 50, zum Anzeigen der originalen Bildernamen anstatt nur deren IDs.
tt_content.image.20.1.altText.field = altText // imagecaption // header tt_content.image.20.1.titleText.field = titleText // imagecaption // header
Disqus - noscript
der neue Codeschnipsel, den Du noch nicht getestet hattest funktioniert ganz gut, nur hast Du noch einen kleinen Fehler drin, bei
class = lightbox"
fehlt das erste Anführungszeichen.