Noor Alam

<a href="https://noorsplugin.com/wordpress-fancybox-plugin/" rel="nofollow ugc">WP fancybox</a> plugin adds fancybox lightbox effect to your WordPress website. The lightbox looks great on desktop as well as mobile devices.
<h3>WP fancybox Features</h3>
<ul>
<li>Responsive lightbox popup using fancybox</li>
<li>Designed with a mobile first approach so it looks great on desktop, mobile and tablet devices</li>
<li>Quick and easy setup</li>
<li>Open lightbox popup from either a text link or a thumbnail image link</li>
<li>YouTube video popup</li>
<li>Vimeo video popup</li>
<li>Use a simple shortcode to pop up content in lightbox</li>
</ul>
<h3>How to Use WP fancybox</h3>
Image in lightbox
Create a new post/page and use the following shortcode to create a text/image link which will open lightbox once clicked:
<pre><code>[wp_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" hyperlink="click here to pop up image"]
</code></pre>
here, url is the link to the media file that you wish to open in lightbox and hyperlink is the anchor text/image.
<pre><code>[wp_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" hyperlink="https://example.com/wp-content/uploads/images/thumb.jpg"]
</code></pre>
YouTube video in lightbox
<pre><code>[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g" hyperlink="click here to pop up youtube video"]
</code></pre>
Vimeo video in lightbox
<pre><code>[wp_fancybox_media url="https://vimeo.com/1084537" hyperlink="click here to pop up vimeo video"]
</code></pre>
Alternate Text for an Image
<pre><code>[wp_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" hyperlink="https://example.com/wp-content/uploads/images/thumb.jpg" alt="Thumbnail image description"]
</code></pre>
Custom CSS
You can specify your own CSS class in the shortcode to customize a text/image link.
<pre><code>[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g" hyperlink="click here to pop up youtube video" class="custom_class"]
</code></pre>
Multiple CSS classes can be separated with a space. For example:
<pre><code>[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g" hyperlink="click here to pop up youtube video" class="custom_class custom_class2"]
</code></pre>
For detailed documentation please visit the <a href="https://noorsplugin.com/wordpress-fancybox-plugin/" rel="nofollow ugc">WordPress fancybox</a> plugin page

WP fancybox

View image, YouTube video, Vimeo video, inline HTML in lightbox. Add fancybox lightbox effect to your WordPress site.

WPJoli

Supercharge your image & gallery links by displaying a simple, modern, & powerful lightbox.
Works with native guttenberg image/gallery blocks.
<h4>⭐ CHECK OUR OTHER PLUGINS</h4>
<ul>
<li><a href="https://wordpress.org/plugins/joli-faq-seo/" rel="ugc">Joli FAQ SEO</a></li>
<li><a href="https://wordpress.org/plugins/joli-table-of-contents/" rel="ugc">Joli Table Of Contents</a></li>
</ul>
<h3>Why should I choose Joli CLEAR Lightbox over another plugin ?</h3>
<ul>
<li>It does not rely on jQuery</li>
<li>It does not load unless it has to.</li>
<li>It has a very small footprint (only one minified .css file (4Ko) & one minified .js file (8Ko)) </li>
<li>Icons are made from pure CSS, there is no extra images loading.</li>
<li>It does not provide a bunch of heavy unnecessary features.</li>
<li>It loads after your content.</li>
<li>It is meant to remain simple yet offering full customization.</li>
<li>It has been made with love.</li>
</ul>
Dependency-free: No jQuery, only pure JavaScript.
Performance friendly: Styles/Scripts DO NOT load if there are no image links within the content.
Joli CLEAR Lightbox stands for the following:
Customizable
Lightweight
Elegant
Accessible
Responsive.
<h4>Features</h4>
<ul>
<li>Display on posts or pages</li>
<li>Customize media types (jpg, png, gif etc)</li>
<li>Transparent GIF/PNG support</li>
<li>Fully responsive with swipe gestures.</li>
<li>Dark & Light color scheme</li>
<li>Enable/disable Loop over when the first/last image has been reached</li>
<li>Enable/disable Esc key to close the lightbox</li>
<li>Enable/disable Arrow keys navigation</li>
<li>Enable/disable Close on click-away</li>
<li>Display/hide counter</li>
<li>Display/hide caption</li>
<li>Customizable Vertical/horisontal paddings</li>
<li>Customizable background color</li>
<li>Customizable background opacity</li>
<li>Enable/disable background blue</li>
<li>Customizable navigation buttons height</li>
<li>Enable/disable frame border</li>
<li>Developer-friendly. Hooks provided. (See below for details).</li>
</ul>
<h4>Pro Features</h4>
<a href="https://wpjoli.com/joli-clear-lightbox/" title="Joli CLEAR Lightbox Pro" rel="nofollow ugc">Get Joli CLEAR Lightbox Pro</a>
<ul>
<li>All of the free features.</li>
<li>AmbiBackground™: this unique feature makes the background have the same color tone as the current image. It provides a beautiful immersion to the viewer.</li>
<li>Custom Post Type Support.</li>
<li>14+ Themes Included.</li>
<li>Customizable idle timer.</li>
<li>Customizable Maximum image height.</li>
<li>Customizable Maximum image width.</li>
<li>Customizable Border width.</li>
<li>Customizable Rounded corners radius.</li>
<li>Customizable Border opacity.</li>
<li>Enable/disable Frame shadow.</li>
<li>Customizable Image rounded corners radius.</li>
<li>Force Enable/Disable Lightbox per post settings.</li>
<li>Override global theme per post settings.</li>
</ul>
Supported post types: 
* Post 
* Pages 
* Custom Post Type (Pro only)
<h3>Hooks</h3>
How to use ?
Copy & paste the code examples below into your theme’s functions.php file:
<h4>Filters</h4>
<ul>
<li><code>joli_clear_lightbox_disable_lightbox</code></li>
</ul>
Globally disables Joli CLEAR Lightbox site-wide.
<pre><code>add_filter('joli_clear_lightbox_disable_lightbox', function(){ return true; });
</code></pre>
<ul>
<li><code>joli_clear_lightbox_options</code></li>
</ul>
Customizes the options programmatically.
<pre><code>add_filter('joli_clear_lightbox_options', 'my_custom_options_function');
</code></pre>
<h4>Actions</h4>
<ul>
<li><code>joli_clear_lightbox_before_rendering</code> 
Do something before rendering the lightbox</li>
</ul>

Joli CLEAR Lightbox

Ultralight Lightbox for WordPress. Designed for Speed. No jQuery. Responsive with gestures. Simple, Elegant, yet highly Customizable.

WP fancybox vs Joli CLEAR Lightbox