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.

DaganLev

huntlyc

Simple, easy to use, fancybox style popup.
Works for all images in your page that are in anchor tags. If it finds more than one, it will create a small gallery you can navigate through with the buttons or your keyboard. Advanced users can open iframes and html content in it fairly easily.
<h4>Avanced users</h4>
<h4>Basic use</h4>
Anchor class for popup: “hs-rsp-popup”
<h4>Advanced use</h4>
<ul>
<li>disable gallery feature and popup for image by adding this class: no-hsrsp-popup</li>
<li>anchor classes for iframe popup “hs-rsp-popup iframe”</li>
<li>anchor classes for html popup “hs-rsp-popup hiddendiv”</li>
</ul>
<h4>Examples</h4>
To popup an image give the anchor tag around the image this class: “hs-rsp-popup” 
Example: <code><a href="image.png" class="hs-rsp-popup"><img src="image.png" alt="image"/></a></code>
For an iframe, set the srct of the iframe and use the class “iframe” combined with “hs-rsp-popup”: 
 <a href="http://www.youtube.com/watch?hl=en-GB&v=2WNrx2jq184&gl=GB" title="Bird is the word" rel="nofollow ugc">Watch this</a>
You can also use this to show html content. For local content just use the id of the element for the href: 
 <a href="#elementid" rel="nofollow ugc">click here</a> 
 Hello, World!
For remote content, link to the page, for example: 
 <a href="http://www.hotscot.net" rel="nofollow ugc">click here</a>
<h4>Setting Popup Size (image/iframe)</h4>
You can use the following html5 data attributes in your link to set the size: <code>data-popupheight="100" data-popupwidth="300"</code> These values are in pixels.
For Example: 
 <a href="image.png" rel="nofollow ugc"></a>
Note: for this to work, you have to use both the data-popupwidth and data-popupheight attributes.

Really Simple Popup

Simple, easy to use, fancybox style popup

WP fancybox vs Really Simple Popup