Sie sind hier: Startseite  / Wissenswertes  / Typo3  / Lightbox ohne Extension

Lightbox in Typo3 ohne Erweiterung - darum geht es:

Mittlerweile Standard - Bildvergrößerungen mit Lightbox(en)

Nahezu jeder Nutzer des Internet kennt den Effekt. Es wird ein Bild angeklickt und es geschieht folgendes:

 

  • Der Hintergrund verdunkelt sich
  • Eine Vergrößerte Version des Bildes wird geladen und über den bestehenden Inhalt angezeigt
  • Ein Klick auf den Schließenbutton, oder neben das Bild schließt die Detailansicht wieder

 

Diese Funktionalität wird Lightbox genannt. Es gibt zahlreiche Skripte, die eine solche Darstellung ermöglichen. Darüber hinaus einige Typo3 Extensions, die sich dem Thema angenommen haben. In aktuellen Versionen von Typo3 ist es jedoch nicht erforderlich deswegen eine Extension (Erweiterung) zu installieren, es geht auch vollkommen ohne.

Beispiel einer Typo3 Lighbox Funktionalität

Herkunft der Beispielbilder der Typo3 Lightbox ohne Erweiterung

pixabay.com

Warum keine Lightboxerweiterung für Typo3 verwenden?

Weil es schlichtweg nicht nötig ist. Eine Erweiterung ist nur so gut, wie der Code, indem sie erstellt wurde. Immer wieder war es ein Problem, dass die Typo3 Lightbox Erweiterungen veraltet waren oder gar Sicherheitslücken hatten. Zudem nehmen nicht selten Erweiterungen für eine derart triviale Funktion Veränderungen an der Datenbank etc. vor.

 

Eine Typo3 Lightboxerweiterung mit eigenen Mitteln ist sauberer und auch unproblematisch bei Systemupdates. Wir zeigen wie es geht.

 

 


Vorbereitung - Download der richtigen Lightbox für Typo3

Als erstes eine Version der Lightbox, die auch mit HTML5 validen Code nutzt und integrierbar macht. Der Hintergrund ist, dass bisher die meisten Lightboxvarianten das rel Attribut nutzten, dieses ist in HTML5 innerhalb eines Bildknotens nicht mehr valide. In HTML5 wird daher das data Attribut genutzt.

 

Ich empfehle die Lightbox 2 von Lokesh Dhakar. Diese Version ist laut Lizenz frei nutzbar, auch in kommerziellen Projekten. Zudem unterstützt Sie die notwendigen Voraussetzungen.

 

Lightbox downloaden

Folgende Dateien des Lightboxpaketes brauchen Sie:

Nachdem Download müssen Sie die erhaltene Datei entpacken. Sie benötigen mindestens folgende Dateien aus nachfolgenden Verzeichnissen, damit die Lightbox auch in Typo 3 funktionieren wird:

 

  • Aus dem Ordner: lightbox -> js die Datei: lightbox.min.js
  • Aus dem Ordner: lightbox -> css die Datei: lightbox.css
  • Aus dem Ordner: lightbox -> img die Bilddateien: close.png, loading.gif, next.png sowie prev.png (Wenn Ihnen die Darstellung der Symbole nicht gefällt, so können Sie auch eigene Bilddateien erstellen und verwenden)
  • Aus dem Ordner: lightbox - > js die Datei: jquery-1.11.0.min.js (HINWEIS: Diese Datei benötigen Sie nur, wenn jQuery nicht schon ohnehin zur Verfügung steht.)

Schritt 1 - Pfadanpassung der CSS Datei

Zunächst müssen die Pfadangaben in der CSS Datei lighbox.css, diese ist für das grafische Aussehen notwendig, an Ihre Bedürfnisse, Ihre Umgebung angepasst werden. Im Wesentlichen sind es Angaben zum Pfad der vier Bilddateien: close.png, loading.gif, next.png sowie prev.png

 

Öffnen Sie die Datei: lightbox.css mit einem Editor Ihrer Wahl, funktioniert auch mit einem Texteditor. Suchen Sie nun die Stellen, die die Pfade angeben. Dies erkennen Sie i.d.R. daran, dass dem Pfad das Kürzel: url( vorausgeht.

Hinweis zur Pfadanpassung:

Insgesamt müssen die Pfade in 5 Blöcken der lightbox.css angepasst werden.

Beispiel vor der Anpassung der Pfade:

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../img/loading.gif) no-repeat;
}

Beispiel mit angepassten Pfaden:

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(http://www.IhreDomain.de/images/loading.gif) no-repeat;
}

