Embed fslightbox in TYPO3

The fslightbox plugin is a very lightweight but powerful lightbox plugin because it does not need jQuery or any other JavaScript frameworks.

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.