Lightbox ohne Extension unter fluid
Beliebt sind die Lightboxen seit langen. Bei Klick auf ein Bild, verdunkelt sich der Hintergrund und das kleine Vorschaubild zoomt auf. Bei einer Galerie gibt es Pfeile rechts und links, um diese durchklicken zu können.
Diese Lightbox von Lokesh Dhakar ist klein und fasst sich gut an. Vielen Dank dafür!
Hier die Vorschau und der Download der Lightbox, die wir in Typo3 > 7.6 einbinden wollen:
lokeshdhakar.com/projects/lightbox2/
Die Funktion Lightbox für Typo3 im Projekt integrieren
Für das Webdesign und Ergonomie einer Webseite sind Lightboxfunktionen wichtig. Zunächst müssen die Lightbox-Dateien heruntergeladen und entpackt werden. Wichtig sind folgende Dateien:
- lightbox.min.js
- lightbox.css
- Ordner mit den Bilddateien
Jetzt muss eine Jquery Bibliothek eingebunden werden, falls noch nicht vorhanden.
Die anderen Dateien müssen ebenfalls hochgeladen und eingebunden werden, nach folgenden Konzept:
Ins Setup:
config {
noScaleUp = 1
}
...
includeCSS {
lightbox = fileadmin/template/lightbox/css/lightbox.css
}
includeJSFooter {
lightbox = fileadmin/template/lightbox/js/lightbox.min.js
}
}
In die Constants des Roottemplate kommt dann:
styles.content.imgtext.linkWrap {
lightboxEnabled = 1
width = 800
}
Für die HTML5 Validität dies ins Setup:
//Lightbox im data Attribut
tt_content.image.20.1.imageLinkWrap.linkParams.ATagParams.dataWrap = data-lightbox="{field:uid}"
News anpassen, falls integriert:
In die Constants:
styles.content.textmedia.linkWrap.lightboxEnabled = 1
und ins Setup:
plugin.tt_news.displaySingle.image.imageLinkWrap {
JSwindow = 0
directImageLink = 1
linkParams.ATagParams.ATagParams {
dataWrap = rel="lightbox{field:uid}"
= data-lightbox="{field:uid}"
}
height =800
width =800
}
UPDATE:
ins lightbox.css muss zusätzlich stehen:
.news-img-wrap .lightbox {
font-weight: normal;
line-height: 0;
position: relative;
text-align: left;
}
Version: <= 10.xx