SAY HELLO EN

 

TYPO3 Tipps:

Lightbox ohne Extension unter fluid / Typo3 7.6 

 

 

Eine Extension weniger im Projekt hat den Vorteil, dass bei Updates klar ist, was man gemacht hat. 

Und es ist einfach unnötig, hierfür eine Erweiterung (Extension für Typo3) zu verwenden. Extensions bieten immer die Gefahr für Inkompatibilität oder Sicherheitslücken.

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;

}

 

 

 

Bei Fragen wenden Sie sich an die Webdesign und Internetagentur aus Hannover.

TYPO3 Referenzen der Internetagentur & Webdesign aus Hannover

Auch interessant

Viele weitere TYPO3 Tipps, die weiter helfen:

Klicken Sie hier...

Typo3 Internetagentur Tipps Hannover
Gemeinsam
Neues schaffen.
Kontakt
Ich freue mich, von Ihnen zu hören. Schreiben Sie mir eine Mail oder rufen Sie einfach an.

Internet Experte Typo3 Jan Engelking

Jan Engelking
Dipl.-Designer & Inhaber

T +49 511 8 999 267
jan.engelking-at-dbje.de

Adresse
DbjE Design Marketing IT & Kollegen
Hanomaghof 2
30449 Hannover
T +49 511 59 068 388

© 2005 - 2023 DBJE Design Marketing IT /  Lightbox ohne Extension unter fluid Webdesign Internetagentur Typo3 Hannover / Impressum Datenschutz