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:

Hier muss dann der Code ergänzt werden, dass er wie folgt aussieht:


	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.

9 Gedanken zu “Templavoila: Lightbox-Effekt in einem flexiblen Inhaltselement (FCE)”

  1. 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.

  2. 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.

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

  3. 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

TYPO3 9 LTS Videotraining

Das Videotraining zu TYPO3 9 LTS

Momentan in Vorbereitung

Klicke hier für weitere Infos zum neuen Videotraining!

close-link
In Vorbereitung: Das Videotraining zu TYPO3 9 LTS
Hier klicken für mehr Informationen!
close-image

YouTube aktivieren?

Auf dieser Seite gibt es mind. ein YouTube Video. Cookies für diese Website wurden abgelehnt. Dadurch können keine YouTube Videos mehr angezeigt werden, weil YouTube ohne Cookies und Tracking Mechanismen nicht funktioniert. Willst du YouTube dennoch freischalten?