The main initialization function. All other options are set in zoomConfig.inc.php file! Some can be set over the callbacks too.

Parameter:

• @param object options - custom callback functions

Example:

Kill AJAX-ZOOM instance and remove HTML from dom. Useful if you want to initiate a new one at place of the current.

Add callback function

Parameter:

• @param string name - name of the callback
• @param function obj - a function or an object containing more then one functions at once / named functions

Example:

See example14.php

Sets a visible image area selection

Parameter:

• @param object event - not implemented
• @param object area - selection coordinates, e.g. {x1: 168, y1: 178, x2: 261, y2: 240}

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.areaResize(false, {x1: 168, y1: 178, x2: 261, y2: 240});">Set area</a>
	

Removes a visible image area selection

Parameter:

• @param bool effect - adds a nice effect

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.areaDisable(false);">Remove area</a>
	

Restarts image area for tool selection

Change theme css file, see also themeCss

Preload all initial images (and in case enabled imageMap images) for 2d gallery || 360 || 3D, which has not been already loaded but might be loaded by users action or otherwise.. in the current state this function will not trigger the generation of preview images or tiles (except for the first image of returned set). This behavior will be added later.

Parameter:

• @param object opt: object with parameters:
  • str: query string, which would be passed to AJAX-ZOOM
  • step: optional function executed on each image preloading
  • clb: optional callback function

Example:

		jQuery.fn.axZm.citeAllInitialPic({
			str: 'example=spinAnd2D&3dDir=/pic/zoom3d/Uvex_Occhiali',
			clb: function(numImages){
				console.log('AZ has preloaded '+numImages+' images for 360')
			}
		});

		// could be used in /examples/example4.php
		jQuery.fn.axZm.citeAllInitialPic({
			str: 'example=8&zoomDir=/pic/zoom/animals',
			step: function(obj){
				console.log('Preloading: '+obj.file);
			},
			clb: function(obj){
				console.log('AZ has preloaded '+obj.numImages+' images for 2D animals gallery');
				jQuery.fn.axZm.citeAllInitialPic({
					str: 'example=8&zoomDir=/pic/zoom/fashion',
					clb: function(obj){
						console.log('AZ has preloaded '+obj.numImages+' images for 2D fashion gallery')
					}
				});
			}
		});
	

Close fullscreen mode

Change the position of responsive opened AJAX-ZOOM e.g. into a lighbox.

Parameter:

• @param id: id of the new container
• @param clb: callback function

Restore the position previously changed with jQuery.fn.axZm.fullScreenRelChange

Parameter:

• @param clb: callback function

Download original image or image as JPG in certain resolution. See also these config options.

Parameter:

• @param int|string id: internal ID of the image or filename.
• @param bool|string: certain resolution or false.

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.downloadImg(test.png, '1024x768');">Download Image</a>
	

Zoom to fill the entire player area independent of proportions of the image or screen resolution. Could be triggered on some AJAX-ZOOM callback.

Parameter:

• @param object opt: optional object with some optional configurations:
  • speed: speed of the animation, default 0
  • speedZoomed: speed of the animation if already zoomed, default 0
  • top: gravity top, integer as offset or true (0)
  • right: gravity right, integer as offset or true (0)
  • bottom: gravity bottom, integer as offset or true (0)
  • left: gravity left, integer as offset or true (0)
  • callback: function when finished

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.fillArea({callback: function(){alert('done')}});">Fill space</a>
	

Hide "Inline Gallery"

Show "Inline Gallery"

Toggle "Inline Gallery"

Returns an array with all possible callbacks.

Example:

		// Open Firebug (or whatever developer tool) and execute the following code in console
		jQuery.ajax({
			type: 'GET',
			daType: 'script',
			// Make sure jquery.json plugin is loaded
			url: '../axZm/plugins/JSON/jquery.json-2.3.min.js',
			complete: function(){
				// Assign to each callback console.log function with possibly passed parameter converted to string
				jQuery.each($.fn.axZm.getAllCallBackNames(), function(i, name){
					jQuery.axZm.userFunc[name] = function(info){
						console.log('AZ callback '+name+': '+jQuery.toJSON(info));
					}
				});
			},
			cache: true
		});
	

Experimental: retrieve background color of the image

Parameter:

• @param bool set: set the background color of the player according to the retrieved color
• @param int id: id of the image, if not defined - current loaded image
• @param function callback: callback function

Example:

	<a href="javascript:void(0)" onClick="$.fn.axZm.getBackColor (true, false, function(rgbColor){alert(rgbColor)});">Get background color</a>
	

Translates coordinates from the canvas to values in respect to original image size The firs argument can be an array with the four coordinates on the canvas [x1, y1, x2, y2] or object with the same keys. Returns a multidimensional array:
[0] - [x1, y1, x2, y2] input coordinates adjusted
[1] - [x1, y1, x2, y2] output coordinates in respect to original image size
[2] - integer, if 1 the input coordinates were not fully above the image

Returns x1, y1, x2, y2 coordinates of current zoom crop

Returns current zoom level, 100 is when image is zoomed to the max

