Rvolve Zoompics
Try it now! For your site or blog. It's free.
Demos
About
This picture zoomer can be added to your own site for free, and is open source, with the proviso that the 'Rvolve' watermark remains in view. White-label Zoompics without a logo are available to license.
You can use the pics to display any .jpg, .gif or .png on your site at any scale, and they're responsive to screen size changes and pinch to zoom on tablets. With the animations off (no watermark is then required) it is an easy way to scale images dynamically when you're embedding them in your webpage.
Pure Javascript. Compatible with iPad, iPhone, Android, Firefox, IE 7+, Chrome, Safari, Opera
Prices
| Traffic | Price |
| Unlimited * | Free |
| 0-3K hits/month ^ | $3 /month |
| 3K-300K hits/month ^ | $30 /month |
| 300K+ hits/month ^ | $300 /month |
| Developers | Sites | Price | |
Open * 
|
Unlimited | Unlimited | Free |
| Professional ^ | 1 | 1 | $29.99 |
| Developer ^ | 1 | Unlimited | $250 |
| Enterprise ^ | Unlimited | Unlimited | $2000 |
* Free includes an 
watermark
^ White-label without an watermark
Using Zoompics in your project
Copy the following HTML code into your page and adjust as necessary:
<!-- Put this script line in header if you can --><script src="http://rvolve.com/js/zoom-pic-intro-3.1.js" type="text/javascript"></script>
|
1.
Where:
id: required to be unique per image, but can be anything
class: required and must be 'zoompic'
data-src: the source of the .png, .jpg or .gif, just like an img src tag. This can be relative or absolute.
data-animate: switch this to false for a resized image only (white-label, as no logo shows)
data-width: the new width of the image, irrespective of the size of the source image
data-height: the new height of the image, irrespective of the size of the source image
data-border: css border tag e.g. 'solid 1px #DDDDDD'
data-autopan: automatically pan to show the complete image, true or false
data-autozoom: automatically zoom, true or false
data-maxzoom: maximum zoom factor (defaults to 3)
data-zoomicon: displays the +/- icon in the top left hand corner. Can be 'gray','blue','white', 'black', or a custom image URL, a 39x26 pixel transparent .png
data-resp-width: % of the parent div width e.g. '100'. Use in responsive page designs. Will stay in the same ratio as the data-width/data-height, but be a fraction of the parent div's size at the time of page opening.
usemap: hotspot links in HTML5 usemap format. Supports map area 'rect' rectangles.
data-src-large: an optional larger version of the image that is loaded after the data-src image. Useful for having a smaller thumbnail version in data-src, which is loaded by low-bandwidth devices.
data-large-timeout: timeout while loading smaller data-src image that decides whether to load the larger image. Defaults to 2000 milliseconds.
Note: You can wrap the <div> with an <a href=""> </a> to provide a link.
Free Support
Want integration with your shopping cart? We offer free support to get the Zoompics integrated for commercial license holders.
Resellers
We offer resellers the ability to market Zoompics and earn a significant commission. Please contact us for more information, or make your way to ClickBank and search for 'Zoompics' on the marketplace.
blog comments powered by Disqus