Zurück zur Übersicht

TYPO3: Eigene Lightbox benutzen, anstelle des Javascript Popups

#Tutorials #TYPO3

Hat man für ein Bild die Checkbox "Bei Klick vergrößern" gesetzt, so rendert TYPO3 standardmäßig ein Javascript an den Link zum Bild und öffnet dieses in einen Popup. Da das nicht so schön ist und in meinen Augen auch nicht mehr zeitgemäß zeige ich jetzt, wie man dieses Verhalten ändert.

Dafür müsst ihr, je nachdem ob ihr css_styled_content oder fluid_styled_content nutzt folgende Einstellungen im TypoScript einfügen:

# css_styled_content
tt_content.image.20.1.imageLinkWrap {
  JSwindow = 0
  crop >
  height >
  width >
  directImageLink = 1
  linkParams.ATagParams.dataWrap = class="lightbox-img" rel="lightbox[lb{field:uid}]"
}

# fluid_styled_content
lib.contentElement.settings.media.popup {
  JSwindow = 0
  crop >
  height >
  width >
  directImageLink = 1
  linkParams.ATagParams.dataWrap = class="lightbox-img" rel="lightbox[lb{field:uid}]"
}

Habt ihr das TypoScript eingefügt, so wird jetzt ein direkter Link zum Bild generiert und die Klasse "lightbox-img" an den Link gerendert. Nun kann man seine Lightbox einbinden und das Javascript entsprechend anpassen. 

Möchte man beispielsweise meine simpleLightbox verwenden, so fügt man einfach folgende Dinge hinzu:

page.includeCSS.sl = typo3conf/ext/ar_siteext/Resources/Public/Css/simplelightbox.min.css
page.includeJSFooter.sl = typo3conf/ext/ar_siteext/Resources/Public/Js/simplelightbox/dist/simple-lightbox.min.js

Ein eurem Javascript dann noch folgendes hinzufügen:
// initialize lightbox with class
$('.lightbox-img').simpleLightbox();

Das wars auch schon und ihr habt eine Javascript Lightbox eingebaut.


Kommentare

Es gibt noch keine Kommentare. Sei der Erste!

Hinterlasse einen Kommentar

Antworten abbrechen

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

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.