Arya Dhiratara

<p>Automatically adds Lightbox functionality to images displayed by WordPress (Gutenberg) Gallery and Image Blocks, as well as GenerateBlocks Image Blocks, and also videos created by the core Video Block, using the FSlightbox library.</p>
<p>This lightweight plugin will automatically adds Lightbox functionality to all images displayed by</p>
<ul>
<li>the Core Gallery Block,</li>
<li>the Core Image Block,</li>
<li>GenerateBlocks Image Block,</li>
</ul>
<p>and videos displayed by</p>
<ul>
<li>the core Video Block</li>
</ul>
<p>without the needs to set each gallery/image and video link to the media file so you don’t need to set them manually one by one.</p>
<p><strong>Note</strong>: You can exclude specific image/video from getting the lightbox functionality by adding <code>no-lightbox</code> class to the image/video element.</p>
<h3>About The Plugin</h3>
<ul>
<li>
<p>This plugin has no settings <em>(you can customized the default configuration using filters)</em>, hence does not add any data to the database, so you don’t need to worry about ‘database leftovers’ if you deactivate the plugin.</p>
</li>
<li>
<p>This plugin will automatically add the wrapper link with the necessary attribute on each image and videos that uses the blocks mentioned above to add the lightbox functionality using a few lines of inline script. So it will not make any changes to your original image and video tags (if you check from the page’s HTML source), and will not add extra weight / DOM depth to your page’s HTML.</p>
</li>
<li>
<p>By default, this plugin only works with the native WordPress Gallery, Image, and Video Blocks, as well as GenerateBlocks Image Blocks. You can add additional selectors using filters to make this functionality also works with other image/video blocks. If you need to, send me a request to have your image/video block included by default.</p>
</li>
<li>
<p>This plugin will only enqueued its assets (1 JS file) to pages/posts that use blocks, and will not enqueue assets if the page/post doesn’t use one of them.</p>
</li>
<li>
<p>I provided simple hover CSS which are not enabled by default. You can enable it using filter (<em>see below</em>).</p>
</li>
</ul>
<h3>To add other image/video block:</h3>
<p><strong>Add the CSS class uses by the image/video block element</strong>, e.g:</p>
<pre><code>add_filter( 'use_lightbox_in', function($use_lightbox_in) {
    return $use_lightbox_in . ',.your-other-plugin-block-image-parent-element img, .your-other-plugin-image-class';
} );
</code></pre>
<p><strong>Add the block info/name so that this plugin will enqueued the FSlightbox JavaScripts if the block is use in a post/page</strong>, e.g:</p>
<pre><code>add_filter( 'use_lightbox_if', function($use_lightbox_if) {
    return $use_lightbox_if . '|| has_block( "kadence/advancedgallery" ) || has_block( "your-plugin-block-name/the-block-name" )';
} );
</code></pre>
<h3>To only enable Lightbox Functionality on certain page/post types:</h3>
<p>Simply use the <code>wp_dequeue</code> function**, e.g.:</p>
<pre><code>add_action( 'wp_enqueue_scripts', function() {
    if ( ! is_singular('post') ) { // only enable in single post type
        wp_dequeue_script( 'image-video-lightbox' );
    }
});
</code></pre>
<h3>To only enable simple hover CSS:</h3>
<pre><code>add_filter('use_lightbox_css', function () {
   return true;
});
</code></pre>
<h3>Why using FSlightbox?</h3>
<ul>
<li><strong><a href="https://github.com/banthagroup/fslightbox" rel="nofollow ugc">FSlightbox</a></strong> is Vanilla Javascript Lightbox Library written in pure JavaScript without jQuery or any other additional dependencies.  It’s lightweight (around <strong>9kb</strong> *gzip)!<br />
 </li>
