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.

dFactory

<h4>Everything You Need in a WordPress Gallery Plugin</h4>
<p><a href="http://www.dfactory.co/products/responsive-lightbox/?utm_source=repo&utm_medium=link&utm_campaign=responsive-lightbox-plugin-free" rel="nofollow ugc">Responsive Lightbox and Gallery plugin</a> is a fully fledged WordPress gallery plugin with a powerful Drag & Drop Gallery Builder and Lightbox functionality that’s used daily by more than 300,000 active users and downloaded over 3 Million times.</p>
<p>The beauty of it is how easy it is for you to customize it and enhance its features thanks to <a href="?utm_source=repo&utm_medium=link&utm_campaign=responsive-lightbox-plugin-free" rel="nofollow ugc">free and premium extensions</a>.</p>
<h4>Why You Should Use Responsive Lightbox and Gallery Plugin</h4>
<h4>Easiest Gallery Builder</h4>
<p>Say goodbye to coding. With the built-in drag and drop Gallery builder, you will be able to create beautiful galleries, customize them, and add your preferred styles in minutes.</p>
<h4>Vast Customization Options</h4>
<p>Responsive Lightbox and Gallery plugin is packed with customization options per each gallery and lightbox style so you can tweak them to suit your website’s audience with just a few clicks.</p>
<h4>SEO-Friendly and Lightweight</h4>
<p>Responsive Lightbox and Gallery plugin is built keeping SEO and performance in mind, making it lightweight and fast when it comes to page load.</p>
<h4>Premium Extensions</h4>
<p>Looking to provide a premium experience to your visitors? Responsive Lightbox and Gallery plugin offers plenty of premium extensions to provide you with even more flexibility and customization options.</p>
<p>Need more reasons? <a href="http://www.dfactory.co/products/responsive-lightbox/?utm_source=repo&utm_medium=link&utm_campaign=responsive-lightbox-plugin-free" rel="nofollow ugc">Check them out here</a>!</p>
<h4>What some of our 300,000+ active users say about Responsive Lightbox and Gallery plugin</h4>
<blockquote>
<p>Amazing Gallery plugin!</p>
<p>Versatile and powerful for both sliders and galleries, many features and style options.</p>
<p>Really easy to use. Takes all the fiddling out of the process of creating a responsive gallery/lightbox.</p>
<p>I needed a lightbox plugin that works reliably. This marvelous plugin does the magic. Now I can spend more on my photography and less time customizing WordPress.</p>
<p>This plugin is quite flexible and effective. The functionality choices are broad and all quite easy to configure.</p>
</blockquote>
<h4>Need more galley options?</h4>
<p>Responsive Lightbox and Gallery plugin can be extended with our <a href="?utm_source=repo&utm_medium=link&utm_campaign=responsive-lightbox-plugin-free" rel="nofollow ugc">premium extensions</a>:</p>
<p><strong>Premium Extensions:</strong></p>
<blockquote>
<p><a href="http://www.dfactory.co/products/photo-art-bundle/" rel="nofollow ugc">Photo & Art bundle</a><br />
  <a href="http://www.dfactory.co/products/justified-gallery/" rel="nofollow ugc">Justified Gallery</a><br />
  <a href="http://www.dfactory.co/products/expander-gallery/" rel="nofollow ugc">Expander Gallery</a><br />
  <a href="http://www.dfactory.co/products/hidden-gallery/" rel="nofollow ugc">Hidden Gallery</a><br />
  <a href="http://www.dfactory.co/products/masonry-gallery-pro/" rel="nofollow ugc">Masonry Image Gallery</a><br />
  <a href="http://www.dfactory.co/products/slider-gallery/" rel="nofollow ugc">Slider Gallery</a><br />
  <a href="http://www.dfactory.co/products/lightcase-lightbox/" rel="nofollow ugc">Lightcase Lightbox</a><br />
  <a href="http://www.dfactory.co/products/photoswipe-lightbox/" rel="nofollow ugc">PhotoSwipe Lightbox</a><br />
  <a href="http://www.dfactory.co/products/lightgallery-lightbox/" rel="nofollow ugc">Lightgallery Lightbox</a><br />
  <a href="http://www.dfactory.co/products/strip-lightbox/" rel="nofollow ugc">Strip Lightbox</a><br />
  <a href="http://www.dfactory.co/products/fancybox-pro/" rel="nofollow ugc">Fancybox Pro</a><br />
  <a href="http://www.dfactory.co/products/lightbox-comments/" rel="nofollow ugc">Lightbox Comments</a></p>
</blockquote>
<h4>Full Feature List</h4>
<ul>
<li>Powerful and easy-to-use gallery builder</li>
<li>3 beautiful gallery templates – Grid, Slider and Masonry</li>
<li>7 responsive lightbox scripts (SwipeBox, prettyPhoto, Nivo Lightbox, Image Lightbox, Tos “R” Us, Featherlight, Magnific Popup)</li>
<li>Create galleries from Media Library or Post attached images</li>
<li>Media Folders with a drag & drop interface</li>
<li>Access to millions of images through Remote Library</li>
<li>Option to import remote images to Media Library</li>
<li>Gutenberg editor compatibility</li>
<li>Iframe, Ajax, HTML5 and Inline lightbox content support</li>
<li>Advanced pagination, incl. AJAX and infinite scroll</li>
<li>Automatically add lightbox to WordPress image galleries</li>
<li>Automatically add lightbox to WordPress image links</li>
<li>Automatically add lightbox to WordPress video links (YouTube, Vimeo)</li>
<li>Automatically add lightbox to widgets content</li>
<li>Automatically add lightbox to WordPress comments content</li>
<li>WooCommerce product gallery support</li>
<li>Popular Page builders compatibility</li>
<li>Gallery widget</li>
<li>Single image widget</li>
<li>Option to display single post images as a gallery</li>
<li>Option to modify native WP gallery links image size</li>
<li>Option to set gallery images title from image title, caption, alt or description</li>
<li>Option to force lightbox for custom WP gallery replacements like Jetpack tiled galleries</li>
<li>Option to trigger lightbox on custom jquery events</li>
<li>Option to conditionally load scripts and styles only on pages that have images or galleries in post content</li>
<li>Highly customizable settings for each of the lightbox scripts</li>
<li>Highly customizable settings for each gallery</li>
<li>Multisite support</li>
<li>.pot file for translations included</li>
</ul>


Responsive Lightbox & Gallery


This plugin have +5 months old bugs and no one fixes these 


Not supported anymore

The most popular lightbox plugin and responsive gallery builder for WordPress.

Image & Video Lightbox vs Responsive Lightbox & Gallery