TYPO3 Wissen – Lightbox ohne Extension

TYPO3 Wissen – Lightbox ohne Extension

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.

  1. TypoScript Setup (in das Root-Template eintragen)
  2. TypoScript Konstanten (alternativ zum TS-Setup)
  3. Größe der verlinkten Bilder
  4. Lightbox für tt_news
  5. TypoScript Setup für Lightbox in tt_news
  6. Einbinden der Lightbox jQuery Fancybox
  7. TypoScript Setup
  8. Eigenes JavaScript zur Aktivierung der Fancybox
  9. JavaScript (script.js)

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

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)

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)

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

oder im TS-Setup

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

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 unterfancybox.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:

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

TypoScript Setup

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)

kundenmagazin cover
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.

Kommentare

  1. 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 support@mittwald.de

    Viele Grüße Philipp

    Antworten
  2. Gravatar
    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?

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

    Antworten
  4. Gravatar
    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

    Antworten
  5. Gravatar
    Ange am

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

    Grüße
    Ange

    Antworten
  6. Gravatar
    Andreas am

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

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

    Antworten
  7. Gravatar
    Marco am

    Im ersten Typoscript-Setup fehlt die Klasse.

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

    Antworten

Kommentar hinzufügen