Schöne, einfache Lightbox ohne Extension für TYPO3

Je weniger Extensions desto besser, oder? Vor allem dann, wenn man mit zwei Zeilen TypoScript das Ziel erreicht. Das Ziel heißt hier eine schöne Klickvergrößerung für Bilder.

Das Script, das zu diesem Zweck eingesetzt werden soll, nennt sich magnific popup und wird seinem Namen gerecht.

Einbinden muss man lediglich die Dateien jquery.magnific-popup.min.js und magnific-popup.css, die man sich am besten von der Github Seite holt.

Ist das geschehen initiiert man das Geschehen über folgendes JavaScript (es muss wohl nicht eigens erwähnt werden, dass jQuery geladen sein muss):

$(document).ready(function() {
  $('.csc-textpic-image').find('a').magnificPopup({
    type:'image',
    gallery: {
        enabled: true
      }
  });
});

Thats it in der einfachsten Variante. Weitere Optionen entnehme man der Dokumentation.

Jetzt muss man TYPO3 nur noch sagen, dass beim Setzen der Option „Klickvergrößern“ weder das Standard Popup verwendet werden soll, noch soll die Funktion tx_cms_showpic aufgerufen werden. Das geschieht mit den oben erwähnten zwei Zeilen TypoScript:

tt_content.image.20.1.imageLinkWrap.JSwindow = 0
tt_content.image.20.1.imageLinkWrap.directImageLink = 1

Lightbox mit Fluidtemplates

Verwendet man Fluid, muss man etwas anders vorgehen. Ins TypoScript (Constants) kommt folgendes:

styles.content.textmedia.linkWrap.lightboxEnabled = 1

Damit hat man die Klasse lightbox in den Bildern mit Klickvergrößerung zur Verfügung und muss das JS lediglich entsprechend anpassen (hier noch mit ein paar eingedeutschten Bezeichnern).

$(document).ready(function() {
    $('.lightbox').magnificPopup({
      type:'image',
      tClose: 'Schließen (Esc)', // Alt text on close button
      tLoading: 'Bilder werden geladen ...', // Text that is displayed during loading. Can contain %curr% and %total% keys
      gallery: {
        enabled: true,
        tCounter: '<span class="mfp-counter">%curr% von %total%</span>',
        tPrev: 'Vorheriges (Linke Pfeil Taste)', // title for left button
        tNext: 'Nächstes (Rechte Pfeil Taste)', // title for right button
      }
    });
});