REMINDER: Save your file
plugin-settings.json prior to Plugin-Update. The Update to 1.5.0 implements a backup / restore logic for
plugin-settings.json and the files in ./js/fslightbox-paid. This will work ONLY for all future updates. So, with this update it is the last time you have to save your files.
Provides an easy was to add a Lightbox to Gutenberg videos, images, galleries and Media-with-Text-Blocks. Just install, activate and use it.
E.g., just create gallery by using Gutenberg gallery block and use lightbox gallery effect powered by fslightbox.js.
NEW: Added support for Youtube-Videos. This will add a small red button on the top left of the embedded Youtube-Video which opens the lightbox with that video.
Could be disabled by deleting the line
"wp-block-embed-youtube" in the file
plugin-settings.json. If you do so please delete the comma at the end of the line before, too!
See live example here: https://www.berg-reise-foto.de/software-wordpress-lightroom-plugins/wordpress-plugins-fotos-und-karten/
The support for Youtube-Videos is working with the given functionality and extended to stop running videos onOpen and for the paid version to stop running videos on slideChange.
Following libraries and WP-Plugins were used to create this plugin:
How does the plugin work?
Plugin is filtering the content of posts and pages and appends lightbox effect for native Gutenberg-Blocks: Image, Gallery, Media-and-Text, Featured Image, Video and Youtube-Video. It also works for external images or YT-videos that are not on your site.
What exactly are the preconditions?
- It filters the content of the page, post etc (setting: postTypes). Meaning exactly the content that WP stores in the database. (Using the_content filter)
- All elements in html figure tags and img tags will be filtered and if its CSS-Class is defined in the plugin-settings.json (setting: cssClassesToSearch).
Will it work with my page builder, Theme, ACF etc.?
Maybe, see preconditions above. If your theme provides output that is NOT stored as content in the database it will not work. If your media ( be it image or video ) is not given in a figure tag it will not work.
Positive feedback is reported from Beaver Builder, Post Types of Advanced Custom Fields. Negative feedback is given by GeneratePress that generates page content in special elements by the theme files. So, just try if it works and mind the preconditions.
How to change the plugin settings?
The settings are written in a separate file ‘plugin-settings.json’ in the main plugin folder.
Change here the type of posts, pages which shall include the lightbox. Additionally change whether existing links to Media-Files should be overwritten and which CSS-Classes should be used for the fslightbox.
In the JSON file, you can select which link may already be present on the image (hrefTypes : Empty, Media). In addition, it can be set for which pages or posts the lightbox should be activated (postTypes). The selection of the actual media type is done with the CSS class that is used for the image or video (cssClassesToSearch). With excludeIDs you can set which posts / pages should not be equipped with a lightbox. Reasonable basic settings have been chosen, so there should be no reason to change them at the beginning.
Is the paid version of fslightbox.js supported?
Yes, you may buy the fslightbox.js an add the file fslightbox.js to the folder ./folder-where-the-plugin-is-installed/js/fslightbox-paid. That’s it.
Does the plugin have any requirements?
No. You can use this plugin with pure WordPress with Gutenberg editor enabled. But mind the preconditions above.
Is the lightbox responsive?
Yes. Lightbox is fully responsive – it scales to every device.
Does the plugin use jQuery?
No. Plugin just uses fslightbox.js. Free or paid version optionally.
Does the plugin backup and restore my plugin-settings.json and my paid Version of fslightbox?
Yes, the Update to 1.5.0 implements a backup / restore logic for
plugin-settings.jsonand the files in ./js/fslightbox-paid. This will work ONLY for all future updates because the php-files have to be on your server already. So, with this update it is the last time you have to save your files in advance. The process creates the folder
../simple-lightbox-fslight-backupin you Plugin-Directory which won’t be deleted after Update. If you want the backup-restore process running with the Update to V1.5.0 you have to manually copy the files
./admin/pre-post-install.phpfrom Github via ftp to your server. The backup / restore logic won’t work if you install the Plugin manually as zip-File.
Yes, there are errors shown like “The service worker navigation preload request was cancelled before ‘preloadResponse’ settled. If you intend to use ‘preloadResponse’, use waitUntil() or respondWith() to wait for the promise to settle”. This issue is not solvable by me. If you dislike it: Just delete the JS-File
simple-lightbox.min.js. The Video Sync will no longer work after that.
Contributors and Developers
“Simple Lightbox for WordPress” is open source software. The following people have contributed to this plugin.Contributors
Interested in development?
Added JS to pause all running videos on Open of lightbox and pause current video on slide change (paid version, only).
Added backup / restore logic for plugin-settings.json and fslightbox-paid files.
Added support for Youtube-Videos. (The access to the YT-JS-API is not feasible for me to CORS-Policy, so the trial to sync the running videos was stopped.)
Some changes for WPCS rules and code reformatting. No functional change. Updated HTML5DOMDocument.php from github.
Test with WordPress 6.3. Save and Restore function for settings before Update not realized. Save your settings before update.
Added PHP type definitions.
Added an aria-label to the button for accessibility and lighthouse tests. Updated Unit-Tests successfully. No functional change.
Test with WP 6.2.
Test with WP 6.1. No changes.
Test with WP 6.0. No changes.
Added a Setting to exclude certain IDs (post or page or whatever is set)
Included the Preview (‘poster’) of videos in the thumbnails (only paid version will see thumbnails)
Included a logic for old Gutenberg images with div-tag figure-tag img-tag… structure where the class is defined in the div.
Bugfixes: Corrected the generated html for Media-Text and for images with a link in their caption
First Version based on Lightbox Gallery by Kodefix.