Returns js object with coordinates of last zooms

Returns js object with coordinates of zoom

Returns image path of a thumb defined by key.

Parameter:

• @param int id: id of the image.
• @param string key: possible values are 'full', 'vert', 'horz' and 'init'.

Returns folder and image name of the source image; (the folder does not need to be accessible by JS (over http) and the access can be restricted)

Toggle help layer.

Parameter:

• @param string content: any html or text

Show help layer.

Parameter:

• @param string content: any html or text

Close help layer.

Start fullscreen mode

Tries to return the path of /axZm directory.

Stop running all internal galleries, see also axZmThumbSlider.

Rebuild "mNavi"; you can change $.axZm.mNavi object before doing this.

Open AJAX-ZOOM directly at fullscreen mode or fluid / responsive layout. Please note that jQuery core, /axZm/jquery.axZm.js and /axZm/axZm.css need to be in header or above script tag, which executes jQuery.fn.axZm.openFullScreen(); if not above, then please trigger jQuery.fn.axZm.openFullScreen() within $(document).ready() or similar.

Parameter:

• @param string path: Absolute path to AJAX-ZOOM directory, e.g. '/axZm/'
• @param string parameter: Query string to determine which images to load
• @param object callbacks: JS object containing callback functions
• @param string relCont: On default the relCont is browser window. You can optionally set some other container ID (e.g. "myAzResponsiveContainer") if needed.
• @param bool apiFullscreen: If relCont is 'window', use browser fullscreen mode if available
• @param bool disableEsc: Prevent closing with Esc key.
• @param bool postMode: Set AJAX-ZOOM to use POST instead of GET (overwriting the same option set in zoomConfig.inc.php).

Example:

		<script type="text/javascript">
		var ajaxZoomCallbacks = {
			onFullScreenReady: function(){
				 alert('Fullscreen started');
			},
			onFullScreenClose: function(){
				 alert('Fullscreen closed');
			}
		};
		</script>

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.openFullScreen('/axZm/', 'zoomID=1&zoomDir=1&example=2', ajaxZoomCallbacks);">Init AJAX-ZOOM</a>
	

Related:

alias jQuery.fn.axZm.openFullScreen

Loads a different set of images into AJAX-ZOOM instance

Parameter:

• @param string query_string: The query string to determine which images to load.
• @param function callback: Optional callback function.
• @param function callbackEnd: Optional callback function.

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.loadAjaxSet ('zoomDir=some_dir&some_other_param=some_value');">Load different image set</a>
	

For implemention also see example8.php

Related:

Injects new 360 of the same size keeping same zoom level and frame number. Perfect for 360 product configurators.

Parameter:

• @param string query_string: The query string to determine which 360 to load.
• @param function clbLoad360Data: Optional callback function triggered, when new 360 data has been successfully received.
• @param function clbLoad360Imge: Optional callback function triggered, when the first image from the 360 is loaded.
• @param function clbAfter360Preload: Optional callback function triggered, when the entire 360 is preloaded. Compareable with "spinPreloadEnd" callback. However, "spinPreloadEnd" callback is not triggered, when 360 is loaded over jQuery.fn.axZm.loadAjax360Type.

Example:

    	<a href="javascript:void(0)" onClick="jQuery.fn.axZm.loadAjax360Type ('example=colorSwatch&3dDir=/pic/armchair/classic');">Load different 360</a>
    

For implemention also see example36.php

Related:

Loads AJAX-ZOOM into a selectable container. Please note that jQuery core, /axZm/jquery.axZm.js and /axZm/axZm.css need to be in header or above script g which executes jQuery.fn.axZm.load(); if not above, then please trigger jQuery.fn.axZm.load() within $(document).ready() or similar.

Parameter:

• @param object options
• @option string options.path: Absolute path of AJAX-ZOOM, e.g. '/axZm/'
• @option string options.parameter: Query string to determine which images to load (see jQuery.fn.axZm.loadAjaxSet)
• @option string options.divID: ID of the container
• @option object options.opt: Callback functions
• @option bool options.postMode: Use POST mode instead of GET

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.load({path: '/axZm/', parameter: 'zoomDir=high_res&example=13', opt: {onLoad: function(){alert('123')}}, divID: 'test'});">Load AJAX-ZOOM</a>
	

Related:

If you want to initialize AJAX-ZOOM in a responsive layout please use jQuery.fn.axZm.openFullScreen

Move in certain direction

Parameter:

• @param dir: possible values ('N', 'E', 'S', 'W') - Top, Right, Bottom, Left

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.moveDir('W')">Move left</a>
	

Pan to x, y coordinates

Parameter:

• @param object opt: object with parameters:
  • x1: coordinates of x1
  • y1: coordinates of x2

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.panTo({x1: 600, y1: 900});">Pan to x,y</a>
	

Preload all initial images of the gallery currently loaded. Normally initial image loads when it is selected from the gallery, by API function jQuery.fn.axZm.zoomSwitch (zoomID) or when diashow is running. For 360 / 3D all initial images are preloaded at the beginning. If you want to preload initial images for the gallery || 360 || 3D which is not loaded but might be loader by users action, you can do so with jQuery.fn.axZm.citeAllInitialPic()

