TYPO3 Wissen – Lightbox ohne Extension

|
Person sitzt am Schreibtisch und tippt am Laptop

Seit TYPO3 4.5 ist’s möglich: Das Einbauen der Lightbox ohne Installation einer Extension. Wie das ganze funktioniert, erkläre ich im folgenden Beitrag.

Lightboxen werden heutzutage auf sehr vielen Webseiten eingesetzt, um beim Klick-Vergrößern dem Betrachter eine besonders ansprechende Ansicht zu bieten. Die Verwendung ohne Extension wird dadurch ermöglicht, dass die TypoScript-Funktion imageLinkWrap, mit der die Links um vergrößerbare Bilder erzeugt werden, in der TYPO3-Version 4.5 zwei neue Eigenschaften erhalten hat, nämlich directImageLink und linkParams.

mitwald ligtboxen
Lightbox auf Mittwald Website

Bisher hat TYPO3 für die Klick-Vergrößerungs-Funktion showpic.php verwendet. Mit der Einstellung directImageLink = 1 wird der Pfad zum Orginalbild direkt verwendet. Damit die Bilder gezielt über Javascript angesprochen werden können, muss jedem Link-Tag bspw. die zwei Parameter class=”lightbox” und rel=“lightbox1″ zugewiesen werden. Mit der Eigenschaft linkParams wird genau dieses erreicht. Die CSS-Klasse ermöglicht es dem Lightbox-Script, alle Bilder herauszusuchen, auf die der Lighbox-Effekt angewendet werden soll. Das rel-Attribut wird in diesem Beispiel mit der UID des Inhaltselements versehen, um alle Bilder des Inhaltselements für die Navigation in der Lightbox zu gruppieren.

TypoScript Setup (in das Root-Template eintragen)

tt_content.image.20.1.imageLinkWrap.JSwindow = 0
tt_content.image.20.1.imageLinkWrap.directImageLink = 1
tt_content.image.20.1.imageLinkWrap.linkParams.ATagParams {
  dataWrap = rel="lightbox{field:uid}"
}

Alternativ zum Eintrag ins TypoScript-Setup können die Werte auch über die folgenden CSS-Styled-Content-Konstanten gesetzt werden:

TypoScript Konstanten (alternativ zum TS-Setup)

styles.content.imgtext.linkWrap {
   lightboxEnabled = 1
   lightboxRelAttribute = lightbox{field:uid}
   lightboxCssClass = lightbox
}

Bei Verwendung des Konstanten-Editors löscht bitte die eckigen Klammern, da die hier eingesetzte Lightbox Fancybox ansonsten JS-Fehler ausgibt.

Größe der verlinkten Bilder

Damit TYPO3 kleine Bilder in der Lightbox nicht hochskaliert, könnt Ihr entweder die Originaldateien mit den folgenden zwei Zeilen

tt_content.image.20.1.imageLinkWrap.height =
tt_content.image.20.1.imageLinkWrap.width =

oder im TS-Setup

config.noScaleUp = 1

verwenden.

Ihr könnt den Lightbox-Effekt auch bei tt_news (und bei anderen Erweiterungen, die imageLinkWrap einsetzen) aktivieren.

TypoScript Setup für Lightbox in tt_news

plugin.tt_news.displaySingle.image.imageLinkWrap {
   JSwindow = 0
   directImageLink = 1
   linkParams.ATagParams.dataWrap = class = "lightbox" rel="lightbox{field:uid}"
      height =
      width =
 }

Einbinden der Lightbox jQuery Fancybox

Bei der Auswahl der Lightbox solltet Ihr darauf achten, dass Ihr nicht unbedingt mehrere JavaScript-Frameworks einsetzen – größere Downloads und mögliche Konflikte wären die Folge. Als Beispiel soll hier daher das auf jQuery aufbauende Fancybox dienen, dass Ihr unter fancybox.net herunterladen können. Im entpackten Zip-Archiv findet Ihr einen Ordner fancybox, den Ihr im Ordner fileadmin/templates/js/ hochladen könnt. Dieser enthält die CSS-, JS- und Bilddateien der Fancybox. Im head-Bereich der Webseite muss das CSS eingefügt werden:

page.includeCSS {
 fancybox = fileadmin/templates/js/fancybox/jquery.fancybox-1.3.4.css
 }

Die JavaScript-Dateien werden für einen schnelleren Seitenaufbau vor dem schließenden body-Tag eingebunden. Sinnvoll ist es, jQuery über jquery.com aktuell herunterzuladen. Dieses ist im folgenden Beispiel schon eingebunden:

TypoScript Setup

page.includeJSFooter {
 jquery = fileadmin/templates/js/libs/jquery-1.6.2.min.js
 # Optionales Plugin für mehr Effekte als "swing" & "linear"
 jquery_easing = fileadmin/templates/js/fancybox/jquery.easing-1.3.pack.js
 # Fancybox Plugin
 fancybox = fileadmin/templates/js/fancybox/jquery.fancybox-1.3.4.pack.js
 # Initialisierung des Plugins
 enable_fancybox = fileadmin/templates/js/script.js
 }

