example13.phpHOMEExamples overviewDownloadAsk a question

AJAX-ZOOM - callback examples (last updated 2015-03-01)

Loading, please wait...
Callback Console
Callback onSelection: x1: y1: x2: y2:

AJAX-ZOOM has many callbacks which can be used to develop advanced applications. See API documentation. Let us know if you miss an "event" to place your hook. Normally it is quickly implemented without additional costs.

After the initialization of AJAX-ZOOM the callback functions are stored in the object jQuery.axZm.userFunc e.g. jQuery.axZm.userFunc.onZoomInClickStart so you can access them later and redefine if needed:

		jQuery.axZm.userFunc.onZoomInClickStart = function(){
			// Do something
			console.log('This is a test');

		// access later
		$.axZm.userFunc.onZoomInClickStart = null;

With $.fn.axZm.getAllCallBackNames() you can get a list of all callbacks available in the current version. Note than some API functions have callbacks too.

The first argument of the callback function is often an object containing information about e.g. click coordinates, viewport and other information which could be very useful creating applications, e.g.

		jQuery.axZm.userFunc.onZoom = function(info){

In most cases the return of your callback function does not matter. However for onZoomInClickStart it does. If onZoomInClickStart returns false the actual zoom will be aborted. You can grap the "info" object passed to this callbackfunction and do something else with it, e.g. place a hotspot like it is done in example12.php or whatever:

		var checkClickedCoordinates = function(x, y){
			// do checks here abot x and y
			// return true or false
		jQuery.axZm.userFunc.onZoomInClickStart = function(info){
			// coordinates releated to original image size
			var x = info.viewport.x;
			var y = info.viewport.y;
			return checkClickedCoordinates(x, y);

A specific callback can be also a js object containing more than one function. This usually happens when two or more functions for the same callback name are merged with $.fn.axZm.mergeCallBackObj() before or after AJAX-ZOOM is initialized. For many examples we have created "wrapper" plugins for special functionality where AJAX-ZOOM callbacks are extensivly used but developers can also pass their own, additional callbacks for the same "event"; In this case they are merged into js object by $.fn.axZm.mergeCallBackObj() and executed one by one.

So when AJAX-ZOOM is already initialized you can safely add your callback function like this:

		var anOtherOnZoom = function(info){
		$.axZm.userFunc = $.fn.axZm.mergeCallBackObj($.axZm.userFunc, {
			onZoom: anOtherOnZoom
		// or like this when AJAX-ZOOM is already initialized: 
		$.fn.axZm.addCallback('onZoom', anOtherOnZoom);

In most cases you would put the logic into your anOtherOnZoom function and would not need to change / replace this callback. In case you do, add it like this:

		var anOtherOnZoom = function(info){
		$.axZm.userFunc = $.fn.axZm.mergeCallBackObj($.axZm.userFunc, {
			onZoom: {myOnZoom: anOtherOnZoom}
		// or like this when AJAX-ZOOM is already initialized: 
		$.fn.axZm.addCallback('onZoom', {myOnZoom: anOtherOnZoom});
		// and e.g. replace your onZoom callback named myOnZoom like this:
		$.axZm.userFunc.onZoom.myOnZoom = function(info){
			// do something else

Comments (1)

Vadim Jacobi
2011-09-30 02:09:31
Vadim Jacobi
This example is for developers who want to add extra functionality to AJAX-ZOOM. Please take a look at the API section in the docs.

Leave a Comment

Name (required):
Email (required):
Your comment (no html):
Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, Your personal image will be attached every time you comment.