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”
- 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”
To popup an image give the anchor tag around the image this class: “hs-rsp-popup”
<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”:
You can also use this to show html content. For local content just use the id of the element for the href:
For remote content, link to the page, for example:
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.
Note: for this to work, you have to use both the data-popupwidth and data-popupheight attributes.
മച്ചാനെ പൊളിച്ചു !!! സാധനം സിമ്പിൾ ആണ്, ബട് പവര്ഫുള് !!!
Easy to implement and it does what i wanted.
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
- Fixed: Firefox close issue
- Fixed: hidden div popup
- UI Enhancements: new icons, hover states for ‘gallery’ and fade effect instead of ‘slide-down’
- New: Set width & height of image/iframe popup
- Update to the readme file
- Initial version