Eigenes JavaScript zur Aktivierung der Fancybox

In der von Euch anzulegenden JavaScript-Datei script.js wird der Lightbox-Effekt für alle Links mit der Klasse „lightbox“ aktiviert.

JavaScript (script.js)

jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery('a.lightbox').fancybox({
    'titlePosition' : 'inside',
    'overlayColor' : '#aaa',
    'overlayOpacity' : '0.5',
    'hideOnContentClick' : 'true',
    'speedIn' : '100',
    'speedOut' : '100',
    'transitionIn' : 'fade',
    'transitionOut' : 'elastic'
  });
});
kundenmagazin cover
Cover des Mittwald Kundenmagazin zeigt Phönix vor TYPO3-Logo

Dieser Beitrag ist ein Artikel aus dem aktuellen Mittwald Kundenmagazin. Wenn Ihr mehr davon lesen möchtet, könnt Ihr das Magazin auf unserer Webseite kostenlos bestellen oder als PDF herunterladen.

Ähnliche Artikel:

Webentwicklung

TYPO3 v13 LTS: Einfacher und flexibler mit Site Sets & Content Blocks

CMS Pro Philipp stellt im Beitrag seine Highlights zur neuen LTS-Version TYPO3 13.4 vor. Dazu gehören Site Sets und Content Blocks.

Webentwicklung

Best Practices für responsive Bilder in TYPO3

Wie du Ladezeiten, Benutzererfahrung und SEO-Position durch moderne Bildformate wie AVIF und WebP verbessern kannst, erklärt Richard im Blog.

Webentwicklung

Lieber mit Agentur: TYPO3 Upgrade oder Relaunch?

Wer TYPO3 nicht regelmäßig aktualisiert, tut sich keinen Gefallen. Erfahrt hier, warum Agenturen bei großen Versionssprüngen unterstützen sollten.

Webentwicklung

TYPO3 12 LTS – die wichtigsten neuen Features

Du fragst dich, ob du ein Update auf die neue TYPO3 12 LTS machen sollst? Im Blog geben TYPO3 CTO Frank Nägler und wir dir gute Gründe dafür!

Kommentare

Philipp Stranghöner am

Hallo Stefan und Lars,
es kann leider viele Ursachen dafür geben, warum ein bestimmter TypoScript-Befehl nicht greift. Ohne etwas Genaues gesehen zu haben, kann man da leider nicht viel sagen. Wir können uns das gerne einmal anschauen, dafür schickt Ihr am besten Eure Seiten mit Benutzerdaten an die E-Mail Adresse supportmittwald.de

Viele Grüße Philipp

Stefan am

Hallo an alle,

bei mir werden die JS Dateien nicht alle eingebunden.

page.includeJSFooter {
jquery = fileadmin/templates/js/libs/jquery-1.6.2.min.js
# Optionales Plugin für mehr Effekte als „swing“ & „linear“
jquery_easing = fileadmin/templates/js/fancybox/jquery.easing-1.3.pack.js
# Fancybox Plugin
fancybox = fileadmin/templates/js/fancybox/jquery.fancybox-1.3.4.pack.js
# Initialisierung des Plugins
enable_fancybox = fileadmin/templates/js/script.js
}

Es werden nur die beiden Dateien im Quelltext generiert.
jquery_easing = fileadmin/templates/js/fancybox/jquery.easing-1.3.pack.js
fancybox = fileadmin/templates/js/fancybox/jquery.fancybox-1.3.4.pack.js

Es sollten doch alle vier Dateien eingebunden sein oder?

Lars am

Hallo zusammen,

ich habe alle Skripte eingebunden und Dateien hochgeladen. Es werden auch keine weiteren/anderen Skripte eingebunden.
Und trotzdem funktioniert die Lightbox nicht.

Habt ihr noch eine Idee, was ich falsch gemacht habe?

Vielen Dank!

Gruß,
Lars

Andreas am

Hallo,
stehe gerade vor der Frage, wie man das Script so erweitern kann, das auch Inhaltselemente in der Lightbox angezeigt werden können. Ich denke da z.B. powermail-Formular. Extensions dazu gibt es, allerdings bringt jede ihr eigenes Jquery mit. Da gibt es schon mal Konflikte.

Hat jemand eine Idee?

LG Andreas

Ange am

Funktioniert gut, aber wie kann ich bei den News den alt-tag,title-tag oder caption auslesen?

Grüße
Ange

Andreas am

Danke Marco,
genau das hatte mir gefehlt.
Jetzt läuft es.

Gruß Andreas
web-aktiv.com – TYPO3 Lösungen

Marco am

Im ersten Typoscript-Setup fehlt die Klasse.

dataWrap = class=“lightbox“ rel=“lightbox{field:uid}“