Simple, easy to use, fancybox style popup
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.
Anchor class for popup: “hs-rsp-popup”
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”:
Watch this
You can also use this to show html content. For local content just use the id of the element for the href:
click here
Hello, World!
For remote content, link to the page, for example:
click here
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.
Note: for this to work, you have to use both the data-popupwidth and data-popupheight attributes.
/wp-content/plugins/
directoryn/a
Removed console.log
Add hs-rsp-nogallery class to any image on the page to prevent the gallery from working
Removed console log left over (can effect IE)
Add ‘no-hsrsp-popup’ class to image to not have it part of gallery/popup. Fixed but on set width/height window resize
Reverted body scroll fix as it was having undesirable effects