TYPO3 – How to: Bilder mit einer Lightbox öffnen

In einer modernen Internetseite darf heutzutage keine Lightbox mehr fehlen. Doch wie setzt man so eine Lightbox in TYPO3 um, sodass man im Backend selber entscheiden kann, wann sie aktiv sein soll und wann nicht.

Diese Funktion steht natürlich auch angelegten Redakteuren zur Verfügung.

In diesem Tutorial zeigen wir, wie man den „Klick vergrößern“ Button benutzt, um darüber seine Lightbox zu steuern.

In unserem Beispiel wollen wir die Fancybox benutzen, man kann aber dieses Tutorial auch auf andere Lightboxen anwenden.

Zunächst laden wir jQuery und die Fancybox von diesen Seiten herunter.

Als nächsten Schritt binden wir die Javascript- und die CSS-Dateien per Typoscript in den Internetauftritt ein (Achtung Pfade müssen angepasst werden!):

page.includeJS {
jquery = fileadmin/templates/jquery/jquery.js
fancy = fileadmin/templates/fancybox/jquery.fancybox.pack.js
}
page.includeCSS {
fancycss = fileadmin/templates/fancybox/jquery.fancybox.css
}

Tipp: Besser ist es jedoch das Javascript über die Funktion „includeJSFooter“ einzubinden, so wird das Javascript erst am Ende geladen und die Internetseite lädt dadurch schneller. Jedoch muss hier beachtet werden, dass der spätere Javascript-Aufruf nur funktioniert, wenn jQuery vorher geladen wurde.

page.includeJSFooter {
jquery = fileadmin/templates/jquery/jquery.js
fancy = fileadmin/templates/fancybox/jquery.fancybox.pack.js
}

Um die Fancybox nun auch von TYPO3 aus nutzen zu können, muss folgender Typoscript-Code in das Typoscript-Template geschrieben werden.

tt_content.image.20.1.imageLinkWrap {
 typolink >
 typolink {

   # Der Linkverweis wird auf den Pfad des ursprüchlingen Bildes gesetzt

   parameter.cObject = IMG_RESOURCE
   parameter.cObject.file {
     import.data = TSFE:lastImageInfo|origFile
   }

   # Liest die Bildbeschreibung aus

   title.cObject=TEXT
   title.cObject.field = imagecaption

   # (Für mehrere Bilder mit unterschiedlichem Titel) Splittet die Zeichenkette des Titels nach char = 10 (Zeilenumbruch)

   title.cObject.split.token.char = 10

   # Die Teile der aufgesplitteten Zeichenkette werden den einzelnen Bildern des Inhaltselements zugewiesen

   title.cObject.split.returnKey.data = register:IMAGE_NUM_CURRENT

   # Überprüft, ob die Bilder vergrößert werden sollen

   parameter.override {
     field = image_link
     listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
   }

   # Gruppiert Bilder eines Contentelementes zu einer Galerie

   ATagParams = class="fancybox" rel="group{field:uid}"
   ATagParams.insertData = 1
   ATagParams.if.isFalse < .parameter.override

   # Link setzen möglich, ohne Lightbox

   target = {$styles.content.links.target}
   extTarget = {$styles.content.links.extTarget}
   }
}

Zum Schluss muss man noch die Fancybox-Funktion aufrufen lassen. Diesen Codeblock kann man, wie in dem Beispiel, über Typoscript in seinen Internetauftritt einfügen oder wenn man eine zusätzliche Javascript-Datei verwendet, direkt in diese schreiben.

Achtung diese Funktion darf erst aufgerufen werden, wenn vorher JQuery schon eingebunden ist, da es ansonsten zu einem Javascript-Fehler kommt und die Fancybox nicht funktioniert.

# Ruft die Funktion auf, sobald die Seite fertig geladen ist

page.headerData.10 = TEXT
page.headerData.10 (
<script type="text/javascript">
   $(document).ready(function() {
       $(".fancybox").fancybox();
   });
)
</script>

Wir freuen uns über Kommentare und Ergänzungen :)

Author auf Google+:

  • Diesen Beitrag weiterempfehlen:

2 Gedanken zu „TYPO3 – How to: Bilder mit einer Lightbox öffnen

  1. Andreas

    Versuche das gerade mit TYPO3 6.2.x zu lösen, leider funktioniert es nicht mehr mit dieser Version. Hast du evtl. eine Lösung für das neue TYPO3 parat?

    Antworten
  2. Andreas Kokott

    Hi Andreas,
    es gibt auch eine einfachere Variante die Lightbox Funktionalität in Typo3 zu aktivieren, diese ist auch schon seit längerem standardmäßig in Typo3 integriert.
    Wenn du dir mal den Konstanteneditor anschaust findest du in der Kategorie Content die Option Lightbox click-enlarge rendering. Die aktivierte Checkbox bewirkt, dass die Klick vergrößern Option im Content Element das Bild nicht mehr in einem Popupfenster öffnet.
    Im Typoscript Setup lassen sich unter tt_content.image.20.1.imageLinkWrap.linkParams.ATagParams.dataWrap noch die Linkattribute anpassen.
    Das im Beitrag verwendete Typoscript wird bei diesem Ansatz nicht mehr benötigt.
    Wenn du bei der Klickvergrößerung immer das Original öffnen möchtest, müssen noch die Größenangaben für das vergrößerte Bild entfernt werden.
    tt_content.image.20.1.imageLinkWrap.width >
    tt_content.image.20.1.imageLinkWrap.height >

    Gruß,
    Andreas

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Lösen Sie bitte die Rechenaufgabe. *