<li>The JavaScript is delayable (<em>*yes, it’s important for me</em>). This is the only lightbox library I found that works when the JavaScript is delayed.</li>
</ul>
<p> </p>
<h3>My other Plugins:</h3>
<ul>
<li>
<p><strong><a href="https://wordpress.org/plugins/optimize-more/" rel="ugc">Optimize More!</a></strong> –  A DIY WordPress Page Speed Optimization Pack. Features:</p>
<ul>
<li><strong>Load CSS Asynchronously</strong> – selectively load CSS file(s) asynchronously on selected post/page types.</li>
<li><strong>Delay CSS and JS until User Interaction</strong> – selectively delay CSS/JS load until user interaction on selected post/page types.</li>
<li><strong>Preload Critical CSS, JS, and Font Files</strong> – selectively preload critical CSS/JS/Font file(s) on selected post/page types.</li>
<li><strong>Remove Unused CSS and JS Files</strong> – selectively remove unused CSS/JS file(s) on selected post/page types.</li>
<li><strong>Load Gutenberg CSS conditionally</strong> – Load each CSS of the core blocks will only get enqueued when the block gets rendered on a page.</li>
<li><strong>Advance Defer JS</strong> – hold JavaScripts load until everything else has been loaded. Adapted from the legendary <strong>varvy’s defer js</strong> method <em>*recommended for defer loading 3rd party scripts like ads, pixels, and trackers</em></li>
<li><strong>Defer JS</strong> – selectively defer loading JavaScript file(s) on selected post/page types.</li>
<li><strong>Remove Passive Listener Warnings</strong> – Remove the “Does not use passive listeners to improve scrolling performance” warning on Google PageSpeed Insights</li>
</ul>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/lazyload-preload-and-more/" rel="ugc">Lazyload, Preload, and more!</a></strong> – This tiny little plugin (around <strong>14kb</strong> zipped) will automatically:</p>
<ul>
<li><strong>lazyload</strong> your below the fold images/iframes/videos,</li>
<li><strong>preload</strong> your featured images,</li>
<li>and <strong>add <code>loading="eager"</code></strong> to your featured image and all images that have <code>no-lazy</code> or <code>skip-lazy</code> class.</li>
</ul>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/shop-extra/" rel="ugc">Shop Extra</a></strong> – A lightweight plugin to optimize your WooCommerce & Business site:</p>
<ul>
<li><strong>Floating WhatsApp Chat Widget</strong> (can be use without WooCommerce),</li>
<li><strong>WhatsApp Order Button for WooCommrece</strong>,</li>
<li><strong>Hide/Disable WooCommerce Elements</strong>,</li>
<li><strong>WooCommerce Strings Translations</strong>,</li>
<li>and many more.</li>
</ul>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/animate-on-scroll/" rel="ugc">Animate on Scroll</a></strong> – Animate any Elements on scroll using the popular AOS JS library simply by adding class names. This plugin helps you integrate easily with AOS JS library to add any AOS animations to WordPress. Simply add the desired AOS animation to your element class name with “aos-” prefix and the plugin will add the corresponding aos attribute to the element tag.</p>
</li>
</ul>
<p> </p>


Image & Video Lightbox

Automatically adds Lightbox functionality to images and videos without the need to set the link to media file manually one by one.

Sayontan Sinha

