Templavoila: Lightbox-Effekt in einem flexiblen Inhaltselement (FCE)

Templavoila: Lightbox-Effekt in einem flexiblen Inhaltselement (FCE)

TemplaVoila, Lightbox in einem FCEIm 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.

Schlagwörter: , ,

Dieser Beitrag hat 9 Kommentare

  1. Huaba 25 Nov 2010 Antworten

    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

    1. Wolfgang Wagner 25 Nov 2010 Antworten

      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.

  3. Christian 18 Apr 2011 Antworten

    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.

  4. Christian 18 Apr 2011 Antworten

    Danke für die schnelle Reaktion, werd ich machen.

    1. Christian 18 Apr 2011 Antworten

      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
      }
      }

  5. Andre 22 Mrz 2013 Antworten

    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

Schreibe einen Kommentar