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.

Table of Contents

I. Usage

Full detailed options are provided with purchase.

II. Options

Full detailed instructions for use are provided with purchase.

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/