Preload all gallery thumbs. Normally thumbs are preloaded when gallery is shown first time.

Reload thumbs in horizontal gallery

Parameter:

• @param bool fadeout: if true the message will be faded out

Prepare AJAX-ZOOM in responsive layouts to change its size and redraw. Triggering this function twice before endTime is reached will result into clearing the previous resizeStart and endTime, which can be useful to be done e.g. in the callback of an animation.

Parameter:

• @param int endTime: time after which AJAX-ZOOM redraws depending on the new size of its parent container.

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.resizeStart(1);">Redraw</a>
	

Resize and reset map.

Parameter:

• @param int w1: width in not fullscreen mode.
• @param int h1: height in not fullscreen mode.
• @param int w2: width in fullscreen mode.
• @param int h2: height in fullscreen mode.

Example:

	<a href="javascript:void(0)" onClick="jQuery.fn.axZm.resetMap(null, null, 300, 300);">Resize map</a>
	

Completely removes AJAX-ZOOM

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.remove();">Remove AJAX-ZOOM</a>
	

Set or remove the description of the thumbs in the gallery and the mouseover description

Parameter:

• @param string|int fileName: the name of the file (image), e.g. watch.jpg. Can also be the ID of the object containing all images, see $.axZm.zoomGA; if You have only one image the ID is probably 1
• @param string|bool extensiveDescr: Long description for mouseover, if 'unset' will remove the description, false leave unchanged
• @param string|bool thumbDescr: Description under the thumb, if 'unset' will remove the description, false leave unchanged

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.setDescr('watch.jpg', 'Long description of the image', 'New Thumb Descr');">Set description 1</a>
		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.setDescr('watch.jpg', 'Long description of the image', false);">Set description 2</a>
		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.setDescr('watch.jpg', 'unset', 'unset');">Set description 3</a>
		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.setDescr(1, false, 'New Thumb Descr');">Set description 4</a>
	

Spin to any direction by a number of frames.

Parameter:

• @param int x: number frames 360 (for 360 and 3D).
• @param int z: number frames Z Axis (only for 3D).
• @param function callback: Callback function.

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.spinBy(-2, 0, false);">Spin by -2</a>
	

Spin to any direction by a number of frames.

Parameter:

• @param int x: number frames to spin in a direction (for 360 and 3D).
• @param int z: optional number frames Z Axis (only for 3D).
• @param int duration: optional duration of the spin
• @param string easing: optional easing function
• @param function callback: optional callback function
• @param object zoomTo: Spin and zoom at the same time; zoomTo is a js object accepting the same key, values as $.fn.axZm.zoomTo whereby some of the values like speed might be overwritten within spinBySmooth;

Example:

	    <a href="javascript:void(0)" onClick="jQuery.fn.axZm.spinBySmooth(-5);">Spin by -5 frames smooth </a>
    

Start spinning 360 object.

Parameter:

• @param int rounds: number of rounds the object will be spinning.
• @param int roundTime: time in ms for one round.
• @param bool mouseOverStop: stop spinning when mouse is over the image.
• @param bool oposit: spin in opposite direction as it would turn normally.
• @param function callback: optional callback function.

Example:

	<a href="javascript:void(0)" onClick="jQuery.fn.axZm.spinStart(2, 1500, false, false, function(){jQuery.fn.axZm.spinStart(1,1500,false, true)});">start spin</a>
	

Stop spinning 360 object.

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.spinStop();">Stop spin</a>
	

Toggles spin / pause.

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.spinPlayToggle();">Play / Pause</a>
	

Spin 360 / 3D degree object to a particular frame number.

Parameter:

• @param int frameNumber: frame number (ID) of the sequence; frame_number can be ID or image name of the frame.
• @param int speed: time in ms for the process or 'auto', which will set the speed relative to spinDemoTime and number of frames which need to be spined (recommended); If speed is a number passed as string, this number will override spinDemoTime and speed defaults to 'auto'
• @param string easing: easing, e.g. 'swing', default - spinToMotion
• @param function callback: Callback function
• @param object zoomTo: Spin and zoom at the same time; zoomTo is a js object accepting the same properties, values as $.fn.axZm.zoomTo whereby some of the values like speed might be overwritten within spinTo; additionally you can define "settings" property, which is an object too.
  • "effect" property, possible integer values are:
    • 0 - Spin and zoom simultaneously
    • 1 - Zoom out and zoomin while spinning
    • 2 - Zoom out while spinning, then zoom in
    • 3 - Zoom out, then spin and zoom
    • 4 - Zoom out, spin, zoom in after spinning
    • 5 - Zoom out and zoomin while spinning with extra round
    • 6 - Zoom out 1/3 out, zoom in from 2/3 to 1 while spinning with extra round
    • 7 - Zoom out while spinning with extra round, zoom in after spinning
    • 8 - Zoom out, spin with extra round, zoom in after spinning
    • 9 - Randomly from the above
  • "speedMin" - minimal duration of the effect
  • "zoomSpeed" - minimal duration of zoom within the effect
  • "easing" - named easing function

