Lightbox without extension under fluid
Lightboxes have been popular for a long time. When you click on an image, the background darkens and the small preview image zooms in. In a gallery there are arrows on the right and left to click through.
This lightbox by Lokesh Dhakar is small and feels good. Many thanks for that!
Here is the preview and the download of the lightbox, which we want to integrate into Typo3 > 7.6:
lokeshdhakar.com/projects/lightbox2/
Integrate the Lightbox function for Typo3 in the project
Lightbox functions are important for the web design and ergonomics of a website. Firstly, the lightbox files must be downloaded and unpacked. The following files are important:
- lightbox.min.js
- lightbox.css
- Folder with the image files
Now a Jquery library must be integrated, if not already available.
The other files must also be uploaded and integrated according to the following concept:
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}"
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