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

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.

Really Simple Popup vs WP fancybox