DaganLev

huntlyc

<p>Simple, easy to use, fancybox style popup.</p>
<p>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.</p>
<h4>Avanced users</h4>
<h4>Basic use</h4>
<p>Anchor class for popup: “hs-rsp-popup”</p>
<h4>Advanced use</h4>
<ul>
<li>disable gallery feature and popup for image by adding this class: <strong>no-hsrsp-popup</strong></li>
<li>anchor classes for <strong>iframe</strong> popup <em>“hs-rsp-popup iframe”</em></li>
<li>anchor classes for <strong>html</strong> popup <em>“hs-rsp-popup hiddendiv”</em></li>
</ul>
<h4>Examples</h4>
<p>To popup an image give the anchor tag around the image this class: <em>“hs-rsp-popup”</em><br />
Example: <code><a href="image.png" class="hs-rsp-popup"><img src="image.png" alt="image"/></a></code></p>
<p>For an iframe, set the srct of the iframe and use the class <em>“iframe”</em> combined with <em>“hs-rsp-popup”</em>:<br />
    <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></p>
<p>You can also use this to show html content. For local content just use the id of the element for the href:<br />
    <a href="#elementid" rel="nofollow ugc">click here</a><br />
    Hello, World!</p>
<p>For remote content, link to the page, for example:<br />
    <a href="http://www.hotscot.net" rel="nofollow ugc">click here</a></p>
<h4>Setting Popup Size (image/iframe)</h4>
<p>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.</p>
<p>For Example:<br />
    <a href="image.png" rel="nofollow ugc"></a></p>
<p><strong>Note:</strong> for this to work, you have to use <em>both</em> the data-popupwidth and data-popupheight attributes.</p>


Really Simple Popup

Simple, easy to use, fancybox style popup

Silkalns

<p>Seamlessly integrates FancyBox into your blog: Upload, activate, and you’re done. Additional configuration optional.</p>
<p>You can easily customize almost anything you can think about fancybox lightbox: the border, margin width and color, zoom speed, animation type, close button position, overlay color and opacity and even more advanced option like several options to group images into galleries, and more…</p>
<p>By default, the plugin will use jQuery to apply FancyBox to ANY thumbnails that link directly to an image. This includes posts, the sidebar, etc, so you can activate it and it will be applied automatically.</p>
<h4>Further Reading</h4>
<p>This plugin is developed and maintained by Colorlib. Which is well know for their free <a href="https://colorlib.com/wp/themes/" rel="nofollow ugc"></a>WordPress themes. However, now they are looking to extend their presence in plugin development and believe that FancyBox lightbox is a great way to start.</p>
<p>If you are new to WordPress and want to lear more we have got you covered. Colorlib will teach you have to <a href="https://colorlib.com/" rel="nofollow ugc">start a blog</a> or <a href="https://colorlib.com/wp/how-to-make-a-website/" rel="nofollow ugc">create a website</a> and much more. If you are already familiar with WordPress you likely want to learn how to make it faster and more reliable. That’s when you want to look into hosting and more specifically <a href="http://colorlib.com/wp/wordpress-hosting" rel="nofollow ugc">WordPress hosting</a>.</p>
<p>If you enjoy using FancyBox lightbox for WordPress please leave a <a href="https://wordpress.org/support/plugin/fancybox-for-wordpress/reviews/?filter=5" rel="ugc">positive feedback</a>. We are committed to make it the best lightbox plugin for WordPress.</p>


FancyBox for WordPress

Seamlessly integrates FancyBox lightbox into your WordPress blog: Upload, activate, and you're done. Additional configuration optional.

Really Simple Popup vs FancyBox for WordPress