Example with callback:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.spinTo(5, 'auto', 'easeOutCubic', function(){jQuery.fn.axZm.zoomTo({zoomLevel: '75%'})});">Spin to 5th frame and zoom to 75% after it </a>
	

Example with spin and zoom simultaneously:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.spinTo(7, false, false, false, {'x1': 1000, 'y1': 1200, 'zoomLevel': '100%', 'settings': {'effect': 4}});">Spin to 7th frame and zoom to coordinates with an effect </a>
	

An easy method to spin in a different ways certain rounds applying adjustable easing

Parameter:

• @param object opt: object with some optional configurations:
  • rounds: number of rounds to spin 360; expected to be of type float or integer; negative values reverse spin direction.
  • easing: string; any easing type e.g. "linear", "swing", "easeOutElastic", ...
  • duration: integer > 50; time in ms calculated for one round.
  • mouseOverStop: bool; if enabled spinning will stop when the mouse enters the player.
  • clb: function; optional callback function.

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.spinRotate({rounds: 0.25, easing: 'swing', duration: 2000});">Rotate right</a>

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.spinRotate({rounds: -0.25, easing: 'swing', duration: 2000});">Rotate left</a>
	

Starts preloading 360 degree images, useful if firstMod is not set to 'spin' where spinInit triggers instantly. Can be triggered with the onLoad callback.

Start slideshow

Select the zooming tool crop, left click triggers zoom in, right click zoom out, mousewheel zoom in / out

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.switchCrop();">Switch to crop mode</a>
	

Select the zooming tool pan, left click triggers zoom in, right click zoom out, mousewheel zoom in / out

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.switchPan();">Switch to pan mode</a>
	

Select the spin mode, click triggers spinning some rounds, mousewheel zoom in / out

Example:

	<a href="javascript:void(0)" onClick="jQuery.fn.axZm.switchSpin();">Switch to spin mode</a>
	

Returns current state

Example:

		console.log($.fn.axZm.getCurrentMod());
	

Hide everything what has been added to the layer with the ID "zoomLayer" like navigation elements, zoomMap or an user defined objects. Returns an array with IDs of the elements which has been hidden.

Parameter:

• @param array excludeArray - array with IDs of the elements, which should not be hidden

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.tapHide(['zoomCornerFsc']);">Hide overlays</a>
	

Show overlay elements which have been hidden by jQuery.fn.axZm.tapHid

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.tapShow();">Show overlays</a>
	

Toggle overlay elements, see jQuery.fn.axZm.tapHide and jQuery.fn.axZm.tapShow;

Parameter:

• @param array excludeArray - array with IDs of the elements which should not be hidden

Example:

	<a href="javascript:void(0)" onClick="jQuery.fn.axZm.tapToggle(['zoomCornerFsc']);">Toggle overlays</a>
	

Modal dialog method which is used by AJAX-ZOOM to display errors or other notifications. It uses the jQuery facebox plugin. Defaults to simple alert if facebox is not loaded. Overwrite this method if You do not like facebox.

Parameter:

• @param string text - Text of the message
• @param string title - Title of the message
• @param string subtitle - Subtitle of the message
• @param bool autoRemove - If set to true, the box will be instantly removed and new one appears. Otherwise text information will be appended to the existing box

Example:

		<a href="javascript: void(0)" onClick="jQuery.fn.axZm.zoomAlert('Text text', 'Attention', '---');">Alert</a>
	

Triggers zoom in

Parameter:

• @param object options
• @option string motion: Transition type, e.g. 'swing'
• @option int speed: Duration in ms, e.g. 1000
• @option int pZoom: percentage of zoom in, e.g. 125
• @option int ajxTo: Time in ms after which ajax call is triggered, e.g. 750
• @option bool stepZoom: If true, AJAX-ZOOM will zoom to the next "native level", like 12,5%, 25%, 50% or 100%

Example:

		<a href="javascript: void(0)" onClick="jQuery.fn.axZm.zoomIn({motion: 'swing', speed: 1000, pZoom: 125});">Zoom in</a>
	

Triggers zoom out

Parameter:

• @param object options
• @option string motion: transition type, e.g. 'swing'
• @option int speed: duration in ms, e.g. 1000
• @option int pZoom: percentage of zoom out, e.g. 125
• @option int ajxTo: time in ms after which ajax call is triggered, e.g. 750
• @option bool stepZoom: if true, AJAX-ZOOM will zoom to the next "native level", like 12,5%, 25%, 50% or 100%

Example:

		<a href="javascript: void(0)" onClick="jQuery.fn.axZm.zoomOut({motion: 'swing', speed: 1000, pZoom: 125});">Zoom out</a>
	

Reset the view to initial state

Parameter:

• @param object options
• @option int speed: animation speed
• @option bool enforce: break all animations to enforce restoring
• @param function callback: optional callback function

Example:

		<a href="javascript: void(0)" onClick="jQuery.fn.axZm.zoomReset();">Reset</a>
	

