Contact | Local Ad server

News and Events

TechCrunch - Hi-tech industry news


PayPal-Standard-Logo

Rvolve Zoompics

Try it now! For your site or blog. It's free.

Search the Web for an image to try



Demos

Auto-zoom [Source Code]
Multiple images [Source Code]
Auto-pan [Source Code]
Auto-pan and auto-zoom [Source Code]

Static images scaled [Source Code]
Responsive image filling container [Source Code]
Clickable hotspots [Source Code]
Fancy borders [Source Code]



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

Hosted
Traffic Price
Unlimited * Free
0-3K hits/month ^ $3 /month
3K-300K hits/month ^ $30 /month
300K+ hits/month ^ $300 /month
Download
  Developers Sites Price
Open * Unlimited Unlimited Free
Professional ^ 1 1 $29.99
Developer ^ 1 Unlimited $250
Enterprise ^ Unlimited Unlimited $2000
Purchase a White-label version, or use free with a watermark

* Free includes an watermark
^ White-label without an watermark



Using Zoompics in your project

Include the following script in the header:

<script src="http://rvolve.com/js/zoom-pic-intro-3.0.js" type="text/javascript"></script>

and then include a zoompic, or several zoompics anywhere on your page with e.g.

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>

<!-- Include one div for each zoompic -->                        
<div id="my_zoom1" class="zoompic" data-src="http://rvolve.com/images/zoomdemo0.jpg" data-animate="true" data-width="400" data-height="250" data-zoomicon="gray"></div>

Click for

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