SAY HELLO EN

Lightbox ohne Extention unter fluid / Typo3 7.6

News Typo3 Extentionentwicklung Quicktipp Snippet Extentionentwicklung

Eine Extention 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 (Extention für Typo3) zu verwenden. Extentions 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;

}

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
facebook

Adresse
DBJE Design Marketing IT & Kollegen
Münchener Strasse 18
30880 Laatzen / Messegelände Hannover
T +49 511 8 999 265

Erfahrungen & Bewertungen zu DBJE Design Marketing IT

© 2005 - 2017 DBJE Design Marketing IT /  typo3-Einzelansicht Webdesign Internetagentur Typo3 / Impressum Datenschutz