Im Rahmen eines kleinen TYPO3-Projekts stand ich vor folgendem Problem:
Um dem Kunden die Möglichkeit zu geben, bestimmte Daten und ein Bild in einer bestimmten Form einzugeben, erstellte ich ein Flexibles Inhaltselement mit Templavoila. Hier konnte der Kunde auch ein Bild hinzufügen. Dieses sollte im Frontend dann mit einem Lightbox-Effekt vergrössert dargestellt werden.
Templavoila bietet soweit ich weiß keine Möglichkeit, diesen Effekt „automatisch“ zu integrieren, deshalb ist hier ein wenig Handarbeit angesagt. Man muss die XML-Konfiguration des FCE (flexible Content Element) editieren:
Im Originalzustand steht innerhalb der XML-Konfiguration ein Abschnitt <Typoscript>, der ungefähr so aussieht:
< ![CDATA[ 10 = IMAGE 10.file.XY = 130,95 10.file.import = uploads/tx_templavoila/ 10.file.import.current = 1 10.file.import.listNum = 0 10.file.maxW = 130 10.file.minW = 130 10.file.maxH = 95 10.file.minH = 95 ]]>
Hier muss dann der Code ergänzt werden, dass er wie folgt aussieht:
< ![CDATA[ 10 = IMAGE 10.file.XY = 130,95 10.file.import = uploads/tx_templavoila/ 10.file.import.current = 1 10.file.import.listNum = 0 10.file.maxW = 130 10.file.minW = 130 10.file.maxH = 95 10.file.minH = 95 // ab hier manuell eingefügter Code für Klickvergrössern mit Lightbox 10.imageLinkWrap = 1 10.imageLinkWrap { enable = 1 bodyTag = wrap = | width = 800m height = 600m JSwindow = 1 JSwindow.newWindow = 0 typolink.parameter.override.cObject = IMG_RESOURCE typolink.parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile typolink.ATagParams = rel="shadowbox[bilder]" } ]]>
Der Teil ab 10.imageLinkWrap ist dann also für den Lightbox-Effekt zuständig.
Durch shadowbox[bilder] erreiche ich, dass innerhalb der Lightbox zwischen mehreren Bilder auf der Seite navigiert werden kann. Wenn es nur ein Bild auf der Seite gibt, kann man auch rel=“shadowbox“ schreiben.
In diesem Beispiel wird die PMK Shadowbox für den Lightbox-Effekt verwendet.
Hi, verstehe ich das richtig? Das Bild, welches im Inhalt des FCE’s liegt, sollte auf Klick mit einer Lightbox vergrößert werden? Also ich benutze die perfectlightbox, damit geht das eigentlich original ohne Probleme…
Oder ich habs falsch verstanden 🙂
Huaba
Es geht darum, wenn man ein FCE erstellt, bei der ein User dann Daten z.B. in Textfelder eingeben kann, ohne einen RTE, wie z.B. in diesem Tutorial.
Normalerweise wird das Klickvergrößern und damit auch die Lightbox nicht unterstützt, und das muss dann „von Hand“ eingebaut werden.
Wenn du natürlich in das FCE ein Textfeld mit RTE einbaust, ist das unter Umständen etwas anderes, oder wenn der User innerhalb des FCEs beliebige Inhaltselemente anlegen kann. Ich meinte aber etwas anderes.
hallo,
ich habe unter http://webdesign-forum.net/Thread-flexibles-Inhaltselement?pid=1951#pid1951 ein paar wichtige Fragen hierzu. schau dir das mal bitte an.
DANKE
scholzi 😉
Hallo Wolfgang,
zunächst einmal vielen Dank für Deine tollen Tutorials.
Ich verwende oben beschriebene Lösung, habe aber ein Problem bei dem Du mir vllt. helfen kannst.
Ich versuche das FCE dahingehend zu verändern, dass zu dem Bild das sich in der Shadowbox öffnet, eine Bildbeschreibung angezeigt wird. Diese müsste als titel-Attribut an den Link angehängt werden. Ich habe es bereits über ein zusätzliches Attribut-Feld im FCE versucht, habe aber nichts worauf ich es mappen könnte, da Link und Bild über ein und dasselbe Element erzeugt werden. Hier mal der HTML-Code wie er am Ende aussehen sollte.
FARBNAME
Toll wäre natürlich, wenn FARBNAME nur über ein Fled gepflegt werden müsste.
Auf die Schnelle fällt mir dazu nichts ein. Aber ein Vorschlag: beschreibe das Problem doch in unserem Forum, vielleicht fällt einem anderen User etwas dazu ein.
http://webdesign-forum.net
Danke für die schnelle Reaktion, werd ich machen.
Entschuldigung, dass ich nicht selbst drauf gekommen bin ins Forum zu schauen, dort stand fast die Lösung, siehe http://webdesign-forum.net/Thread-Wie-weise-ich-einem-FCE-einen-Lightbox-Effekt-zu
Und hier noch meine Lösung:
Titel-Tag des Links und Bildes werden über das gleiche FCE-Feld befüllt, ebenfalls der Alt-Tag des Bildes.
10.titleText.field = field_farbname // Bildtitel hinzufügen und aus anderem FCE-Feld lesen
10.altText.field = field_farbname // Alternativtext hinzufügen und aus anderem FCE-Feld lesen
10 = IMAGE
10.file {
XY = 130,130
import = fileadmin/media/Farbmuster/
import.current = 1
import.listNum = 0
width = 130c // Thumbnails passend zuschneiden
height = 130c
format = jpg
quality = 90
}
10.imageLinkWrap = 1
10.imageLinkWrap {
enable = 1
typolink {
parameter.cObject = IMG_RESOURCE
parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
parameter.cObject.file.maxW = 400 // maximale Breite des großen Bildes
parameter.cObject.file.maxH = 400 // maximale Höhe des großen Bildes
title.field = field_farbname // Bildtitel auch als Linktitel definieren (für Text in Lightbox)
title.split.token.char = 10
title.split.returnKey.data = register : IMAGE_NUM_CURRENT
ATagParams = rel=“shadowbox[farben]“
ATagParams.insertData = 1
}
}
Ah, okay, gut. Das werde ich mir merken! 😉
Hallo Wolfgang,
ich grabe diesen alten Beitrag nochmal aus. Erstmal vielen Dank für die super Tutorials.
Ich habe FCE mit der Möglichkeit mehrere Bilder per Lightbox anzuzeigen.
Wenn ich jetzt aber dieses FCE mehrmals auf der Seite einbinde gehören alle Bilder zur gleichen Gruppe.
Ist es möglich für den rel-Tag in jedem FCE einen eindeutigen Wert anzugeben?
Vielen Dank schonmal