Some code

Zooming into a predefined image area is very simple. All you need to know are the coordinates of the edges in the original image: x1, y1 (top left corner) and x2, y2 (bottom right corner). You will then need to pass this coordinates to the method jQuery.fn.axZm.zoomTo() and bind the method to any event:

<a href='javascript: void(0)' onclick="jQuery.fn.axZm.zoomTo({x1: 2584, y1: 1650, x2: 3424, y2: 2210, motion: 'easeOutBack', motionZoomed: 'easeOutSine', speed: 1500, speedZoomed: 750}); return false;">Zoom to rect</a>

You can also zoom to a certain point knowing only the x1 and y1 coordinates or even define x1 and y1 as percentage. With the additional property "zoomLevel" you can adjust the final level of zoomed area.

<a href='javascript: void(0)' onclick="jQuery.fn.axZm.zoomTo({x1: '40%', y1: '60%', zoomLevel: '75%'}); return false;">Zoom to point</a>

For the three tests left to the player following simple functions are used:

// var indicating that thumbnail is generating
var cropLoading = false;

// function to get x1, y1, x2 and y2 values
function getZoomParam(){
	if (!$.axZm){return;}
	
	// Get values
	var getCropValues = $.fn.axZm.getCropValues()[1];
	
	// Set values into form fields
	$('#z_x1').val(getCropValues[0]);
	$('#z_y1').val(getCropValues[1]);
	$('#z_x2').val(getCropValues[2]);
	$('#z_y2').val(getCropValues[3]);
}

// function to retrieve values from form fields and fire zoomTo
function setZoomParam(){
	if (!$.axZm){return;}
	
	// speed should be integer
	var speed = $('#sbm_speed').val(); if (speed >= 0 ){speed = parseInt(speed);}else{speed = 1000;}
	
	$.fn.axZm.zoomTo({
		// if x2 and y2 are not supposed to be passed but property is defined, it should be of type undefined
		x1: $('#z_x1').val() || undefined,
		y1: $('#z_y1').val() || undefined,
		x2: $('#z_x2').val() || undefined,
		y2: $('#z_y2').val() || undefined,
		speed: speed,
		speedZoomed: speed,
		ajxTo: speed,
		motion: $('#sbm_motion').val(),
		motionZoomed: $('#sbm_motion').val(),
		zoomLevel: $('#sbm_zoomLevel').val() || false
	});
}

// function to retrieve values from form fields and fire zoomTo
function zoomToTest(){
	if (!$.axZm){return;}
	
	// speed should be integer
	var speed = $('#sbm_speed').val(); if (speed >= 0 ){speed = parseInt(speed);}else{speed = 1000;}
	
	$.fn.axZm.zoomTo({
		x1: $('#sbm_x1').val() || undefined,
		y1: $('#sbm_y1').val() || undefined,
		x2: $('#sbm_x2').val() || undefined,
		y2: $('#sbm_y2').val() || undefined,
		speed: speed,
		speedZoomed: speed,
		ajxTo: speed,
		motion: $('#sbm_motion').val(),
		motionZoomed: $('#sbm_motion').val(),
		zoomLevel: $('#sbm_zoomLevel').val() || false
	});
}

// create crop thumbnails on-the-fly
function createThumbnail(){
	if (!$.axZm || cropLoading){return;}
	
	// Get values
	var getCropValues = $.fn.axZm.getCropValues()[1];
	
	// Generate a string for thumb
	var dynThumbPar = $.fn.axZm.installPath() + 'zoomLoad.php?azImg=' + $.axZm.zoomGA[$.axZm.zoomID]['ph'] + $.axZm.zoomGA[$.axZm.zoomID]['img'];
	dynThumbPar += '&x1='+getCropValues[0];
	dynThumbPar += '&y1='+getCropValues[1];
	dynThumbPar += '&x2='+getCropValues[2];
	dynThumbPar += '&y2='+getCropValues[3];
	dynThumbPar += '&width=100';
	dynThumbPar += '&height=100';
	
	// Set cropping status
	cropLoading = true;
	
	// Preload image
	$('<img>')
	.load(function(){
		cropLoading = false;
		
		// Prepend thumb to a div
		$('<img>').attr('src', dynThumbPar)
		.addClass('cropImage')
		// on thumb click zoom to this area
		.bind('click', function(){
			var speed = $('#sbm_speed').val(); if (speed >= 0 ){speed = parseInt(speed);}else{speed = 1000;}
			$.fn.axZm.zoomTo({
				x1: getCropValues[0],
				y1: getCropValues[1],
				x2: getCropValues[2],
				y2: getCropValues[3],
				speed: speed,
				speedZoomed: speed,
				ajxTo: speed,
				motion: $('#sbm_motion').val(),
				motionZoomed: $('#sbm_motion').val()
			});
		})
		.prependTo('#zoomedThumbnails')
		
		// Remove all thumbs except first 8 (this is just for the test)
		$('#zoomedThumbnails>img').slice(8).remove();
	})
	.error(function(){
		cropLoading = false;
		alert('Making crop failed');
	})
	.attr('src', dynThumbPar);
}
			

jQuery.fn.axZm.zoomTo (options)