Switch to next or previous image in the gallery

Parameter:

• @param string dir: Direction - 'prev' or 'next'
• @param string galleryFadeInAnm: image switching type, possible values see galleryFadeInAnm
• @param bool once: if true switching will not try to repeat until switching is possible
• @param function callback: callback function

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.zoomPrevNext('prev', 'SwipeHorz')">Prev</a>
		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.zoomPrevNext('next' 'SwipeHorz')">Next</a>
	

For implemention see also this example

Switch to a specified image contained in the gallery. If the image is zoomed it will be restored with this duration: zoomMapSwitchSpeed

Parameter:

• @param mixed zoomID - The ID (key) of the $pic_list_array, see defining the images. zoomID can also be the filename contained in the gallery!
• @param string galleryFadeInAnm: image switching type, possible values see galleryFadeInAnm
• @param bool once: if true switching will not try to repeat until switching is possible
• @param function callback: callback function fired on switching
• @param function callback1: callback function fired at the end of switching

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.zoomSwitch(1234);">Image 123</a>

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.zoomSwitch('test.jpg');">Image test.jpg</a>
	

For implemention see alsothis example

Switch to a different image in the 2D gallery at zoomed state without resetting to initial view, provided that both images have exactly the same sizes (width and height)

Parameter:

• @param mixed zoomID - The ID (key) of the $pic_list_array, see defining the images. zoomID can also be the filename contained in the gallery!
• @param function callback: any callback function

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.zoomSwitchQuick(1234);">Image 123</a>

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.zoomSwitchQuick('test.jpg');">Image test.jpg</a>
	

Zoom to a predefined image area or coordinates, zoomLevel etc.

Parameter:

• @param object options
  • @param object options
  • @option int|string x1: Top-Left x coordinate or percentage, e.g. '55%'
  • @option int|string y1: Top-Left y coordinate or percentage, e.g. '75%'
  • @option int x2: Bottom-Right x coordinate of the area, not necessary to pass
  • @option int y2: Bottom-Right y coordinate of the area, not necessary to pass
  • @option string zoomLevel: desired zoom level
  • @option string motion: Motion type for zoom to the specified area, default: zoomEaseCrop
  • @option string motionZoomed: Motion type for zoom to the specified area, if the image is already zoomed, default: zoomEaseCrop
  • @option int speed: Speed of the motion to the specified area, default: cropSpeed
  • @option int speedZoomed: Speed of the motion to the specified area on already zoomed image, default: cropSpeed
  • @option bool initial: Instead of passing the real x1, y1, x2 and y2 coordinates, it is possible to pass the coordinates in the initial image. Then set this option to true, default false.
  • @option function callback: callback function

Example:

		<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;">Some interesting thing</a>
	

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.zoomTo({x1: 2584, y1: 1650, zoomLevel: '55%'}); return false;">Some other interesting thing</a>
	

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.zoomTo({zoomLevel: '35%'}); return false;">Zoom to 35%</a>
	

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.zoomTo({x1: '35.7%', y1: '56.5%', zoomLevel: '50%'}); return false;">Show some coordinates and zoom to 55%</a>
	

For implemention see example10.php extensive example.

Related vars:

• jQuery.axZm.lastZoom - object, containing coordinates (x1..y2) of current zoomed area related to the original image.
• jQuery.axZm.returnedImage - temporary filename of the cropped image with coordinates of jQuery.axZm.lastZoom, located in temp folder. It can be processed with PHP to generate a small thumb and save it for an application.

An example of how to get this coordinates into a form to store them in a database or wherever:

	function getZoomParam(form){
		if (jQuery.axZm){
			var fields = ['x1', 'y1', 'x2', 'y2'];
			if (jQuery.axZm.lastZoom){
				jQuery.each(jQuery.axZm.lastZoom, function(k, v){
					jQuery('#'+form+' input[name=z_'+k+']').val(Math.round(v));
				});
			}
			if (jQuery.axZm.lastSel){
				jQuery.each(jQuery.axZm.lastSel, function(k, v){
					jQuery('#'+form+' input[name=s_'+k+']').val(Math.round(v));
				});
			}
		}
	}
	

	<form id='parametersF' onSubmit="return false">
	<ble cellspacing='2' cellpadding='2'><tbody>
	<tr>
		<td width='100'>Original image:</td>
		<td width='80'>x1: <input type='text' name='z_x1'></td>
		<td width='80'>y1: <input type='text' name='z_y1'></td>
		<td width='80'>x2: <input type='text' name='z_x2'></td>
		<td width='80'>y2: <input type='text' name='z_y2'></td>
	</tr>
	<tr>
		<td>Initial image:</td>
		<td width='80'>x1: <input type='text' name='s_x1'></td>
		<td width='80'>y1: <input type='text' name='s_y1'></td>
		<td width='80'>x2: <input type='text' name='s_x2'></td>
		<td width='80'>y2: <input type='text' name='s_y2'></td>
	</tr>
	<tr>
		<td colspan='5'>
		<input type='button' value='GET parameters' onClick="getZoomParam(this.form.id);">
		</td>
	</tr>
	</tbody></ble>
	</form>
	

