Zurück zum Blog

Fancybox in TYPO3 integrieren

Achtung: Unter TYPO3 4.5 ergeben sich kleinere Änderungen bei der Verwendung von Fancybox unter TYPO3!

Auf einer Vielzahl von Websites ist die allseits bekannte Lightbox in Verwendung. Eine Lightbox ist eine Art Pop-Up. Dabei wir die Website abgedunkelt und meist ein Foto legt sich über die Seite. Aber nicht nur Fotos, sondern alle Arten von Inhalten bis hin zu gesamten Websites können in einer Lightbox dargestellt werden.

Mittlerweile gibt es verschiedenste Lightbox-Skripte. Wir bei KEYNET setzen in letzter Zeit bei unseren Lösungen zumeist das jQuery-Plugin Fancybox ein, da damit die Darstellung von verschiedenen Inhaltstypen untestützt wird. Aus diesem Grund zeigen wir hier kurz, wie die Fancybox ohne Verwendung einer Extension in TYPO3 integriert werden kann. Es gibt auch eine Fancybox-Extensions, allerdings ist es angenehmer, die volle Kontrolle über die Steuerung des Skripts zu haben.

Zuerst fügen wir folgendes TypoScript in unser Template ein:

tt_content.image.20.1 {
  # Standard imageLinkWrap entfernen & eigenes Linkwrapping starten
  imageLinkWrap >
  imageLinkWrap = 1
  imageLinkWrap {
    
    # Linkwrap bei Klickvergrößerung oder gesetzten Link
    enable.field = image_zoom
    enable.ifEmpty.typolink.parameter.field = image_link
    enable.ifEmpty.typolink.parameter.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
    enable.ifEmpty.typolink.returnLast = url
    
    # Der neue Code für das Wrapping
    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
      
      # Ausnahme: wenn das linkfield nicht leer ist
      parameter.override.field = image_link
      parameter.override.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
      parameter.override.if.isTrue.field = image_link
      
      # rel-Attribut hinzufügen, für Galerie-Funktion
      ATagParams = rel="gallery" title="{field:header}" class="lightbox"
      ATagParams.override = rel="gallery{field:uid}" title="{field:header}" class="lightbox"
      ATagParams.insertData = 1
      ATagParams.if.isTrue.field = image_zoom
    }
  }
}
Linkwrapping in TYPO3 für die Fancybox

Damit es nun funktioniert, fehlt noch folgender JavaScript-Code (beinhaltet zudem die Anweisung für die Darstellung von anderen Websites per iFrame):

// Image
$("a.lightbox").fancybox({
  'zoomSpeedIn': 300,
  'zoomSpeedOut': 300,
  'overlayShow': true
 });
	
// iFrame Content
$("a.lightbox-page").fancybox({
  'zoomSpeedIn': 300,
  'zoomSpeedOut': 300,
  'overlayShow': true,
  'width': 650,
  'height': 280,
  'titleShow': false,
  'autoScale' : true,
  'type': 'iframe'
 });
JavaScript-Code für die Verwendung der Fancybox (Bild und iFrame)

Nun kann man über den Inhaltstyp "Text mit Bild" oder "Bild" die Fancybox durch Verwendung von "Klick-Vergrößern" verwenden. Weiters ist es möglich sich im RichTextEditor von TYPO3 verschiedene CSS-Klassen zu definieren, die man danach Links zuweisen kann. Klickt man danach auf einen dieser Links, wie das Linkziel in der Fancybox angezeigt.

Diesen Artikel teilen

Schreiben Sie den ersten Kommentar zu diesem Artikel

Ihr Kommentar

Bitte geben Sie Ihren Namen an
Bitte geben Sie eine E-Mail Adresse an
Bitte geben Sie eine Nachricht ein
Das Ergebnis ist nicht korrekt