Getting Started

1. To use in your project copy the build folder, and add a script tag referencing the build file (jQuery is also needed): 


<script src="./build/jquery.dramaticzoom.min.js"></script>

2. To start using the zoom you need an image added to the page:

<img id="kirk" src="./testimg/kirk_dramatic.jpg"/>


3. Now that the image is added you can add a script tag to your page calling the plugin for that image on startup:

$(function()
{			
	$('#kirk').DramaticZoom({});		
});

Result: (zooms when clicked)


This basic version isn't very useful. What we need is to pick an area to zoom in on. If you open the image in an image editor with a ruler you can see where the center of the zoom should be:

The center of the zoom should be 124 pixels over and 50px down. The camera_x and camera_y specify where the image should zoom, so you can now update the code in the last step using those properties: 

$(function()
{			
	$('#kirk').DramaticZoom({
		camera_x: 124,
		camera_y: 50
	});		
});
Result:



Now that the location is set we can change the event that the zoom occurs. You can use 'click', 'mouseover' or 'dblclick' if you want the user to initiate the zoom. If you just want the zoom to repeatedly occur you can use 'auto'. Let's update the code in step 3 with the auto variable: 

$(function()
{			
	$('#kirk').DramaticZoom({
		camera_x: 124,
		camera_y: 50,
		event: 'auto'
	});		
});
Result:


Now let's make the zoom more unique. You can use an "interpolator" to specify how the zoom occurs. Here is a list of all the interpolators and their index to reference them.
Let's use interpolator index 68: . It jumps up, stays at that zoom for a while, then zooms all the way out. 

$(function()
{			
	$('#kirk').DramaticZoom({
		camera_x: 124,
		camera_y: 50,
		event: 'auto',
		interpolator_index: 68
	});		
});
Result:

The zoom seems like it happens pretty fast, so if you want to slow it down you can specify a duration. The duration is specified in milliseconds. The default is .5 seconds. (500 milliseconds). Let's set it to 2 seconds... 

$(function()
{			
	$('#kirk').DramaticZoom({
		camera_x: 124,
		camera_y: 50,
		event: 'auto',
		interpolator_index: 68,
		duration: 2000
	});		
});
Result:

So now we have an interesting zoom effect.

This is just one example of using this plugin, you can either look at the documentation for more options, or use the zoom tester to load your own image and test the settings.