Create new hotspot on the fly.

Parameter:

• @param object param: object containing all needed parameters for new hotspot
• @param string param.name: name of the hotspot. Should not conin white spaces, default: random string
• @param bool param.draggable: set hotspots to be draggable / resizable after creation, default: false
• @param bool param.noRightClickRemove: if param.draggable is true right click on the hotspot will result in disabling this hotspot. Disabling a particular hotspot at some frame is very useful for the visual hotspot configurator but might be not for some other product configurator applications. Set param.noRightClickRemove to true if you do not want right click removal.
• @param bool param.autoTitle: will set "altTitle" instantly depending on param.name, default: true
• @param bool param.autoPos: autoset positions at all frames / images, default: false
• @param function param.callback: any callback function applied with 100ms timeout
• @param bool param.noInit: by setting this option to true this API function will update the jQuery.axZm.hotspots object but will not render / rerender them; this can be done manually with jQuery.fn.axZm.initHotspots; useful if you want to create many hotspots on the fly in a loop and render all at once after creation, default: false
• @param object param.posObj: object containing coordinates of the hotspot. Because the same hotspot can be present at more than one frame the input of the file name or ID is mandatory, see example below.
• @param object param.settings: a hotspot can be configured with a variety of other settings. This list of possible settings can be extended with new releases. You can put any settings into this object except "name" and "position" as they are set in this API by param.name and param.posObj (see above); You can also investigate the defaults of the settings object with this API: jQuery.fn.axZm.getHotspotDefaults;

Example:

		// Create a spot
		var posObject = {};
		posObject['myFileName_1.jpg'] = {left: 500, top: 400};
		posObject['myFileName_3.jpg'] = {left: 400, top: 300};

		jQuery.fn.axZm.createNewHotspot({
			name: 'myHotSpotName', // can be whatever
			autoPos: false, // autoset positions at all frames / images
			draggable: false, // set hotspots to be draggable / resizable
			noInit: false, // init hotspots or not
			autoTitle: true, // set "alt" title for the hotspot instantly
			posObj: posObject, // position object of the hotspot
			settings: {
				shape: 'point',
				altTitle: 'Some interesting Deil',
				click: function(){
					alert('Test')
				}
			}
		});

		// Create recngle area as hotspot
		var posObject = {};
		posObject['myFileName_1.jpg'] = {left: 500, top: 400, width: 200, height: 50};

		jQuery.fn.axZm.createNewHotspot({
			name: 'myHotSpotName',
			autoPos: false,
			draggable: false,
			noInit: false,
			autoTitle: true,
			posObj: posObject,
			settings: {
				shape: 'rect'
			}
		});
	

Notes:

If you want to create new hotspots by clicking directly on the image, then put this function along with your logic into onZoomInClickStart callback. Important is that onZoomInClickStart callback needs to return false at the end, otherwise zooming will take place and this is not what you want.

		$.axZm.userFunc.onZoomInClickStart = function(info){
			// info.viewport conins coordinates you need for the creation of the hotspot at the position where it has been clicked
			var posObject = {};

			posObject[$.axZm.zoomGA[$.axZm.zoomID]['img']] = {
				left: info.viewport.x,
				top: info.viewport.y
			};

			// Then see above jQuery.fn.axZm.createNewHotspot
			return false; // important!!!
		}
	

Convert hotspot positions object from % to px values related to the source image dimensions

Parameter:

• @param object pos: position object

Example:

		// get hotpot position
		function getHotspotPosition(name){
			return $.fn.axZm.convertHotspotPositionToPx( $.axZm.hotspots[name]["position"][$.axZm.zoomID] );
		}
	

Delete / remove hotspot

Parameter:

• @param string name: name of the hotspot

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.deleteHotspot('abc')">Remove hotspot</a>
	

Hide one or more loaded hotspots

Parameter:

• @param mixed name: name of the hotspot as a string or array with names
• @param function callback: optional callback function

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.hideHotspots('abc')">Hide a hotspot</a>
	

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.hideHotspots(['abc1', 'abc2'])">Hide hotspots</a>
	

Show one or more loaded hotspots after the have been hidden via jQuery.fn.axZm.hideHotspots or jQuery.fn.axZm.hideAllHotspots

Parameter:

• @param mixed name: name of the hotspot as a string or array with names
• @param function callback: optional callback function

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.showHotspots('abc')">Show a hotspot</a>
	

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.showHotspots(['abc1', 'abc2'])">Show hotspots</a>
	

Hide all hotspots

Parameter:

• @param function callback: optional callback function

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.hideAllHotspots()">Hide all hotspots</a>
	

Show all hotspots that were previously hidden by jQuery.fn.axZm.hideAllHotspots or jQuery.fn.axZm.hideHotspots

Parameter:

• @param function callback: optional callback function

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.showAllHotspots()">Show all hotspots</a>
	

Init / rebuild hotspots

Parameter:

• @param object hSpot: optional object replacing jQuery.axZm.hotspots
• @param function callback: optional callback function

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.initHotspots()">Init hotspots</a>
	