Schritt 2 - Upload der Lightboxdateien

Die vorbereiteten Dateien müssen nun ins fileadmin Verzeichnis von Typo3. In meinem Beispiel habe ich dort folgenden Ordnerstruktur:

 

fileadmin

- css

- js

- images

 

Somit kommt die Datei lightbox.css ins css Verzeichnis, die Javascriptdateien lightbox.min.js (sowie wenn notwendig) jquery-1.11.0.min.js ins js Verzeichnis und die Bilddateien close.png, loading.gif, next.png, prev.png ins images Verzeichnis.

Schritt 3 - Einbinden der Dateien in Typo3

Nun müssen die CSS Datei sowie die Javascriptdateien in Typo3 eingebunden werden. Dies geschieht mit Hilfe von Typoscript innerhalb des sog. PAGE Objektes. In der Regel existiert dieses Objekt bereits, daher können Sie es um folgende Einträge ergänzen:

page = PAGE
page {
   ...Ihre Angaben

   #Einbinden der CSS Datei
   includeCSS{
      ...möglicherweise Ihre CSS Dateien
      100 = fileadmin/js/lightbox.min.js
   }

   includeJSFooterlibs{
      #wenn notwendig zuerst jQuery Datei
      10 = fileadmin/js/jquery-1.11.0.min.js

      #sicherstellen, dass die jQuerydatei als erste eingebunden wird
      10.forceOnTop = 1

      ...möglicherweise Ihre Javascriptdateien

      #Lightbox Javascriptdatei
      100 = fileadmin/js/lightbox.min.js
   }
}

Sollten Sie bereits Dateien mit den numerischen Bezeichner 100 haben, so wählen Sie den höchstmöglichen, dies spielt keine wesentliche Rolle.

Schritt 4 - Lightbox in Typo3 aktivieren

Mittels Typoscript können Sie die Nutzung der Lighbox aktivieren. Dies machen Sie nicht im Setupfeld sondern bei den Konstanten. Öffnen Sie dazu Ihr Roottemplate im Bereich der Konstanten und ergänzen Sie die Einträge um folgende Zeilen:

styles.content.imgtext.linkWrap {
   #Lightbox aktivieren
   lightboxEnabled = 1
   #Maximalen Breite der Bilder in der Detailansicht
   width = 800
}

Schritt 5 - Typo3 Standard Feld auf data Attribut umstellen

Damit die Lightbox auch unter HTML5 valide ist, nutzen wir statt des bisherigen rel Attributs, das data Attribut für die Lightbox Parameter. Öffnen Sie wieder Ihr Roottemplate und ergänzen Sie folgende Zeile:

//Lightbox im data Attribut
tt_content.image.20.1.imageLinkWrap.linkParams.ATagParams.dataWrap = data-lightbox="{field:uid}"

Etwas Feintuning. Damit die Lighbox die Bilder nicht hochskaliert, dies wäre der Fall, wenn das Detailbild kleiner ist, als die angegebene maximale Breite in der Lightbox, setzen wir einen zusätzlichen Parameter im config Bereich Ihres Roottemplates:

config {
   ...Ihre config Angaben
   #Bilder nicht hochskalieren
   noScaleUp = 1
}

Fertig, nun sollte die Lightbox ohne Extension in Typo3 funktionieren

Das war schon alles....

Löschen Sie nach Abschluss der Arbeiten den Cache. Wenn Sie nun bei einem Bild die Vergrößern Checkbox aktivieren, so nutzt Typo3 die Lightbox, statt ein Popup Fenster.

Ein paar Hinweise

Grundsätzlich empfehle ich Typoscript in externe Dateien auszulagern. So ist die Pflege deutlich erleichtert und Sie können zudem einmal geschaffene Module immer wieder weiter verwenden. In Kürze kommt auch zu diesem Thema ein Artikel.

 

Sie haben Fragen und / oder Anregungen?Gerne schreiben Sie mir dazu einfach eine E-Mail.

Top Produkte

Lade Inhalt
nächstes Bild
vorheriges Bild
Flash Karussell Professionell 3
jQuery Slider
Produktslider
Flash Imageslider Pro 4
HTML5 Slideshow Pro
HTML5 Accordion

Typo3 Freelancer gesucht?

Ich arbeite auch für Agenturen als Typo3 Freelancer und ebenso als Web Freelancer. Mehr Infos erhalten Sie auf der Freelancerseite.

 

Typo3 Freeelancer Mark Kirstein