Documentation

To use in your project copy the build folder, and add a script tag referencing the build file: 


<script src="./build/jquery.dramaticzoom.min.js"></script>
If you want the zoom editor (magnifying glass icon over image to set options) you will need to copy over editor_img folder, and reference the CSS and JS editor files:


<link rel="stylesheet" href="./build/jquery.dramaticzoom_editor.css">
<script src="./build/jquery.dramaticzoom_editor.min.js"></script>
You call the plugin on your image with the options you want:

$("#img_id").DramaticZoom({	 
	editor: true, 
	camera_x: 190, camera_y: 60, 
	camera_width: 80, camera_height: 80, 
	interpolator_index: 28, 
	duration: 500, 
	event: 'mouseover'
});
Your image will be replaced with an HTML5 canvas. Now doing the event will zoom the image, or you can call the doZoom() function to zoom. If you are not sure what options to use for your image, use the Zoom Tester to load an image and output the options you want.


Options

event Valid options are 'click', 'mouseover', 'dblclick', 'auto' (automatically zooms over and over), and 'none' which means you'll have to use the api to call the zoom.
editor Is the editor is enabled? (boolean value)
camera_x, camera_y, camera_width, camera_height These options set where the zoom occurs. The camera_x and camera_y are the CENTER of where the zoom occurs.
duration How long does it take to zoom in on the target? (in milliseconds)
interpolator_index The index of the interpolator used. Interpolators allow the zooming to occur non-linearly. To find out the index of the interpolator you want you can try different interpolators in the Zoom Tester.
reset_time How long before the image should reset after zooming in?
width, height A canvas is created to replace the image you want zoomed. You can set the width/height of the canvas... otherwise the original image width/height will be used.
constrain_editor_proportions When using the editor is the zoom target proprotional to the image. If it is then resizing in the editor occurs proportional to image width/height.


API Methods


doZoom()


After initializing the zoom canvas, you can call the zoom with the doZoom() function: 
					
$().DramaticZoom.doZoom("#img_id");

updateOptions()


You can update the options on the fly by calling the updateOptions function: 
				
$.fn.DramaticZoom.updateOptions("#img_id", 
{	
	camera_x: 354, camera_y: 83,
	camera_width: 127, camera_height: 112,
	interpolator_index: 64
});