Simple, easy to use, fancybox style popup
| Author: | Hotscot (profile at wordpress.org) |
| WordPress version required: | 3.5.1 |
| WordPress version tested: | 4.0.1 |
| Plugin version: | 1.0.11 |
| Added to WordPress repository: | 01-04-2013 |
| Last updated: | 03-12-2014
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
|
| Rating, %: | 92 |
| Rated by: | 10 |
| Plugin URI: | http://www.hotscot.net/ |
| Total downloads: | 19 040 |
| Active installs: | 600+ |
 Click to start download |
|
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.
Avanced users
Basic use
Anchor class for popup: "hs-rsp-popup"
Advanced use
- disable gallery feature and popup for image by adding this class: no-hsrsp-popup
- anchor classes for iframe popup "hs-rsp-popup iframe"
- anchor classes for html popup "hs-rsp-popup hiddendiv"
Examples
To popup an image give the anchor tag around the image this class: "hs-rsp-popup"
Example: <a href="image.png" class="hs-rsp-popup"><img src="image.png" alt="image"/></a>
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" class="hs-rsp-popup iframe" title="Bird is the word">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" class="hs-rsp-popup hiddendiv">click here</a>
<div id="elementid" style="display:none">Hello, World!</div>For remote content, link to the page, for example:
<a href="http://www.hotscot.net" class="hs-rsp-popup hiddendiv">click here</a>Setting Popup Size (image/iframe)
You can use the following html5 data attributes in your link to set the size: data-popupheight="100" data-popupwidth="300" These values are in pixels.
For Example:
<a href="image.png" class="hs-rsp-popup" data-popupheight="100" data-popupwidth="300"><img src="image.png" alt="image"/></a>Note: for this to work, you have to use both the data-popupwidth and data-popupheight attributes.
FAQ
ChangeLog