<p>Photonic takes the WordPress gallery and super-charges it with a lot of added functionality. It adds support for several new sources and parameters to enhance the content and look-and-feel of your galleries. It supports <a href='https://flickr.com' rel="nofollow ugc">Flickr</a> photos, Albums (Photosets), Galleries and Collections, along with <a href='https://smugmug.com' rel="nofollow ugc">SmugMug</a> folders, albums and images, and <a href='https://zenfolio.com' rel="nofollow ugc">Zenfolio</a> photos, Photosets and Groups. You can also set up authentication so that visitors can see private and protected photos from each provider.</p>
<p>When used without the Gutenberg editor Photonic by default overrides the <code>gallery</code> shortcode. In case you happen to be using a theme or plugin that already overrides the <code>gallery</code> shortcode, Photonic provides you with the option to use your own shortcode for Photonic galleries. This lets your plugins coexist. Bear in mind that if you deactivate Photonic you will have to remove all instances of this custom shortcode, something that is not required if you stick to the <code>gallery</code> shortcode.</p>
<p>When used with Gutenberg Photonic creates no shortcodes, rather it creates blocks. If some of your posts were written with Gutenberg and some without, Photonic supports both scenarios.</p>
<h3>Lightboxes</h3>
<p>Of all plugins free or paid, Photonic has support built in for the highest number of lightbox scripts. This includes scripts that run on pure JavaScript without relying on external libraries, or those that require jQuery.</p>
<h4>Pure JS Libraries</h4>
<ul>
<li><a href='https://feimosi.github.io/baguetteBox.js/' rel="nofollow ugc">BaguetteBox</a></li>
<li><a href='https://henrygd.me/bigpicture/' rel="nofollow ugc">BigPicture</a></li>
<li><a href='https://biati-digital.github.io/glightbox/' rel="nofollow ugc">“Gie” Lightbox (GLightbox)</a></li>
<li><a href='https://www.lightgalleryjs.com/' rel="nofollow ugc">LightGallery</a></li>
<li><a href='https://github.com/dimsemenov/PhotoSwipe/tree/v4.1.3' rel="nofollow ugc">PhotoSwipe v4</a></li>
<li><a href='https://photoswipe.com/' rel="nofollow ugc">PhotoSwipe v5</a></li>
<li><a href='https://nextapps-de.github.io/spotlight/' rel="nofollow ugc">Spotlight</a></li>
<li><a href="https://veno.es/venobox/" rel="nofollow ugc">VenoBox</a></li>
</ul>
<h4>jQuery Based Libraries</h4>
<ul>
<li><a href='https://jacklmoore.com/colorbox/' rel="nofollow ugc">Colorbox</a></li>
<li><a href='https://fancyapps.com/fancybox/' rel="nofollow ugc">Fancybox2</a> – not GPL, so the script is not included with the plugin. See the <a href='https://aquoid.com/plugins/photonic/third-party-lightboxes/' rel="nofollow ugc">Lightboxes</a> page for details</li>
<li><a href='https://fancyapps.com/fancybox/3/' rel="nofollow ugc">Fancybox3</a></li>
<li><a href='https://noelboss.github.io/featherlight/' rel="nofollow ugc">Featherlight</a></li>
<li><a href='https://osvaldas.info/image-lightbox-responsive-touch-friendly' rel="nofollow ugc">Image Lightbox</a></li>
<li><a href='https://cornel.bopp-art.com/lightcase/' rel="nofollow ugc">Lightcase</a></li>
<li><a href='http://www.stripjs.com' rel="nofollow ugc">Strip</a></li>
<li><a href='https://brutaldesign.github.io/swipebox/' rel="nofollow ugc">Swipebox</a></li>
<li>Thickbox</li>
</ul>
<h4>Obsolete Libraries</h4>
<ul>
<li><a href='http://fancybox.net/' rel="nofollow ugc">Fancybox 1</a> – no update since November 2010</li>
<li><a href='http://dimsemenov.com/plugins/magnific-popup/' rel="nofollow ugc">Magnific Popup</a> – no update since February 2016</li>
<li><a href='http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/' rel="nofollow ugc">PrettyPhoto</a> – no update since May 2015</li>
</ul>
<p>For the non-GPL alternatives like <a href='https://fancyapps.com/fancybox/' rel="nofollow ugc">Fancybox2</a> and the obsolete libraries, Photonic has code to work with them, but you have to install the scripts yourself or rely on them from your theme or another plugin.</p>
<p>With the exception of Thickbox the lightboxes have been adapted to become touch and gesture-friendly. See the <a href='https://aquoid.com/plugins/photonic/third-party-lightboxes/' rel="nofollow ugc">Lightboxes</a> page for details.</p>
<h3>Support for Multiple Platforms</h3>
<h4>Flickr</h4>
<p>The following Flickr concepts are supported in Photonic:</p>
<ul>
<li><a href='https://aquoid.com/plugins/photonic/flickr/flickr-photos/' rel="nofollow ugc">Photos</a></li>
<li><a href='https://aquoid.com/plugins/photonic/flickr/flickr-photosets/' rel="nofollow ugc">PhotoSets (Albums)</a></li>
<li><a href='https://aquoid.com/plugins/photonic/flickr/flickr-galleries/' rel="nofollow ugc">Galleries</a></li>
<li><a href='https://aquoid.com/plugins/photonic/flickr/flickr-collections/' rel="nofollow ugc">Collections</a></li>
<li><a href='https://aquoid.com/plugins/photonic/flickr/flickr-photo/' rel="nofollow ugc">Single Photo</a></li>
<li><a href='https://aquoid.com/plugins/photonic/flickr/flickr-authentication/' rel="nofollow ugc">Authentication</a></li>
</ul>
<p>For demos of Flickr support visit the <a href='https://aquoid.com/plugins/photonic/flickr/' rel="nofollow ugc">Flickr page</a>.</p>
<h4>Google Photos</h4>
<p>Google API Change:** With effect from 31st March 2025, Google’s Photos API is discontinued (see <a href='https://developers.google.com/photos/support/updates' rel="nofollow ugc">here for Google’s official announcement</a>). Consequently, Photonic will stop working for Google Photos**. For more details, see <a href='https://wordpress.org/support/topic/potential-shutdown-of-google-photos-support-from-march-2025/' rel="ugc">this thread</a>. Note that while Google’s official announcement says otherwise, as of 20th April 2025 the API is still working, so older versions of Photonic will seem to work. However, there is no guarantee about when Google will truly shut it off.</p>
<h4>SmugMug</h4>
<p>The following SmugMug concepts are supported in Photonic:</p>
<ul>
<li><a href='https://aquoid.com/plugins/photonic/smugmug/smugmug-tree/' rel="nofollow ugc">User Tree</a></li>
<li><a href='https://aquoid.com/plugins/photonic/smugmug/smugmug-photos/' rel="nofollow ugc">Photos</a></li>
<li><a href='https://aquoid.com/plugins/photonic/smugmug/smugmug-albums/' rel="nofollow ugc">Albums</a></li>
<li><a href='https://aquoid.com/plugins/photonic/smugmug/folders/' rel="nofollow ugc">Folders</a></li>
</ul>
<p>For demos of SmugMug support visit the <a href='https://aquoid.com/plugins/photonic/smugmug/' rel="nofollow ugc">SmugMug page</a>.</p>
<h4>Zenfolio</h4>
<p>The following Zenfolio concepts are supported in Photonic:</p>
<ul>
<li><a href='https://aquoid.com/plugins/photonic/zenfolio/photos/' rel="nofollow ugc">Photos</a></li>
<li><a href='https://aquoid.com/plugins/photonic/zenfolio/photosets/' rel="nofollow ugc">PhotoSets (Galleries and Collections)</a></li>
<li><a href='https://aquoid.com/plugins/photonic/zenfolio/groups/' rel="nofollow ugc">Groups</a></li>
<li><a href='https://aquoid.com/plugins/photonic/zenfolio/group-hierarchy/' rel="nofollow ugc">Group Hierarchies</a></li>
</ul>
<p>For demos of Zenfolio support visit the <a href='https://aquoid.com/plugins/photonic/zenfolio/' rel="nofollow ugc">Zenfolio page</a>.</p>
<h4>Instagram</h4>
<p>In mid-September 2022 Meta / Facebook / Instagram changed its rules to disallow individual developers (i.e. developers not operating as a business) from meaningfully using its API. As a result, Photonic no longer works for Instagram photos. The code is still in place though, and can be used by someone with a business wishing to adopt it.</p>
<h4>Native WordPress Galleries</h4>
<p>Your existing galleries are left intact. However you can add a <code>style</code> parameter to a native gallery to open it up to Photonic. The <code>style</code> parameter can take any of the values documented on the <a href='https://aquoid.com/plugins/photonic/layouts/' rel="nofollow ugc">Layouts</a> page.</p>
<h3>Other Photonic Goodies</h3>
<h4>Gallery Wizard</h4>
<p>The WordPress Classic editor shows up with a button that says “Add / Edit Photonic Gallery”. Clicking on it launches a wizard that helps you interactively build out a gallery with just a few clicks.</p>
<h4>Gutenberg Support</h4>
<p>The Gallery Wizard can be accessed via Gutenberg / the Block Editor as well. While creating a block, just look for Photonic. Please refer to the <a href='https://aquoid.com/plugins/photonic/gutenberg-support/' rel="nofollow ugc">documentation</a>.</p>
<h4>Video Support</h4>
<p>Photonic provides gallery and lightbox support for <a href='https://aquoid.com/plugins/photonic/videos/' rel="nofollow ugc">videos as well</a>. Videos of the following sorts are supported:</p>
<ul>
<li>External videos from YouTube or Vimeo can be opened in any of the lightboxes apart from Image Lightbox, Thickbox or BaguetteBox</li>
<li>Self-hosted or external videos in MP4 formats can be opened in any of the lightboxes apart from Image Lightbox, PrettyPhoto, Strip or Thickbox</li>
<li>Videos hosted by external service providers (Flickr, SmugMug etc.) can be opened as a part of a gallery in any of the lightboxes apart from Image Lightbox, PrettyPhoto, Strip or Thickbox. Some lightboxes have issues with specific features. Please refer to the <a href='https://aquoid.com/plugins/photonic/third-party-lightboxes/' rel="nofollow ugc">Lightboxes</a> documentation for more.</li>
</ul>
<h4>Deep-Linking and Social Sharing</h4>
<p>Photonic provides deep-linking support for non-WP images, and by extension, supports social sharing to Facebook, Twitter and Pinterest.</p>
<h4>Beautiful Layouts</h4>
<p>Photonic displays your galleries in multiple forms:</p>
<ul>
<li>A grid of square thumbnails (the default)</li>
<li>A grid of circular thumbnails (like Jetpack)</li>
<li>A neat justified grid</li>
<li>A masonry layout</li>
<li>A “horizontal” masonry layout, for those who prefer having their masonry layouts sorted horizontally</li>
<li>A tiled, random mosaic (a much improved variant of the Jetpack Tiled Gallery layout)</li>
<li>A slideshow, using the <a href='https://splidejs.com' rel="nofollow ugc">Splide</a> script</li>
</ul>
<p>See the <a href='https://aquoid.com/plugins/photonic/layouts/' rel="nofollow ugc">Layouts</a> documentation page for details and examples.</p>
<h3>Obsessively Comprehensive Documentation (OCD)</h3>
<p>Photonic’s <a href='https://aquoid.com/plugins/photonic/photonic-documentation/' rel="nofollow ugc">documentation</a> is comprehensive to the point of obsession. And yet, if you find something missing, please feel free to get in touch via the support forum.</p>


Photonic Gallery & Lightbox for Flickr, SmugMug & Others

This free gallery plugin works very well with the Media Library Assistant. I prefer the dynamic MLA shortcode over the fixed pre-selection of images. The resulting carousels look great. Best of all, this plugin is free.

The support by the developer is very quick and friendly. He looked almost immediately at my support ticket and it was solved within an hour.

Great and free carousel slider

Galleries on steroids! A stylish lightbox & gallery plugin for WP, Flickr, SmugMug and Zenfolio photos and videos.

Image & Video Lightbox vs Photonic Gallery & Lightbox for Flickr, SmugMug & Others