Embed fslightbox in TYPO3

Powerful lightbox without jQuery

  • 8 LTS
  • 9 LTS
  • 10-dev

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.

Demo

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