Returns all hotstpot configuration options as js object

Example:

		<a href="javascript:void(0)" onClick="console.log(jQuery.fn.axZm.getHotspotDefaults());">Get hotspot defaults</a>
	

"manually" remove all tooltips from the hotspots

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.removeAllToolTips()">removeAllToolTips</a>
	

Set hotspot default before initializing hotspots. Might be useful if you have many hotspots with settings different from defaults.

Parameter:

• @param object obj: object with parameter (see jQuery.fn.axZmgetHotspotDefaults)

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.setHotspotDefaults({"hotspotImage": "hotspot64_blue.png"})">Change defaults</a>
	

Returns hotstpot object that can be saved as JSON

Parameter:

• @param bool withDefaults: if true defaults are returned too. Useful for editing.
• @param bool stringifyFunctions: if true functions are stringified. Useful to be saved as JSON.
• @param bool imgNames: return positions object with specific image names (and not ID's).

Example:

		<texrea id="axzmhotspotsobj"></texrea>
		<a href="javascript:void(0)" onClick="$('#axzmhotspotsobj').html( $.toJSON(jQuery.fn.axZm.getHotspotObj(true, true, true)) );">Get hotspots</a>
	

Returns only positions object of a specific hotspot

Parameter:

• @param bool imgNames: return positions object with specific image names (and not ID's)

Example:

		<texrea id="axzmhotspotsobj"></texrea>
		<a href="javascript:void(0)" onClick="$('#axzmhotspotsobj').html( $.toJSON(jQuery.fn.axZm.getHotspotPositions('abc', true)) );">Get hotspots positions</a>
	

Returns position object of a specific hotspot and frame

Parameter:

• @param string name: hotspot name
• @param string frame: optional - id or filename

Example:

		<a href="javascript:void(0)" onClick="console.log(jQuery.fn.axZm.getHotspotPosition('abc'))">Get hotspot abc position</a>
	

Hide hotspots

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.hideHotspotLayer()">Hide hotspots</a>
	

Make hotspots dragable. Please note that the hotspots configuration object ($.axZm.hotspots) is updated with new positions!

Parameter:

• @param bool destroy: if true - destroy draggable
• @param bool noRightClickRemove: if true right click will not disable the hotspot at a particular frame

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.hotspotsDraggable()">Dragable hotspots</a>
	

Modifies position and or dimensions of the already present hotspot

Parameter:

• @param string name: name of the hotspot
• @param string / integer frame: frame number or file name
• @param object pos: new position (left, top, [width, height])
• @param bool set: physically set new position if frame number corresponds to current frame ($.axZm.zoomID)

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.modifyHotspotPosition('myHotspot', 5, {left: 300, top: 500}, true)">Change position</a>
	

Load hotspots from a js file and init hotspots after. Please note that this is a js file defining $.axZm.hotspots and it is not a valid JSON...

Parameter:

• @param string url: url to the js file with hotspots definition
• @param bool cache: cache or not
• @param function callback: optional callback function

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.loadHotspotsFromJsFile( '../pic/hotspotJS/bike.js', false, function(){alert('loaded')} )">Load hotspots</a>
	

Simply remove and delete all hotspots.

Parameter:

• @param function callback: optional callback function

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.removeAllHotspots()">Delete all hotspots</a>
	

Temporarily enable or disable certain hotspots. A disabled hotspot is not visible but can be made visible any time after.

Parameter:

• @param mixed name: if string - name of the hotspot, if array any number of names
• @param string action: 'enable', 'disable' or 'toggle'

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.switchHotspot(['abc1', 'abc2', 'abc3'], 'disable'); jQuery.fn.axZm.switchHotspot(['abc4', 'abc5'], 'enable');">Disable three hotspots and enable two others</a>
	

Find a hotpot with particular name in 360 or 2D gallery and optionally zoom into it.

Parameter:

• @param mixed name: if string - name of the hotspot
• @param object settings: optional... keys:
  • zoomID (integer): define a specific frame number for 360/3D or page for 2D, as same hotspot can be placed at several frames or pages. Will be found instantly if not defined.
  • zoomLevel (string): specify the desired zoom level, will be determined instantly if not specified.
  • zoomToRect (integer): if specified and the hotspot is of type rect, zoom level will be determined instantly depending on hotspots size. The hotspot will be visible as a whole with the margin determined by this parameter.
  • switchQuick (bool): activating this option on 2D gallery (not 360 spin) will result into not zooming out, switching to new image and then zoom to hotspot, but switching to the new image directly in zoomed state. Provided that the original image dimensions (width and height) are exactly the same
  • speed (integer): speed in ms
  • speedZoomed (integer): speed in ms when the image is already zoomed
  • easing (integer): easing type, e.g. "easeOutElastic"
  • findMiddle (bool): if hotspots are positioned at 360 or 3D, enabling this parameter will spin not to the first found hotspot frame but find a frame which is in the middle of frame series; e.g. if you have a globe and marked some town on it, enabling findMiddle will instantly spin to a best visible frame.
  • spinAndZoom (bool): if hotspots are positioned at 360 or 3D and a zoom or pan action needs to take place, then enabling this option will spin and zoom and the same time.

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.zoomToHotspot('myHotspot', {zoomID: 5, zoomLevel: '75%'});">Find hotspot myHotspot and zoom to 75%</a>
	

Remove or enable hotspot on a particular frame, useful for 360 and 3D as there are many frames there. Please note that when hotspot is disabled in a particular frame its position is removed.

Parameter:

• @param string name: name of the hotspot
• @param string action: 'enable' or 'disable'
• @param string|int frame: id or filename

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.toggleHotspotFrame('abc', 'enable', jQuery.axZm.zoomID)">Enable hotspot at current frame</a>
	

Show hotspots

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.showHotspotLayer()">Show hotspots</a>
	

Toggle hotspots

Example:

		<a href="javascript:void(0)" onClick="jQuery.fn.toggleHotspotLayer()">Toggle hotspots</a>
	

Generate initial image

Parameter:

• @param array $zoom - array with all configuration parameters.
• @param bool $skipInitialImage - do not generate initial image but generate mapOwnImage in case it is enabled.

Make all gallery thumbs

Parameter:

• @param array $zoom - Array with all configuration parameters.

will make only specific thumb with $zoomID, which is the key of $pic_list_array

Parameter:

• @param array $zoom - Array with all configuration parameters.
• @param array $pic_list_array - Array of type $key => $value with images
• @param int $zoomID - A specified key of $pic_list_array

Make thumbnails and crops on-the-fly

Parameter:

• @param array $zoom - Array with all configuration parameters.
• @param array $options - Array with options which can be passed to the method
  • picDir => string, directory path of the image starting from root, with slash at the end.
  • imgName => string, filename of the image.
  • prevWidth => integer, max width of the thumb.
  • prevHeight => integer, max height of the thumb.
  • qual => integer, jpg output quality.
  • cache => bool, if true images will be cached in tempCache folder
  • download => bool, force browser to download image
  • thumbMode => mixed, possible string values are 'contain' or 'cover'; if false the size of the output thumb will depend on prevWidth, prevHeight respective to image ratio or crop value passed, see below.
  • backColor => string, color to be filled if thumbMode is contain; possible values: hex color value e.g. '#FFFFFF', html color name e.g. 'white' or 'auto'. 'auto' will attempt to figure out the background color of the source image.
  • enlarge => bool, if source image is smaller then the output thumb parameters and this option is set to true, then the thumb will be enlarged. Does not apply whenn crop parameters are passed.
  • crop' => array, optional crop values e.g. array('x1' => 200, 'y1' => 200, 'x2' => 600, 'y2' => 600)

Create image pyramid with tiles from source image

Parameter:

• @param array $zoom - Array with all configuration parameters.

Return the zoomed image via ajax, used in zoomLoad.php

Parameter:

• @param array $zoom - Array with all configuration parameters.

Remove all images, tiles and thumbs created by AJAX-ZOOM.

Parameter:

• @param array $zoom - array with all configuration parameters.
• @param string $pic - orinal image filename
• @param array $arrDel - array of type $key => $value that defines which images have to be deleted, e.g. array('In' => true, 'Th' => true, 'tC' => true, 'mO' => true, 'Ti' => true, 'gP' => true)
  • 'In' - initial images from $zoom['config']['thumbDir']
  • 'Th' - gallery thumbs from $zoom['config']['galleryDir']
  • 'tC' - dynamic thumbnails and crops in $zoom['config']['tempCacheDir']
  • 'mO' - map own images in $zoom['config']['mapDir']
  • 'gP' - image pyramid in $zoom['config']['gPyramidDir'] (not used in any default configuration).
  • 'Ti' - image pyramid with tiles in $zoom['config']['pyrTilesDir']
• @param bool $self - Defines if original image have to be deleted, default false
• @return - nothing

Example:

		$axZmH -> removeAxZm($zoom, 'some_file.jpg', $arrDel = array('In' => true, 'Th' => true, 'gP' => true, 'Ti' => true), $self = false)
	

Generate query string out of any data ($queryString). This method will take the query string or an array like $_GET and return either an array with parameters and their values ($ret = 'arr') or it will return a new query string ($ret = 'str'). It can be used to set the configuration value parToPass in zoomConfig.inc.php; which is extremly important for AJAX-ZOOM to work properly.

Parameter:

• @param string $ret - type of return: 'arr' will return a key => value type array. 'str' - a query string
• @param array, string $parExcl - parameters from query string which have to be excluded.
• @param array $parExclPreg - optional array like $parExcl, but it searches for specific string in parameter and excludes it if found
• @param array, string $queryString - input query string, e.g. $_GET - as array or 'myVar1=555&somethElse=aaa' - as string
• @return string, array

Example:

		$zoom['config']['parToPass'] = $axZmH -> zoomServerPar('str', array('zoomID', 'zoomFile', 'zoomLoadAjax', 'loadZoomAjaxSet'), false, $_GET);