jquery.ql_zoom.js

A jQuery zoom plugin that uses canvas.

v0.0.3

About

Uses an asychronously loaded full size image to create a "magnifying glass" effect on a scaled image with the HTML5 canvas element. See an example here.

Usage

Just invoke the plugin on a parent element which wraps your image.

<div id="elem">
  <img src="/path/to/scaled.jpg" data-url="/path/to/full_sized/jpg" />
</div>

...

$('#elem').ql_zoom(options);

Where options is a hash of settings. Here are the configurable options and their default values:

• width: '200px'
  • Distance in pixels
  • Controls the width of the zoom viewer
• height:'200px'
  • Distance in pixels
  • Controls the height of the zoom viewer
• speed: 800
  • Time in milliseconds
  • Sets the speed of the fade in / out of the zoom viewer
• throttle: 50
  • Time in milliseconds
  • Sets the $.throttle() timeout. See Ben Alman's throttle-debounce plugin
• pointer: 'crosshair'
  • CSS value
  • Changes the style applied to the mouse pointer
• canvas_style: 'border:1px solid #444;'
  • CSS string
  • Any additional CSS you'd like to apply to the canvas element when it's initialized

In addtion to throttle, jquery.ql_zoom uses Paul Irish's imagesLoaded event to help with reliable cross browser image loading.