The content on this page is no longer maintained and may be out of date.

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.



lib.contentElement {
  # fslightbox {
    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.


Just a little demo to show you how that lightbox works.


No Comments

Write comment

* These fields are required