Why fslightbox?
The fslightbox plugin is a very lightweight but powerful lightbox plugin because it does not need jQuery or any other JavaScript frameworks.
Prepare your site package
The fslightbox doesn´t require jQuery :) so let´s include the jslightbox without jQuery. You can either download it directly on their website or install it using npm (not described in this tutorial!). Put it into the JavaScript folder of your site package. Now include it in your TypoScript setup:
page.includeJSFooter {
fslightbox = EXT:myext/Resources/Public/JavaScript/fslightbox.js
}
Up next we need to modify some content element settings, to get image links like <a href="path/to/image.jpg" data-fslightbox="tt_content:x" title="y">...</a> for our lightbox.
In this case I decided to use TSFE:currentRecord for the data-fslightbox value. This means that all images of one content element build one gallery, so you can use the arrow keys to switch between the images of that content element when the lightbox is open. If you don´t want this you can replace it with {file:current:uid_foreign} to disable galleries or {field:uid} to make the whole page to a gallery.
Setup:
lib.contentElement {
# fslightbox
settings.media.popup {
JSwindow = 0
directImageLink = 1
linkParams.ATagParams.dataWrap = data-fslightbox="{TSFE:currentRecord}" title="{file:current:title}"
}
}
Now you can save your files and clear your caches.
Related posts
- 20.08.2021 TypoScript if - Show content on specific pages
- 31.07.2015 Clear cache command
- 01.08.2016 Show page uid in page tree
- 01.08.2016 Turn off the frontend ExceptionHandler
- 17.02.2018 TYPO3 Flush system/all caches button
Comments
No Comments