12.09.2018 | TYPO3, TYPO3 Schnipsel
Magnific Lightbox für Typo3
Wer eine anpassbare Lightbox ohne Extension in seine Typo3 Projekte integrieren will, kann es mit der Magnific Lightbox versuchen. Dafür sind folgende Anpassungen notwendig, die sich recht schnell umsetzen und individuell anpassen lassen.
Die erforderlichen JS und CSS Dateien zum Download gibt es hier:
jquery.magnific-popup.min
(1) Konstanten im Typo3 Template setzen
Dies kann direkt im Konstanten Editor in über die Template-Werkzeuge geschehen.
JavaScript und CSS im TypoScript inkludieren
Im TypoScript müssen dann die Dateien „magnific-popup.min.css“ und „jquery.magnific-popup.min.js“ aufgenommen bzw. ergänzt werden. Im Beispiel ist es eine ausgelagerte TypoScript Datei, die über die Template-Werkzeuge eingelesen wird.
page = PAGE
page {
[...]
includeCSS {
file1 = fileadmin/templates/XYZ/XYZ/magnific-popup.min.css
}
includeJSFooter {
file1 = https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
file2 = fileadmin/templates/XYZ/XYZ/jquery.magnific-popup.min.js
}
[...]
}
Javascript zur Ausgabe im Template im TypoScript erweitern
Zu guter letzt folgt ein kleiner Codeschnipsel, der später dann im Footer der Seite ausgegeben werden soll und diverse Einstellungen zur Ausgabe beinhaltet.
jsFooterInline {
10 = TEXT
10.value (
$(function() {
$('a[rel*="lightbox"]').magnificPopup({
type: 'image',
tLoading: 'Lade Bild...',
tClose: 'Schließen (Esc)',
image: {
titleSrc: function(item) {
var title = item.el.attr('title');
var description = item.el.attr('alt');
return ((title)?title:'') + ((description)?'<small>'+ description +'</small>':'');
}
},
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1],
tCounter: '%curr% von %total%',
tPrev: 'Zurück (Linke Pfeiltaste)',
tNext: 'Vorwärts (Rechte Pfeiltaste)'
},
});
});
)
}
Getestet in:
Typo 3 – 7.6.31
Direkt zur Internetseite Magnific Popup:
http://dimsemenov.com/plugins/magnific-popup/