Touch Zoom is a jQuery plugin that allows your user to zoom into an image using their mouse or finger depending on the viewing device. It works well in all modern browsers, degrades gracefully in IE8 and IE7 and is optimized for responsive web design. There are a lot of features that are available if you purchase the full version including: customized gesture, borders, zoom and animation control and an optional parameter that allows the user to implement a conditional load for the large image, which is only called when the user interacts with it.

Try it for yourself (on desktop & touch devices):

On desktops: Double click the first image. Hover over the second image. Press and hold the third image.

On touch devices: Double tap the first image. Tap and hold the second image. Tap and hold (1 sec) the third image.

I. Usage


In your <head> tag include the following lines of code to import the component:

   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/zoom_touch_min.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
      $(document).ready(function() {
         $('#touchzoom').zoomtouch({
            imgLarge:"image path",
            origW:2500,
            origH:1200
         });
      });
   </script>
You must include imgLarge, origW, and origH when instantiating EVERY instance of this plugin.

Within your <body> tag you must create a <div> with a unique id for each instance of the tap zoom component.
   <div id="touchzoom"></div>

Nesting a <div> inside another <div> with a set size may help with your layout (of course you can also do this with stylesheets).
   <div style="width:300px;height:300px"><div id="touchzoom"></div></div>

The id of this </div> must match the id when you instantiate the component.

The <div> can also be nested within a container to allow for responsive layout.
   <div class="container"><div id="touchzoom"></div></div>

You must define a width for the container div in order for the image to render properly.

II. Options


The plugin has the following options you can use to customize the experience:

imgLarge *required

A string that is the path of your large, zoomed image.
Default is "none".

imgSmall

A string that is the path of your smaller, unzoomed image. This is optional.
Leaving this as its default value, the plugin will always load in the larger image.
This can be used for conditional loading on touch devices. The large image will only load if the user interacts with smaller image.
Default is "none".

origW *required

A number to represent the max width of your zoomed image.
If your image is set up to be responsive, it will never get larger than the width defined here.
You can make your zoom settings larger than the actual image, but the image quality will suffer.
Default is 0.

origH *required

A number to represent the max height of your zoomed image.
If your image is set up to be responsive, it will never get larger than the height defined here.
You can make your zoom settings larger than the actual image, but the image quality will suffer.
Default is 0.

Full Version Features

These features are detailed in the documentation that comes with the purchased files. These features include:

Border width and color

Animation and interaction control

Image scale options

... and many more.

 

You must include imgLarge, origW, and origH when instantiating EVERY instance of this plugin.

III. What's Included?


This package comes with the following files:

  • index.html - the html file that is a working example and the documentation
  • single.html - a simple working example
  • images - a folder of the example's images
  • style.css - the style sheet for the html page. No style sheet is needed for the touch zoom images.
  • zoom_touch.js - the touch zoom js file
  • zoom_touch_min.js - the minimized touch zoom js file

IV. Best Practices


Include this viewport meta code in your <head> tag for best results when viewing on touch devices.

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">

V. External Sources


jQuery http:jquery.com/