Requirements

Server Software PHP Version
PHP 5+ PHP 5.2+ recommended, memory_limit at least 128M and safe_mode = off*
GD 2+ library, optionally ImageMagick

Normally GD library is always bundled with any PHP installation, whereas ImageMagick does not. AJAX-ZOOM supports both imaging libraries. GD library is needed in each case. Installing ImageMagick on Your system may require root privileges. Ask Your system administrator to install the latest ImageMagick if You want to use it, but this is optional!

IonCube loader or

SourceGuardian loader or

Zend Guard Loader / Optimizer

Encoded scripts protected by IonCube or SourceGuardian require free loaders to run. The loaders can be downloaded and installed on many systems. AJAX-ZOOM supports both Loaders, the default setting is IonCube encoded version.

You can download this installation wizard for IonCube or this php script for SourceGuardian loaders. Both scripts will test Your system and say exactly how to install the loaders. In case the loaders are already installed both tester scripts will tell You this too. (For server-wide configuration You need to restart apache...). For the Zend Guard Loader / Optimizer please find the instructions here: http://www.zend.com/products/guard/downloads

Please note: you do not need all the three loaders. Just one of them! To switch between the encoded versions change the include path in /axZm/zoomInc.inc.php

Server Software ASP.NET Version
Ajax-Zoom PHP component can run efficiently on ASP.NET 4.0 as a native fully managed 64-bit .NET application, as a part of ASP.NET web site. This is achieved thanks to Phalanger PHP compiler.
Microsoft .NET 4.0 (full) You do not need to install PHP on your Server!
IIS 7+ IIS 7 (or later) with ASP.NET 4.0 Web Site configured or Visual Studio 2010 for development.
Phalanger 3.0 The PHP language compiler for .NET Framework. Patch: 2012-06-19 no need to install Phalanger as it is now included in the download package and loads dynamically.
The basic installation is fairly easy:
  • Extract the download package somewhere into ASP.NET site.
  • Ensure folder \Bin\Dynamic is writable for your IIS user account
  • Ensure folders \pic\{cache|temp|zoomthumb|zoomgallery|zoomtiles|zoommap|zoomtiles_80|*} are writable
  • Merge provided "web.config" into your "web.config"
  • Example project: You can extract the archive into the root of your ASP.NET server, or open it as an existing web site from Visual Studio 2010 from any location (note you must set empty "Virtual Path" in "Properties" of the web site). Also you might need to set "Enable 32-Bit Applications" under Advanced Settings -> General if you have 64bit operating system.
  • If you experince any troubles try to adjust: in /axZm/zoomConfig.inc.php manually.
Server Hardware

The hardware requirements are basically determined by the image quality, its size and server load. More RAM and faster processor are always better. To make image tiles for an 15 MP, 6 MB large image in acceptable time (about 3 - 10 seconds, depending on processor and load) You will need about 128 MB of free RAM, which is actually nothing these days.

Of course processing ultra high resolution images requires more power and a couple GB of free RAM, but with AJAX-ZOOM it is still possible, e.g. it took us about 2 minutes to process a 420 MP and 200 MB large image with 4GB RAM producing about 4.000 tiles (384x384px) with a total size of 350 MB. Please note, that this procedure has to be executed just once for each image. Generating a zoom image out of tiles usually takes about 0.04 - 0.1 seconds, with watermarking a little longer.

Nevertheless the above benchmarks are highly variable, depend on server load and available hardware resources and therefore should be regarded as approximates.

If image tiles are loaded directly during zoom - pyrLoadTiles, virtually no server resources except traffic are consumed! See e.g. this example.

With the "unlimited" license you can use Zoomify tiles format with AJAX-ZOOM to display gigapix images or 360 spins . See here to find out how it works.
JavaScripts
All JavaScripts files are included in the download package, no need to download them separately!
jQuery 1.5.0+ It is always recommended to use the latest stable version of jQuery. Versions like 1.5.0 or 1.6.0 should not be used. AJAX-ZOOM Ver. <= 3.3 does not support jQuery 1.8+; From AJAX-ZOOM Ver. 4.0+ jQuery 1.8 and 1.9 is supported.
jQuery UI 1.8 ui.core.js, ui.draggable.js, ui.mouse.js, ui.slider.js, ui.widjet.js, effects.core.js
jQuery plugin's
Browser Each browser behaves differently and has it own bugs. In some cases it is therefore good to know the exact name and version, though not always reliable.
MouseWheel Needed if the mousewheel scroll in and out option is activated.
jScrollPane This plugin is optional and can be used for vertical or inline galleries (slightly bugfixed).
Skills
Some basic skills in HTML, CSS, PHP and JavaScript are required to make things work. It is recommended to start with the examples and adjust the source as you need.

How to install

Overview
Please find the more detailed descriptions about steps 4-6 below! The Magento commerce & xt:Commerce installation guides can be found here.

1. Download zip package, unpack and upload everything to a public directory on Your server.

2. Make sure IonCube loaders or Sourceguardian loaders are running correctly.

3. Adjust the options in '/axZm/zoomConfig.inc.php' or better in '/axZm/zoomConfigCustom.inc.php' file to suit Your needs. All options are explained inline in '/axZm/zoomConfig.inc.php' and also below on this page.

To get started right away You need to set permissions for the folders where AJAX-ZOOM (PHP User) will write (e.g. chmod 0775 or 0777) the thumbnails, temporary files and the image tiles. These folders are defined in '/axZm/zoomConfig.inc.php' as:

The download package contains an empty folder structure with some sample images in it (e.g. '/pic/zoom/animals'). You could copy your images into these folders to get the provided examples to "work out of the box".

Prior to Ver. 2.1.4 (Patch: 2010-09-14) You had to adjust all paths manually. Normally for quick testing this is not needed any more. However, if in the provided examples You are getting javascript errors, broken layouts or images do not appear, please check if the following two paths produce correct results and set them manually as needed:

4. Define the images. There are several ways to tell AJAX-ZOOM which images need to be loaded. Each example can be modified to load other images in different ways.

5. Integrate the JavaScript and PHP files into Your Application. Studying the source code of the examples is the best way to see how it works.

6. Optionally batch process all Your images with the help of '/axZm/zoomObjects.inc.php' file. This step is optional, because when an image is loaded for the first time AJAX-ZOOM can also generate everything on-the-fly. For a large amount of images it is recommended to "prepare" the images first, so Your users don't wait to long on each image.

7. If you do not use AJAX-ZOOM as an extension of Magento or xt:Commerce delete the content of the folder /axZm/mods

Image Protection Checklist.

1. If you want to prevent users to download your high resolution source images, make sure there is no access over http to the following directories of your server:

You can protect these directories with .htaccess and .htpasswd;

2. Define a watermark image or text for the first image and the zoomes.

3. If you also want to hide the path of the source image take a look at this option $zoom['config']['cropNoObj'].

Options & Settings

Unlike most other jQuery plugins options are defined in the PHP file - /axZm/zoomConfig.inc.php; this is because the options are used both - by JavaScript and PHP.

In file /axZm/zoomConfigCustom.inc.php some of the options may be overridden depending on the parameter $_GET['example'] passed over the query string in the examples!

All options are set in the array $zoom['config'] e.g. $zoom['config']['picDim'] = '600x400'; You will also find the description of the options inline, whereby online the documentation is updated on the regular basis.

Each example in the download package as well as webshop plugin uses a special configuration options set. Default options in "/axZm/zoomConfig.inc.php" are overridden in "zoomConfigCustom.inc.php" which is included at the bottom of "zoomConfig.inc.php". This happens by passing an extra parameter "example=[some value]" to AJAX-ZOOM directly from examples or plugins over query string. To find out which "example" value is used see sourcecode of the implementation in question or inspect an ajax call to "/axZm/zoomLoad.php" with Firebug or an other developer tool. Thus your specific options set can be found in "zoomConfigCustom.inc.php" after elseif ($_GET['example'] == [some value]){. Please note that the value of example parameter passed over the query string to AJAX-ZOOM does not always correspond to the number of an example found in /examples folder of the download package.

Because AJAX-ZOOM is updated very frequently and its options base grows accordingly, the best practice is to copy options you need to change from "zoomConfig.inc.php" to "zoomConfigCustom.inc.php" after elseif ($_GET['example'] == [some value]). Ofcourse you can create your own [some value] in "zoomConfigCustom.inc.php". By keeping "zoomConfig.inc.php" as it is ($zoom['config']['licenceKey'] and $zoom['config']['licenceType'] can be copied as well) you will be able to update your customized implementation by simply overwriting all files except "zoomConfigCustom.inc.php" and custom css file.

Important: in the CSS file (/axZm/axZm.css) please do not add any width, height, margin or other 'px' values, unless they are already present there and You just want to change them!
General Settings
Option Type Description
licenceKeystring The Licence Key or 'demo'. In demo mode there is a restriction of 3.2 megaPix images, e.g. (2048 x 1536 px). If You would like to test AJAX-ZOOM with high resolution images prior to purchase You can receive the "Evaluation License" free of charge. Contact the support to get the License Key for Your internet domain by giving the URL to the working demo or implementation of AJAX-ZOOM on Your server.
licenceTypestring Type of the licence: Ver. <= 3.3 - 'Basic', 'Partner', 'Standard', 'Business', 'Corporate' or 'Unlimited', keep 'Basic' for demo / free mode.

Ver. >= 4.0 - 'Evaluation', 'Developer', 'Basic', 'Standard', 'Business', 'Corporate', 'Enterprise' or 'Unlimited'
memory_limitstring Ver. 4.0+ Set memory limit for heavy operations like image tiling. Before Ver. 4.0 there was always ini_set ('memory_limit', 'HIGH VALUE'); at the beginning of the config file. In Ver. 4.0+ you can use php.ini defaults and set higher value, e.g. '4000M' in this option.
domainstring Your domain name, like: 'http://www.ajax-zoom.com'. Leave it blank in this version!
quirksbool Fixes some (not all) problematic issues with Internet Explorer. Set it to true, if Your page doctype (the line obove the HTML tag) is invalid or missing.
parToPassstring Keep this value as it is if you did not modify '/axZm/zoomObjects.inc.php'; parToPass is a query string which determines the image array (see defining the images), whenever ajax request is made. There are various cases when this query string is needed. It should contain all necessary parameters to rebuild the image array, e.g. as a result: productID=12345&imageSet=2 (any arbitrary parameters which depend on Your implementation). To set this option dynamically the expression could look like this:
$zoom['config']['parToPass'] = 
'productID='.(int)$_GET['productID'].'&
imageSet='.(int)$_GET['imageSet'];
To facilitate this process it is strongly recommended to generate this query string with the class method zoomServerPar. This following expression, which is set like this on default, is sufficient for most applications:
$zoom['config']['parToPass'] = 
$axZmH -> zoomServerPar('str', array('zoomID', 
'zoomFile', 'zoomLoadAjax', 'loadZoomAjaxSet'), 
false, $_GET);
The above method will generate a query string out of all $_GET parameters explicitly excluding zoomID, zoomFile, zoomLoadAjax and loadZoomAjaxSet parameters if present. The excluded parameters are internally send by AJAX-ZOOM and will be added if needed. This four need to be excluded, because AJAX-ZOOM could work not properly in some cases. Setting this option correctly is very important!
cropNoObjbool Each time AJAX-ZOOM requests a portion of an image, it passes (along with the parToPass - see above) the query string parameter zoomID to the file zoomLoad.php; zoomID serves as identifier to choose the desired image out of the array with images (see defining the images), whereby zoomID is the numeric key in this image array.

In some cases it could be not preferable to generate the image array for each zoom request. Setting this option to true will skip the generation of the image array and pass the image filename and its absolute path instead of zoomID. The advantage of enabling this option is a slight speed enhancement. The disadvantage is that anyone could see the location of the original image. (The folder with original images can however be easily .htpasswd protected)
cTimeComparebool Compare the creation time of the original image with the creation time of images made by AJAX-ZOOM. In case the creation time of the original image is newer, all AJAX-ZOOM images will be renewed. This could happen if the original image is overwritten with a completely different image after, for example, the image tiles are already created. Or the image has been overwritten bei the same image with larger resolution.
exifAutoRotationbool Autorotate images depending on EXIF information written by the camera. If you want to keep EXIF information of the original file you will need the PEL EXIF library. Pel is not part of the destribution package. Download at http://lsolesen.github.com/pel and put the files from "/src" directory into "/axZm/classes/pel/"
visualConfbool Appends visual configuration under the zoom for testing purposes, like in example 1. This option is experimental and besides demonstration it is meant to be in the backend of a larger system for dynamic configuration. It should be expanded in the feature versions. As for now it is a quick & dirty solution to demonstrate some options and not more than that.
pic_ext_allowarray An array with supported image types like jpg. Currently only jpg is supported.
picDimstring Max dimensions for initial image, e.g. '600x400'. Changing this setting will also change the entire dimensions of the zoom player.
enlargeSmallImagebool Ver. 2.1.1+ Enlarge image if width and height of the source image is smaller than picDim.
firstImageDialogbool Display a dialog after initial images have been generated.
keepBoxWbool Keep stage dimensions for width as defined in picDim independently from image proportions. By using a gallery this option must also be activated.
keepBoxHbool Keep stage dimensions for height as defined in $zoom['config']['picDim'] independently from image proportions. By using a gallery this option must also be aktivated.
gravitystring The viewpoint (viewport) when the user clicks on the the image to zoom in or out. Possible values:
  • 'viewPoint' - clicked point stays where it is
  • 'center' - clicked point gravitates to center
Scrolling with the mouse wheel always takes the current viewport.
traveseGravitystring Behavior of panning, when the image is zoomed to 100% (max zoom) and the user clicks on the image. Possible values:
  • 'center' clicked point gravitates to center.
  • 'adverse' will flip the clicked point to the other side of the middle Point of the stage.
  • 'none' Nothing happens.
disableZoombool Disable zoom function completly.
disableZoomExceptarray Exception events when Zoom function is disbled. Possible (multiple) values: zoomInClick, zoomOutClick, areaSelect, onSliderZoom, onZoomInButton, onZoomOutButton, onButtonClickMove_N, onButtonClickMove_E, onButtonClickMove_S, onButtonClickMove_W, onMouseWheelZoomIn, onMouseWheelZoomOut
iMagickbool Ver. 2.1.5+ Use ImageMagick for all image processing. Overrides all other options regarding the choice between GD and ImageMagick.
imbool Use Imagemagick to crop images, make initial images and thumbs. If set to false, GD will be used. See also:
$zoom['config']['pyrProg']
(make tiles prog) $zoom['config']['pyrStitchProg'](stitch tiles prog)
imKeepProfilesbool Ver. 4.0+ Keep color and other profiles for all operations processed with ImageMagick.
imQuotesmixed Only for ImageMagick: remove or replace single quotes in exec string. Possible values: 'remove', 'replace' oder false. 'replace' will replace them to double quotes.
imLimitarray Only for ImageMagick: limit memory and other settings. By default they are set to a very high value and automatically adjusted to available system resources.
imPathstring Root path to imagemagick convert Ver. 6+, if You have one, e.g. '/usr/bin/convert'. On some installations it is sufficient to write 'convert' without the full root path.
qualint Output JPG quality for zoomed images, max. 100. See also pyrQual
qualPngarray Ver. 4.0+ Output PNG quality for zoomed images.
qualRangearray Alternatively to the above You can set a quality range depending on users internet connection speed. This speed is measured on the fly with images, which are downloaded anyway, therefore being possibly inaccurate. In the array You can set the low and upper ranges for JPG quality, e.g. between 40 and 90, and low and upper ranges for internet connection speed in kbit/s, e.g. between 128 and 768
initPicQualint Output JPG quality for initial images.
initPicQualPngarray Ver. 4.0+ Output PNG quality for initial images.
pngModebool Ver. 4.0+ Generate PNG images, tiles etc. instead of JPG
pngKeepTranspbool Ver. 4.0+ Keep transparent areas of the images when pngMode is enabled. When using GD2 the results might be not satisfactory (noice) depending on the compiled libs.
notTouchUAarray Not touch device, array with possible strings within user agent string, e.g. array("webkit viewer", "somthing_else"); Enforces mouse events even if browser wrongly claims to have touch events.
postModebool Ver 4.1.5+ Use POST instead of GET for all AJAX requests. Can be overwritten by passing arguments to jQuery.fn.axZm, jQuery.fn.axZm.load or jQuery.fn.axZm.openFullScreen
Major Directories and Filenames
Option Type Description
fpPPstring Server root path to www directory, e.g. '/srv/www/htdocs/web123' or '/home/yourdomain/public_html'. Usually it is $_SERVER['DOCUMENT_ROOT']; without slash at the end. Set this option manually if it does not produce correct results! This option is very important!
installPathstring Ver. 2.1.4+ (Patch: 2010-09-14) - "Installation path", e.g '/test/ajax-zoom-test' (without slash at the end). Set this parameter to '' if you want to set the paths individually, where 'installPath' used as a prefix. On default this option is set by using the $axZmH->installPath() method, which is not alsways right. Set this option manually if installPath() does not produce correct results!
zoomLoadFilestring Absolute path for the file zoomSess.php, e.g. '/axZm/zoomSess.php'
zoomLoadSessstring Absolute path for the file zoomSess.php, e.g. '/axZm/zoomSess.php'
iconstring Folder where icons are located, absolute path with a slash at the end! This folder should not be password protected! e.g. '/axZm/icons/'
jsstring Folder where JavaScript files are located, e.g. '/axZm/'
jsDynLoadbool Dynamic load of all necessary jquery plugins and CSS files. After a check weather plugins have already been loaded the JavaScript and CSS files are loaded (injected into the HEAD section of HTML) instantly on start. If true there is no need to use the PHP class methods drawZoomStyle() and drawZoomJs() in HEAD of Your HTML.
<link rel="stylesheet" href="/axZm/axZm.css" type="text/css">
<script type="text/javascript" src="/axZm/plugins/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/axZm/jquery.axZm.js"></script>
jsMinbool If jsMin is true the minified versions of the JavaScript files will be loaded.
jsUiAllbool Load all jQuery UI moduls. Otherwise only modules needed by AJAX-ZOOM are loaded. Activate this option if you experience version conflicts or any other errors regarding the jQuery UI.
jsUiVerstring Ver. 4.0+ jQuery UI version used by AJAX-ZOOM
jsUiThemestring Ver. 4.0+ Easily switch between jQuery UI themes by changing the value of this option. The UI theme loaded is located under /axZm/plugins/jquery.ui/themes/[jsUiTheme]; You can create your own or import already existing.
jsUiSuppressJSbool Ver. 4.0.7+ Suppress loading jQuery UI JavaScript files. May result in JavaScript error if certain jQuery UI elements are not loaded otherwise.
jsUiSuppressCSSbool Ver. 4.0.7+ Suppress loading jQuery UI CSS files. Enable this option if all css classes are loaded otherwise by e.g. a template theme.
fontPathstring Fonts directory path e.g. '/axZm/fonts/'. All font files (.ttf) have to be in the same directory.
picstring Base folder where original images are located, e.g. '/pic/zoom/'. Overwrite this value by Your script if You use different folders each time. An example is provided in zoomObjects.inc.php or here. This folder can be .htpasswd protected. Please make sure, that PHP is allowed to open the files (chmod).
thumbsstring Folder, where initial images will be written into, e.g. '/pic/zoomthumb/'. Please make sure PHP can write to this directory (chmod)!
tempstring Folder where to write temporary zoomed images, e.g. '/pic/temp/'. Please make sure PHP can write to this directory (chmod)!
tempCachestring Folder where thumbnails generated with the API method $axZm->rawThumb() can be optionally cached, e.g. '/pic/cache/'. Please make sure PHP can write to this directory (chmod)!
Image Map
"Image map" is a small image, where the user can see the zoomed location and quickly pan the zoomed image.
Option Type Description
useMapbool Enable image map.
mapParentmixed Parent DIV id (string) of the image map if you want to place it outside of AJAX-ZOOM. See example16.php
mapParCenterbool Center within parent container.
dragMapbool If activated, image map is draggable.
mapHolderHeightint If dragMap is activated, the holder height in px. CSS: .zoomMapHandle
mapHolderTextstring If dragMap is activated, the text string inside the holder.
zoomMapDragOpacityfloat If dragMap is activated, opacity while dragging, e.g. 0.7 (70%)
zoomMapSelOpacityfloat Opacity of the selector inside the image map, e.g. 0.25 (25%), CSS: .zoomMapSelArea
zoomMapSelBorderint Ver. 4.0+ Border width of the selector.
zoomMapContainmentstring, bool If dragMap is true, constrain draging image map within a certain div or other element, e.g. window or "#zoomAll". Use false to disable containment.
zoomMapAnimatebool Animate map while switching to a different image.
zoomMapVisbool Instantly hide image map if image is not zoomed. Map will appear after the user zoomes into the image. Use false for auto hide, true for map visible from the beginning.
mapFractfloat Image map size in percentage of picDim width, e.g. 0.25 (25%).
mapWidthint, bool Fixed map width in pixels. Overrides mapFract.
mapHeightint, bool Fixed map Height in pixels. Overrides mapFract.
mapButtonbool Show the button for turning image map on and off.
mapBorderarray Outer border width of the image map. You can set top, right, bottom and left border width separately. Please do not set this values in the css file.
zoomMapSwitchSpeedint Restore speed of the image (and image map) if the image is zoomed and the image is switched over gallery in ms, e.g 1000 (1 second); overrides restoreSpeed
zoomMapRestbool Restore position of the map on window resize.
mapPosstring Position of the map! Possible values: 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'; Map must be not dragable - dragMap set to false;
mapSelSmoothDragbool Smooth flow of zoomed image while dragging the selector rectangle inside the image map.
mapSelSmoothDragSpeedint Smoothness speed in ms of map selector dragging, e.g. 1000 (1 second)
mapSelSmoothDragMotionstring Ver. 2.1.3+ Smoothness motion of map selector dragging, e.g. 'easeOutSine'
mapSelZoomSpeedint Time in ms, after which the image loads instantly if the user stucks at one point while dragging the map selector, e.g. 400 (0.4 seconds)
mapMouseOverbool Move selector inside zoom map by mouseover and not by dragging the selector. Instantly disabled for touch devices.
mapMouseWheelbool If mapMouseOver is enabled, allow to zoom in and out using mousewheel.
mapHorzMarginint Ver. 4.0+ Horizontal margin from the edge of the player.
mapVertMarginint Ver. 4.0+ Vertical margin from the edge of the player.
mapOpacityfloat Ver. 4.0+ Opacity of the map when mouse is not over it.
mapClickZoombool Ver. 4.1.0+ On none zoomed state clicking at a point on the map will result into zoom to 100%
mapOwnImagebool, string Ver. 4.0+ Define physical image dimensions for the map image e.g. "200x200" or false;
mapPathstring Ver. 4.0+ Path where map images are stored when mapOwnImage is set to some size.
mapFilterIMarray Ver. 4.0+ Some image filters like sharp or grayscale applied to the map image when using GD for processing.
imageSlicerarray Ver. 4.1.5+ Settings for external server for all image operations (including on-the-fly generation of tiles and other images). Requires unlimited AJAX-ZOOM license;
sortBystring Ver. 4.1.5+ Sort images by some file information returned from php stat(), e.g. ctime, mtime; on default images are sorted by their file names;
sortReversebool Ver. 4.1.5+ Reverse sorting order of the images;
speedOptSetbool Ver. 4.1.5+ Makes AJAX-ZOOM to switch faster between images. With this setting several other options will be overridden at the end of zoomConfig.inc.php
Description Area
Instead of using tooltips images descriptoin appears in a semitransparent box over the actual image. The description shows up when the user sticks with the mouse over a thumb in vertical or horizontal galleries. The definition of image descriptions can be done in zoomObjects.inc.php ($pic_list_data[$k]['fullDescr']), CSS: .zoomDescr
Option Type Description
zoomShowButtonDescrbool, string Enable description for navigation buttons on mouseover. If true the next options apply equally for buttons mouseover. Ver. 4.0+ Can be now set to left, right or false;
descrAreaTranspfloat Description area opacity, e.g. 0.5
descrAreaShowTimeint Showing animation time in ms, e.g. 200
descrAreaHideTimeint Hiding animation time in ms, e.g. 200
descrAreaShowTimeOutint The delay in ms after which the description shows up, e.g. 500
descrAreaHideTimeOutint The delay in ms after which the description instantly hides, if mouse is not over an object any more, e.g. 750
descrAreaHeightint Description area minimal height in px. Setting this value to a small integer like 0, 2, or 5 will additionally produce nice animation. The final height depends on text length and is determined automatically.
descrAreaMotionstring Description motion type, e.g. "swing"
Galerien
There are three types of galleries You can choose from: vertical, horizontal and "inline" (inner gallery). Each of this three types has its own settings. You can use all three types at the same time, if it does make sense to Your application. In some cases it makes sense to enable "inline" gallery and hide the button for it. AJAX-ZOOM instantly generates the thumbnails, which You can use for other purposes, like in this examples. Following are only shared setting for all gallery types.
Option Type Description
galleryPicQualint JPG quality for gallery thumbs, e.g. 90 (max. 100)
galleryPicQualPngarray Ver. 4.0+ Quality for gallery thumbs under pngMode
galleryFillbool Ver. 4.0+ Fit gallery size with the image. Depending on ratios image is croped to fill entire area.
galleryFilterIMarray Ver. 4.0+ Some image filters like sharp, unsharp or grayscale applied to the gallery thumbs when using Imagemagick for processing.
galleryFilterGDarray Ver. 4.0+ Some image filters like sharp, sepia-tone or grayscale applied to the gallery thumbs when using GD for processing.
galleryDialogbool Display modal dialog (only once) when thumbs have been made by the server.
galleryFadeOutSpeedint Fadeout speed in ms for previous image in the gallery, e.g. 300
galleryFadeInSpeedint Fadein speed of new image, e.g. 300
galleryFadeInMotionstring Fadein animation motion, e.g. 'easeOutCirc'
galleryFadeInOpacityfloat Fadein starting opacity, e.g. 0.1 or 0
galleryFadeInSizefloat Fadein starting size multiplier, e.g. 1.0 - no change, 0.5 - twice as small as original, 2.0 - twice as big as original. This option gives a nice zoom in or zoom out effect during switching between images in the gallery.
galleryFadeInAnmstring Fadein starting animation position, possible values: 'Center', 'Top', 'Right', 'Bottom', 'Left', 'StretchVert', 'StretchHorz'; Ver. 4.0+ added: 'SwipeHorz', 'SwipeVert', 'Vert', 'Horz'
galleryInnerFadeint, bool "Innerfade" between pictures during switching. Overrides galleryFadeOutSpeed and galleryFadeInSpeed during switching. $zoom['config']['galleryFadeInSpeed'] still valid for first loading image in the gallery. For disabling this option set it to false.
galleryInnerFadeCutint, bool Applies only if galleryInnerFade is true: "Innerfade" or "Crossfade" between images looks nice, if images are equal in size or have the same background matching with the stage color. Fading a smaller image over a bigger one with different backgrounds does not look nice at all. Enabling this option will "crop" the previous image to the size of the fading new image, so it looks nice :-) This option sets the speed in ms of the "shutter" that will be pushed from the sides or top and bottom of the image. For disabling this option set it to false.
galleryInnerFadeMotionstring Motion type of the above animation (galleryInnerFadeCut), e.g. 'swing'
gallerySwipemixed Ver. 4.0+ Enable swiping gesture on mobile touch devices to swipe to next or previous image. Possible values: 'Horz', 'Vert' or false to disable.
gallerySlideNavibool Ver. 4.0+ Enable prev / next buttons above the picture of the player. In 360/3D mode these buttons turn the object.
gallerySlideNaviMouseOverbool Ver. 4.0+ Arrows for prev / next over the image appear only when mouse is over the player. Disabled for touch devices.
gallerySlideNaviOnlyFullScreenbool Ver. 4.0+ Show arrows for prev / next over the image only at fullscreen mode.
gallerySlideNaviMarginint Ver. 4.0+ Margin of the prev / next buttons from the edge of the player.
gallerySlideNaviAnmstring Ver. 4.0+ Transition type when clicked on the prev / next button, possible values 'Center', 'Top', 'Right', 'Bottom', 'Left', 'StretchVert', 'StretchHorz', 'SwipeHorz', 'SwipeVert', 'Vert', 'Horz'
gallerySlideSwipeSpeedint Ver. 4.1.9+ Speed for gallerySlideNavi in ms if gallerySlideNaviAnm is set to SwipeHorz or SwipeVert
scrollPanebool Scrollbar replacement - ScrollPane (jScrollPane.js) for inline and vertical galleries.
scrollPaneThemestring jScrollPane theme folder located in "/axZm/plugins/jScrollPane/themes".
scrollPaneOptionsVertarray jScrollPane options array for vertical gallery.
scrollPaneOptionsFullarray jScrollPane options array for "inline gallery".
gallerySwitchQuickbool Ver. 4.1.0+ Enable "quick switching" for the gallery items. See also zoomSwitchQuick API
Mouseover animation parameters between different colors of the gallery thumbs, CSS: .zoomGalleryBox to .zoomGalleryBoxOver AND .zoomFullGalleryBox to .zoomFullGalleryBoxOver
galleryThumbFadeOnbool Enable fade animation between the two CSS classes for the gallery thumbs.
galleryThumbOverSpeedint If galleryThumbFadeOn is aktivated, the speed of animation in ms on mouseover, e.g. 150
galleryThumbOutSpeedint If galleryThumbFadeOn is aktivated, the speed of animation in ms on mouseout, e.g. 1250
galleryThumbOverOpaquefloat Overall opacity on mouseover, e.g 1.0 (1.0 -> no opacity, 100%)
galleryThumbOutOpaquefloat Overall opacity on mouseout, e.g 0.8 (0.8 -> 80%)
galleryNoThumbsbool Do not generate gallery thumbs. Patch: 2012-04-21 Changed the way galleryNoThumbs works. If any gallery is shown and galleryNoThumbs is enabled, AJAX-ZOOM will not try to load the thumbs and show only description of the thumb. Useful if you have many images in the gallery, e.g. from IP camera and only want to show the time.
galleryThumbDescfunction  
Ver. 3.3.0 Patch: 2012-04-21 Create an anonymous function for thumb description in the gallery. $k is the number of the image in the gallery. $pic_list_data is an array containing following information: $pic_list_data[$k]["fileName"], $pic_list_data[$k]["fileSize"], $pic_list_data[$k]["imgSize"], $pic_list_data[$k]["thisImagePath"]

Example returning an information string about the image:
return date("H:i:s", filectime ($pic_list_data[$k]["thisImagePath"]));

You can also create a named function right here and define $zoom['config']['galleryThumbDesc'] = "yourFunctionNameForThumbDescription"; e.g. function yourFunctionNameForThumbDescription($pic_list_data, $k){return $pic_list_data[$k]["imgSize"][0];} The above approach however can not be overwritten in zoomConfigCustom.inc.php, so we use create_function at this place.
galleryThumbFullDescfunction Ver. 3.3.0 Patch: 2012-04-21 Create an anonymous function for longer thumb description, which will be shown on mouseover the thumb in a gallery.
Option Type Description
useHorGallerybool Enable horizontal gallery.
galleryHorPicDimstring Thumb size in horizontal gallery, e.g. '70x70'
galHorPositionstring Position of the horizontal gallery, possible values:
  • top1 - above the image, above navigation bar
  • top2 - above the image, under navigation bar
  • bottom1 - under the image, above navigation bar
  • bottom2 - under the image, under navigation bar
galHorHeightint Height of the gallery container in px.
galHorCssMarginTopint Top margin of the gallery thumb "frames" in px, CSS: .zoomHorGalleryBox, .zoomHorGalleryBoxSelected, .zoomHorGalleryBoxOver
galHorCssMarginBetweenint Distance between thumb "frames", CSS: .zoomHorGalleryBox, .zoomHorGalleryBoxSelected, .zoomHorGalleryBoxOver
galHorMarginTopint Top margin of the horizontal gallery container in px.
galHorMarginBottomint Bottom margin of the horizontal gallery container in px.
galHorFlowbool "Flow-scroll". Scrolling happens depending on mouse position within the container.
galHorArrowsbool Enable arrows (left and right) as horizontal scroll navigation.
galHorMousebool Mousewheel scrolling support.
galHorArrowWidthint Width of the arrow images for horizontal scroll navigation in px.
galHorCssPaddingint Space between the actual thumb and outer frame in px, CSS: .zoomHorGalleryImg
galHorCssBorderWidthint Border width outer frame in px, css: .zoomHorGalleryBox, .zoomHorGalleryBoxSelected, .zoomHorGalleryBoxOver
galHorCssDescrHeightint Height of description div under the thumb in px, CSS: .zoomGalleryDescr, Use 0 to disable thumb description
galHorCssDescrPaddingint Padding of the description div in px, CSS: .zoomHorGalleryDescr
galHorScrollPosstring Tend to center the thumbnail image in the gallery after clicking on it.
galHorScrollToCurrentbool Scroll to the first loaded image thumb on the beginning.
galHorScrollMotionstring Motion type for scroll, e.g. 'easeOutSine'
galHorScrollSpeedint Scroll speed in ms, e.g. 1000
galHorScrollByint Scroll by this number of thumbs, e.g. 3
galHorInnerCornerbool Enable inner container rounded corners.
galHorInnerCornerImagestring If galHorInnerCorner activated, the background image for rounded corner, located at icons folder, e.g. 'inner_corner_black_5.png'
galHorInnerCornerWidthint If galHorInnerCorner activated and galHorInnerCornerImage is defined, border-radius in px.
Option Type Description
useGallerybool Enable vertical gallery.
galleryPicDimstring Vertical gallery thumbs size, e.g. '100x100'
galleryPosstring Gallery Position, possible values: 'left', 'right'
galleryLinesint Number of columns in the vertical gallery, limited by users resolution and Your layout.
galleryScrollbarWidthint Margin in px to the right from thumbs in vertical gallery (space for scrolling bar). If something should not fit increase or decrease this value.
galleryScrollTopbool Scroll gallery to the point, where the clicked image thumb is on top of visible area.
galleryScrollToCurrenttype Scroll to the loaded image thumb on the beginning.
galleryMarginLeftint Margin to the zooming image on px, only if galleryPos is 'right'.
galleryCssPaddingint Space in px between the thumb image and outer frame, CSS: .zoomGalleryImg
galleryCssBorderWidthint Border width of the outer thumb frame in px, CSS: .zoomGalleryBox, .zoomGalleryBoxSelected, .zoomGalleryBoxOver
galleryCssDescrHeightint Height of description div under the thumb, CSS: .zoomGalleryDescr
galleryCssDescrPaddingint Padding within the description div in px, CSS: .zoomGalleryDescr
galleryCssMarginint Distance between thumb "frames" in px, CSS: .zoomGalleryBox, .zoomGalleryBoxSelected, .zoomGalleryBoxOver
galleryCssFirstTopMarginint Ver. 4.0+ Top Margin for the first thumb.
"Inline Gallery" is shown by clicking an a button in navigation and displays over the image.
Option Type Description
useFullGallerybool Enable inline gallery.
galleryFullPicDimstring Size of the thumbs, e.g. '70x70', CSS: .zoomFullGalleryBox, .zoomFullGalleryBoxOver, .zoomFullGalleryBoxSelected, .zoomFullGalleryDescr
galFullButtonbool If true, the "Inline Gallery" Button is enabled. Sometimes it makes sense to enable inline gallery and disable the button, e.g. as in example 7
galFullScrollCurrentbool If set to true it will be scrolled to the current selected image.
galFullAutoStartbool Autostart and autoshow "Inline Gallery" after initialization of AJAX-ZOOM.
galFullTooltipbool Enable description tooltip for "Inline Gallery".
galFullTooltipOffsetint Tooltip offset from the thumb in px, e.g. 5
galFullTooltipSpeedint Tooltip fadein speed in ms.
galFullTooltipTranspfloat Tooltip opacity, e.g. 0.93
galFullCssPaddingint Space between the thumb and outer frame in px, e.g. 5, CSS: .zoomFullGalleryImg
galFullCssBorderWidthint Border width outer frame in px.
galFullCssDescrHeightint Height of description under the thumb in px, e.g 10, CSS: .zoomFullGalleryDescr
galFullCssDescrPaddingint Padding within the description in px, CSS: .zoomFullGalleryDescr
galFullCssMarginint Distance between thumb frames in px, CSS: .zoomFullGalleryBox, .zoomFullGalleryBoxSelected, .zoomFullGalleryBoxOver
Prev, Next, Play buttons for the gallery.
Option Type Description
galleryNavibool Enable gallery navigation buttons.
galleryNaviPosstring Gallery navigation position. Possible values: 'top', 'bottom' or 'navi'. Top and bottom refere to position above or under the vertical gallery container.
galleryNaviHeightint Ver. 4.0+ Height of the parent container if positioned not inside navigation bar (galleryNaviPos not 'navi')
galleryNaviCircbool Circular gallery navigation - carousel (after reaching the last image the first image is next).
galleryNaviMarginarray Gallery navigation container margin in px, array(top, right, bottom, left), e.g. array(2, 25, 5, 0);
galleryButtonSpaceint Space between buttons in px.
galleryPlayButtonbool Enable Play, Pause button.
galleryAutoPlaybool Enable autoplay (diashow) on start.
galleryPlayIntervalint Interval for diashow in ms, e.g. 3500 (3,5 seconds)
3D (VR Object) / 360 Spin & Zoom
Option Type Description
spinModbool Enable 360 spin / 3D spin & zoom. Inline Gallery (useFullGallery) must be enabled too.
spinBouncemixed Ver. 4.0+ Enable bounce for 360. Spinning will stop at last frame and go backwards to the first. This allows to use AJAX-ZOOM with objects where "backside" is not interesting or it is simply not possible to take images from the back, e.g. when they are mounted at the wall. HD "jpeg movies", time lapse photography are also fields of application with this option. Possible values: "bounce", "stop" and false
spinKeysarray Ver. 4.0+ Configuration of the keyboard keys to perform spinning in 360 and 3D;
spinSensitivityfloat Spin sensitivity to mouse movement. Greater number means faster spinning.
spinSensitivityZfloat Spin sensitivity to mouse movement of the Z axis. Greater number means faster spinning.
spinReversebool Activate reversed direction of the spin to mouse movement. In fact the direction depends on the order of the images in the sequence.
spinContrabool 4.1.9+ Reverse direction of the spin in general
spinReverseZbool Ver. 3.3.0+ Patch: 2010-01-30 Activate reversed direction of the spin to mouse movement of the Z axis (multirow). In fact the direction depends on the order of the images in the sequence.
spinReverseBtnbool, int Ver. 4.1.4+ Activate reversed direction for all kind of spin buttons. Normally the spin direction of the buttons is changed instantly when spinReverse option is changed. With this option you can reverse it again...
spinFlipbool Ver. 3.3.0+ Patch: 2010-01-30 Spin or (mouse) movements in bottom-down directions instead of left-right. This would be usefull if You shoot e.g. a guitar on a tuentable in vertical position and then turn the images by 90 degree.
firstAxismixed Ver. 3.3.0+ Patch: 2010-01-30 First Z axis (multirow) to be displayed. Can be overridden by passing $_GET['firstAxis'] in query string. Possible values: auto (middle), number of subdir, name of subdir.
spinDemobool Start spin after it first loads.
spinDemoTimeint Time in ms for autospin which is needed to make one turn.
spinDemoRoundsint, bool Number of rounds after which the spin stops instantly. Use false for endless loop. The spinning will also end when the user moves the mouse over the object.
spinOnSwitchbool Demo spin each time the User switches to routate tool.
spinWhilePreloadbool Ver. 3.2.2+ Spin while preloading.
spinMouseOverStopbool Stops automatic spinning if mouse over the object.
spinEffectarray Spin effect settings:
spinEffect['enabled']bool Enable spin effect.
spinEffect['zoomed']bool Enable spin effect while zoomed.
spinEffect['opacity']float Opacity of the blur effect.
spinEffect['time']int Time in ms of the blur effect.
spinPreloaderSettingsarray Preloader settings, CSS: .spinPreloaderHolder, .spinPreloaderBar, .spinPreloadContainer
spinPreloaderSettings['width']int Width of the preloader container. Ver. 4.0+ can be % value as string.
spinPreloaderSettings['height']int Height of the preloader container.
spinPreloaderSettings['borderW']int Border width of the preloader container in px.
spinPreloaderSettings['barH']int Height of the preloader progress bar in px.
spinPreloaderSettings['barOpacity']float Opacity of the preloader progress bar
spinPreloaderSettings['text']string Language var, e.g. 'Loading frames'
spinPreloaderSettings['gravity']string Ver. 4.0+ Position of the preloader, default: "Center"
spinPreloaderSettings['gravityMargin']int Ver. 4.0+ Margin to the edges of the player
spinPreloaderSettings['margin']int Ver. 4.0+ Margin of the preloader content to its edge.
spinPreloaderSettings['countMsg']bool Ver. 4.0+ Show counting message.
spinPreloaderSettings['statusMsg']int Ver. 4.0+ Show status message.
spinPreloaderSettings['Lx']string Ver. 4.0.6+ Several localization strings.
cueFramescsv, bool Ver. 3.1.0+ CSV (comma-separated values) of frames numbers, which are loaded into a gallery if it is activated. Clicking on a thumb will result into spinning to this particular frame.
spinToMotionstring Ver. 3.1.0+ Motion type of the spinning to a specific frame, see also cueFrames
spinOnClickbool Ver. 3.3.0+ If activated and spin tool is selected clicking on the image will result into spinning the object, otherwise it will zoom to 100%.
spinAreaDisablebool Ver. 3.1.0+ Disable spinning for the zoom area, see this example
gallerySlideNavibool Ver. 4.0+ Enable turn left / right buttons above the picture of the player. In the 2D mode this option has a different functionality. See also gallerySlideNaviMouseOver, gallerySlideNaviOnlyFullScreen and gallerySlideNaviMargin
Ver. 3.0.2+ 360 degree spin slider
spinSliderbool Ver. 3.0.2+ Enable UI slider as additional control for spinning.
spinSliderHeightint Ver. 3.0.2+ Height or thikeness of the slider in px.
spinSliderHandleSizeint Ver. 3.0.2+ Height or thikeness of the slider handle in px.
spinSliderWidthmixed Ver. 3.0.2+ Width of the slider. false (auto width) or integer in px;
spinSliderPositionstring Ver. 3.0.2+ Position of the slider. Possible values: naviTop, naviBottom, top, bottom
spinSliderContainerHeightint Ver. 3.0.2+ Height of the parent container in px.
spinSliderContainerPaddingint Ver. 3.0.2+ Padding of the slider container in px.
spinSliderTopMarginint Ver. 3.1.0+ Top Margin of the spin slider in px.
spinSliderFSoffsetint Ver. 4.0+ Margin from bottom edge at fullscreen mode.
spinSliderPlayButtonbool Ver. 3.1.0+ Play / pause button left to the spin slider.
spinSliderReversebool Ver. 4.0+ Reverse direction of the slider.
Navigation bar
List mit all buttons, also from other topics: naviPanButSwitch, naviSpinButSwitch, naviCropButSwitch, naviZoomBut, naviPanBut, naviRestoreBut, mapButton, galFullButton, fullScreenNaviButton, help, downloadButton, galleryNavi, galleryPlayButton
Option Type Description
displayNavibool Eneable (display) regular navigation bar. For disabling / enabling in the fullscreen mode please set fullScreenNaviBar option.
firstModstring Ver. 3.0.1+ First switched tool on load. Poosible values: crop, pan, spin
keyPressModarray Ver. 4.0+ Quickly switch between crop, pan or spin using keyboard keys (experimental).
forceToPanbool Ver. 3.0.1+ Instantly switch to pan when reached 100% zoom level.
zoomLogInfoDisabledbool Ver. 3.0.1+ Completely disable zoom level.
zoomLogInfobool Along with zoom level the time needed to generate the zoomed picture and the overall image traffic will be shown. CSS: .zoomLogHolder, .zoomLog
zoomLogJustLevelbool Diplay only the zoom level. If true - disable zoomLogInfo above. CSS: .zoomLogHolder, .zoomLogJustLevel
deaktTranspfloat Opacity for deactivated bottons, [0-1], e.g. 0.5
disabledTranspfloat Ver. 2.1.1+ Opacity for disabled buttons, when image is smaller than stage dimensions, [0-1], e.g. 0.2
Ver. 3.0.2 Zoom slider
zoomSliderbool Ver. 3.0.2 Enable vertical UI slider for zoom in and out
zoomSliderHorizontalbool Ver. 3.3.0 Patch: 2011-12-27 Enable horizontal slider.
zoomSliderHeightint Ver. 3.0.2 Height of the vertical slider in px.
zoomSliderHandleSizeint Ver. 3.0.2 Height or thikeness of the slider handle in px.
zoomSliderWidthint Ver. 3.0.2 Width or thikeness of the slider in px.
zoomSliderPositionstring Ver. 3.0.2 Position of the slider. Possible values: topRight, topLeft, bottomRight, bottomLeft, top, bottom Ver. 4.0+ added: left, right
zoomSliderMarginVint Ver. 3.0.2 Vertical margin of the slider in px.
zoomSliderMarginHint Ver. 3.0.2 Horizontal margin of the slider in px.
zoomSliderOpacityfloat Ver. 3.0.2 Opacity of the slider [0.0 - 1.0], diabled for MSIE.
zoomSliderContainerPaddingint Ver. 4.0+ Padding of the parent container which can be styled with css - #zoomSliderZoomContainer
zoomSliderMouseOverbool Ver. 4.0+ Show zoom slider only when mouse is over the player. Disabled for touch devices.
Language vars log
zoomLogLevelstring Zoom level text string, e.g. 'Zoom Level:'
zoomLogTimestring Time needed to generate the zoomed picture, e.g. 'Zoom Time:'
zoomLogTrafficstring Traffic, e.g. 'Zoom Traffic:'
zoomLogSecondsstring Seconds, e.g. 'sec.'
zoomLogLoadingstring Loading message, e.g. 'Loading...'
Help (Info) button
helpbool Enable help (Info) button.
helpTranspfloat Opacity of Help (Info) container, e.g. 0.95
helpTimeint Help (Info) container transition time in ms, e.g. 300
helpMarginint Margin in px of help container within the stage, e.g. 20
helpTxtstring String HTML of what is displayed in help / info container. Write whatever You want in it. Feel free to generate this var dynamically with:
JavaScript (jQuery): jQuery('#zoomedHelp').html('Your content goes hier'); PHP: $zoom['config']['helpTxt'] = $yourContentVar;
helpUrlstring Instead of the option helpTxt load an external url into the help / info container as iframe.
Button icons
buttonSetstring Subfolder in the icons directory, where the images for the buttons are located, e.g. 'default'. You can create a different button set, place it in some folder and set this option in order to changes take place.
iconsarray Multidimensional array with icons parameter for each button in the navigation. See the source code in
mapButTitlearray Multidimensional array with icons language vars.
Ver. 4.0+ Mobile Buttons (Navi)
This navigation is an alternative to the regular navigation bar in version previous to 4.0; It is better suited for mobile devices but can be used for desktops as well.
Option Type Description
mNavi['enabled']mixed Enable mNavi, possible values: true, false or "auto" - only for touch devices, disables regular navigation (displayNavi, fullScreenNaviBar)
mNavi['gravity']string Positioning gravity, possible values: topLeft, topRight, bottomRight, bottomLeft, bottom, top, right, left
mNavi['offsetHorz']int Horizontal offset from the edge of the player.
mNavi['offsetVert']int Vertical offset from the edge of the player.
mNavi['offsetHorzFS']int Horizontal offset from the edge of the player at fullscreen.
mNavi['offsetVertFS']int Vertical offset from the edge of the player at fullscreen.
mNavi['parentID']string ID of the container to place mNavi in none fullscreen mode outside of the player.
mNavi['setParentWidth']bool Sets width of the parent container same as navi container
mNavi['setParentHeight']bool Sets height of the parent container same as navi container
mNavi['fullScreenShow']bool Append mNavi to the player in fullscreen mode; you can also enable fullScreenNaviBar option instead.
mNavi['hover']bool Enables mouse over state of the button, e.g. if $zoom['config']['icons']['mHotspots'] = array('file'=>'button_iPad_hotspots', 'ext'=>'png', 'w'=>50, 'h'=>50); the hover state button is 'button_iPad_hotspots_over.png'
mNavi['down']bool Enables mouse down state of the button, e.g. if $zoom['config']['icons']['mHotspots'] = array('file'=>'button_iPad_hotspots', 'ext'=>'png', 'w'=>50, 'h'=>50); the hover state button is 'button_iPad_hotspots_down.png'
mNavi['dis']bool Ver. 4.1.9+ disables certain buttons like zoom in and out if they can not be used
mNavi['alignment']string Buttons alignment, possible values: 'horz' and 'vert'; if gravity is set to 'right' or 'left', this option defaults to 'vert'
mNavi['mouseOver']bool Hides when mouse is not over the player on not touch devices.
mNavi['firstEllMargin']int Left margin of first button in mNavi.orderDefault / mNavi.order
mNavi['ellementRows']int Number raws of ellements, if > 1 alignment defaults to 'horz'
mNavi['rowMargin']int If ellementRows > 1 - margin between the rows
mNavi['containerFixedWidth']int, bool If integer the container width is not calculated instantly but set to this value.
mNavi['containerFixedHeight']int, bool If integer the container height is not calculated instantly but set to this value.
mNavi['buttonDescr']bool If set to true button description will be applied the same way as by the old / regular navigation bar.
mNavi['alt']array Array with settings for the custom tooltip. Tooltip shows the description of the button.
mNavi['cssClass']string CSS class for navi container.
mNavi['cssClassFS']string CSS class for navi container at fullscreen mode.
mNavi['cssClassParentID']string CSS class if parentID (position outside of the player) is defined
mNavi['orderDefault']array Default button set if "order" is not defined;
mNavi['order']array In this option you can position any available button and define its margin to the next, e.g. 'orderDefault' => array('mZoomOut' => 5, 'mZoomIn' => 15, 'mReset' => 15, 'mPan' => 5, 'mSpin' => 5, 'mCrop' => 0) The buttons are defined in $zoom['config']['icons']['m*']
mNavi['customPos']array Place any button defined in mNavi['order'] somewhere else on the page. For example: 'customPos' => array( 'mReset' => array('css' => ( array('left' => 5, 'bottom' => 5, 'position' => 'absolute', 'zIndex' => 123) ), 'parentID' => '', 'mouseOver' => true) ) The reset button is places at top left corner of the player as parentID is not defined. parentID could be also some other DIV placed outside of the player. mouseOver means that the button is hidden unless the user puts the mouse over the player (disabled for touch devices).
mNavi['mCustomBtn(n)']string Stringified JavaScript function for the custom button. So images for mCustomBtn1 are defined in $zoom['config']['icons']['mCustomBtn1'], its position in mNavi['order'] and behaviour (click event) in mNavi['mCustomBtn1']; Example: 'mCustomBtn1' => 'function(){jQuery.fn.axZm.fillArea();}' You can add as many custom buttons as you like. In order to place third custom button extend $zoom['config']['icons'] with $zoom['config']['icons']['mCustomBtn3'], place your button into mNavi['order'] (override its position in 'customPos' if needed) and define 'mCustomBtn3' => 'function(){do stuff here...}'
Motion (Animation, Transition)
Option Type Description
pMoveint By clicking on a pan button in the navigation bar the image will be paned by this percentage of visible area, e.g. 75
pZoomint By clicking on the image with the left mouse button or clicking on the plus button (zoom in) in the navigation bar, the image will be zoomed by this percentage, e.g. 100 (x2)
stepZoombool Ver. 4.0+ By clicking on the image with the left mouse button or clicking on the plus button (zoom in) in the navigation bar, the image will be zoomed to the next pyramid step, e.g. to 100%, 50%, 25%, 12.5% ...
autoZoomarray Ver. 2.1.2+, multidimansional array with parameters for autozoom after the image is loaded.
autoZoom['enabled']bool Enable autozoom.
autoZoom['onlyFirst']bool Apply autozoom only on first loaded image in the gallery.
autoZoom['speed']int Motion speed for autoZoom in ms, e.g. 300
autoZoom['motion']string Motion type for autoZoom, e.g. 'swing'
autoZoom['pZoom']mixed Can be an integer, e.g. 150 (enlarge x2,5), string: 'fill', 'max' or percentage as a string, e.g. '50%'. 'fill' means to enlarge or expand the image to the extend, that there will be no background of the stage visible if image has different proportions. 'max' means to enlarge image to full size and the persentage like '35%' would zoom exactly to this specific value, whereby '100%' is equal to 'max'.
pZoomOutint By clicking on the image with the right mouse button (not aktivated by default in opera browser) or clicking on the minus button (zoom out) in the navigation bar, the image will be zoomed out by this percentage, e.g. 100 (/2).
zoomSpeedGlobalint Default speed for motions in ms, e.g. 500
moveSpeedint Motion speed in ms by clicking on arrows in navigation bar , e.g. 750
zoomSpeedint Motion speed by clicking on plus in navigation or left clicking the image in ms, e.g. 750
zoomOutSpeedint Motion speed by clicking on minus in navigation or right clicking the image, e.g. 750
cropSpeedint Motion spped for zoom in by selecting an image area in ms, e.g. 750
restoreSpeedint Motion speed by clicking on restore button in ms, e.g. 750; can be overridden by zoomMapSwitchSpeed
traverseSpeedint Sidewords motion speed in ms when reached 100% zoom and left clicked on image, e.g. 300
zoomFadeint Fade in time in ms of zoomed image after it has been loaded, e.g. 200 (0 for disabling fade in effect)
zoomFadeInint Fade in time of the first image loaded in ms, e.g. 300
buttonAjaxint Time in ms after which the zoomed image is starting to load when the user clicks on any button in navigation bar. Setting this to 0 will not allow to click twice on a button, e.g. 750
zoomEaseGlobalstring Default motion type, e.g. 'easeOutCirc'
zoomEaseInstring Motion for zoom in by clicking the plus button or the image, e.g. 'easeOutCirc'
zoomEaseOutstring Motion zoom out on clicking minus or right click the image, e.g. 'easeOutCirc'
zoomEaseCropstring Motion for zoom in by selecting an image area, e.g. 'easeOutCirc'
zoomEaseMovestring Sideward motion on clicking the arrow buttons in navigation, e.g. 'easeOutCirc'
zoomEaseRestorestring Motion on clicking the restore button, e.g. 'swing'
zoomEaseTraversestring Motion when reached 100% zoom and clicking the image, e.g. 'easeOutCirc'
fps1string Ver. 3.2.0+ Frames per second for all animations or false
fps2string Ver. 3.2.0+ Frames per second for all animations at fullscreen mode or false
gpuAccelarray Ver. 4.0.3+ Enable GPU rendering (translateZ) for desktop browsers
Mousewheel Zoom In and Out
Option Type Description
scrollbool Enable mousewheel zooming.
mouseScrollEnablebool Ver. 3.0.2+ Enabling this option will not prevent scrolling the browser window with the mousewheel.
scrollAnmbool Enables / disables animation during mousewheel zoom in and out. If disabled the options scrollSpeed, scrollMotion and scrollPause have no effect!
scrollZoomint Percentage of zoom in / out on each mousewheel scroll. 16 is a good value, if scrollAnm is deactivated and 35 if scrollAnm is activated.
scrollAjaxint Time after the last wheel action or click on the image the ajax call is triggered. 750 is a good value, if scrollAnm is false and 1250 if scrollAnm is true.
scrollSpeedint If scrollAnm is true the duration of animation effect, e.g. 1500
scrollMotionstring If scrollAnm is true the animation motion type. 'easeOutQuad' is a good one.
scrollPauseint Disables scroll tick for this time period in ms. Helps to prevent to fast scrolling, e.g. 100
scrollBrowserExclarray The scrollAnm works well in some browsers like mozilla firefox or safari, but has relative poor performance in microsoft's explorer. If scrollAnm is aktivated You can exclude some browsers from scroll animation. In Ver. 4.0+ the structure of this array has been changed. Possible browser values: 'gecko', 'mozilla', 'mosaic', 'webkit', 'opera', 'msie', 'firefox', 'chrome', 'safari'
scrollBrowserExclPararray This option is only for the from animation excluded browsers (scrollBrowserExcl) and only, if scrollAnm is true.
'scrollZoom' - percentage of zoom in / out on each mousewheel scroll for the from animation excluded browsers.
'scrollAjax' - time after the last wheel action the ajax call is triggered for the from animation excluded browsers.
$zoom['config']['scrollBrowserExclPar']['scrollZoom'] = 16;
$zoom['config']['scrollBrowserExclPar']['scrollAjax'] = 1000;
scrollPanRint When reached max zoom level (100) scroll has the same effect as "click - pan". However the mousewheel is real fast, so the user will get away from the desired crop to fast. You can reduce the normal click distance by this factor. 1 - means no effect in comparison to "click - pan"
false - means no "scroll - pan" at all
any number > 1 will "soften" this problem, whereas a bigger number means less pan each scroll
scrollOutReversedbool Ver. 3.2.0+ Behaivior during zoom out with the mouse wheel. The vieport is disabled. Instead coordinates of the oposit part of the image are passed to the zoom out function.
scrollOutCenterbool Ver. 3.2.0+ Behaivior during zoom out with the mouse wheel. The vieport is disabled. Instead coordinates of the center of the image are passed to the zoom out function.
Pan / Drag
Option Type Description
zoomDragPhysicsbool Enables acceleration of the mouse while dragging resulting in a throw effect.
zoomDragAnmbool Ver. 2+; Animate images while dragging (smooth motion). Not recommended, if image tiles are loaded directly.
zoomDragSpeedint Time im ms the image needs to fully reach the mouse position on drag if zoomDragAnm is activated, e.g. 1000
zoomDragMotionstring Type of drag motion, e.g. 'easeOutCirc'.
zoomDragAjaxint Time im ms after the last drag action the ajax request is triggered, e.g. 750
Image Area Selector
Colors can be HEX or HTML names like '#CDD704' or 'green'
Option Type Description
zoomSelectionColorstring Color inside the selector, e.g. '#006600' or 'green', false to disable - makes image area selector a bit faster.
zoomSelectionOpacityfloat Selector opacity, [0-1], e.g. 0.2
zoomOuterColorstring Color outside the selector, false to disable - makes image area selector a bit faster.
zoomOuterOpacityfloat Opacity outside the selector, [0-1], e.g. 0.4
zoomBorderColorstring Selector border color, e.g. '#006600' or 'green',
zoomBorderWidthint Selector border width in px, e.g. 1
zoomSelectionAnmbool Expand effect after the selection of imagearea.
zoomSelectionCrossbool Add cross in the middle of selection area, CSS: .zoomCropCross; In fact this could be not just a cross, but any other image as a background of the css class.
zoomSelectionCrossOpfloat Cross opacity, see zoomSelectionCross, e.g. 0.75
zoomSelectionModstring Ver. 3.3.0+ Zoom selector mod, possible values 'min' or 'max'.
zoomSelectionPropstring, float or false Ver. 3.3.0+ Proportions of the selector. Possible values:
  • false - disabled. User can select whatever. Nevertheless the final zoom result will fit the box size.
  • box - automatic proportions of the zoom player box.
  • float number - always keep the same ratio, e.g. 1.5 means the ratio of 1.5 : 1 and 0.8 means ratio 100 : 125
Progressbar
Option Type Description
pssBarbool Enable progressbar.
pssBarPstring Progressbar position or gravity. Possible values: 'bottom', 'top' and 'center'.
pssBarHint Progressbar height in px, CSS: .zoomBar
pssBarMint Progressbar margin in px from top or bottom, depending on pssBarP.
pssBarMSint Progressbar margin from left and right. While pssBarM value would shift the progressbar vertically, this option will cut the progressbar from both sides.
pssBarOfloat Progressbar opacity, [0-1], e.g. 0.7
Ajax Loader
Option Type Description
zoomLoaderEnablebool Enable ajax loader (animated icon on top of the image during loading process).
zoomLoaderClassint CSS class name of the loader with an animated gif as a background, e.g. 'zoomLoader3'. Can also be a PNG "Filmstripe". In this case zoomLoaderFrames must be set to the amount of the frames in this Filmstripe.
zoomLoaderTransptype Loader opacity, [0-1], e.g. 0.9
zoomLoaderFadeInint Fade in speed of the loader in ms, e.g. 500
zoomLoaderFadeOutint Fade out speed of the loader in ms, e.g. 500
zoomLoaderPosstring Position or gravity of the loader, possible values: 'Center', 'TopLeft', 'TopRight', 'BottomLeft' or 'BottomRight'
zoomLoaderMarginint Margin in px for loader position. Does not apply, if zoomLoaderPos (loader position) value is 'center'.
zoomLoaderFramesint or false Instead of using a gif animation You can use any png image like a film stripe playing in endless loop. This option defines the number of frames, e.g. 12. All frames have to be equal in size and located under each other in one png image. Set this option to false if zoomLoaderClass contains a CSS class with an animated gif image as the background.
zoomLoaderCycleint Loop time (cycle time) in ms, 1000
Mixed Options
Option Type Description
cursorWaitbool Enable system wait cursor on image load.
disableAllMsgbool Ver. 3.0.2+ Disable all error and notification messages.
fullZoomBorderfloat Expends the zoom to max size (100%) if only a bit left to prevent zoom like 99,2%, [>1], e.g. 1.1 would expand to 100% if only 10% difference left. To disable set this option to 1.0
fullZoomOutBorderfloat Expends the zoom to min size (initial image size) if only a small fraction left , [>1], e.g. 1.1 would expand to initial image size (full image visible) if only 10% difference left. To disable set this option to 1.0
zoomTimeOutint Timeout for ajax zoom request in ms, e.g. 10000 or false for disabling.
zoomWarningBrowserbool Display warning for not supported ancient browsers. IE 6.0 is supported!
msInterpbool Use bicubic interpolation for IE Ver. prior to 8
errorsbool Display errors.
licenseErrorsbool Ver. 4.0+ Display license errors. Before version 4.0 license errors did not display if errors options was not set.
warningsbool Display warnings.
useSessbool Use session cookies for storing some imformation.
cachebool Use cached image files for user zooming session. If set to true, the scipt will not generate a zooming image, if it is alredy generated.
cacheTimetype Cache time in seconds - how long zoomed images should stay in cache folder. The script will instantly delete all cache files if they are older than this value. Should be at least 30 seconds, e.g. 300
picChmodarray Ver. 2.1.6+ Patch: 2010-10-19 - Array with octal values for setting file permissions (chmod) for created images, e.g. 0644 or false.
cornerRadiusint Build in rounded corners in px, default: 5. Other values need CSS changes: .zoom-top-left, .zoom-top-right, .zoom-bottom-left, .zoom-bottom-right and also a different background-image (default: 'black-corner-5.png'). For deactivating set this option to 0.
innerMarginint Margin around the picture in px. Builds a solid border around it the image. If build in rounded corners (cornerRadius) are used set it to the same value, e.g. 5. If no build in counded corners are required, set this value to build solid border around the zoom picture. For deactivating set this option to 0.
zoomStatbool Append a div under navigation to display some information, mainly framerate during zoom for testing purposes. Switch it off after testing.
zoomStatHeightint Height in px of the appended div (zoomStat).
layHorCenterbool Center AJAX-ZOOM horizontally within the parent container.
layVertCentermixed Center AJAX-ZOOM vertically. An integer sets top margin, true will center AJAX-ZOOM within the parent container.
layVertBotMrgint Bottom margin of AJAX-ZOOM container in px.
allowDynamicThumbsbool Ver. 3.1.0+ Allow to generate image thumbs dynamically by passing the values to "/axZm/zoomLoad.php"
allowDynamicThumbsMaxSizeint Ver. 3.3.0, Patch: 2012-04-19 Max. thumbsnail size (width and height) that can be achieved by resizing an image when allowDynamicThumbs is enabled.
dynamicThumbsMaxCacheTimeint Ver. 4.0+ Sets Cache-Control: maxage header for the dynamically generated images
dynamicThumbsCachebool Ver. 4.1.9+ Cache thumbs to disk
dynamicThumbsCacheByGETbool Ver. 4.1.9+ Allow change cache settings by GET parameter
dynamicThumbsAllowCropbool Ver. 4.1.9+ Allow to pass parameters which will crop certain areas out of image and make the thumb
dynamicThumbsCropMaxSizeint Ver. 4.1.9+ Max size for the thumbnails when cropping parameters are passed
dynamicThumbsCropOnlyFromCachebool Ver. 4.1.9+ Return croped images only if they are already cached to disk. If this setting is true and cached version of the crop does not exist, then crop values will be ignored.
dynamicThumbsQualRangearray Ver. 4.1.9+ Quality range which can be passed over query string ($_GET)
dynamicThumbsCtimebool Ver. 4.1.9+ Compare creation time of image and thumb and if image is newer, recreate the cached thumb
tapHideAllbool Ver. 4.0+ Hide / show all UI elements including zoom map and any other user injected elements by taping at the player on touch devices. Tap zoom is disabled. Ver. 4.0.6+ Works also on not touch devices, however zoomDoubleClickTap has to be set to some ms number.
zoomDoubleClickTapint Ver. 4.0.6+ Double ckick or double tap in order to zoom in (out, when completly zoomed in). The integer value indicates the max double click speed in ms.
touchSettingsarray Ver. 4.0+ By freely setting array elements of this option you can override any other AJAX-ZOOM option which will only be enabled for touch devices. For example you can disable spinSlider and zoomSlider if you think these UI elements do not make much sense on touch screens. $zoom['config'] will be extended for touch devices simmilar to jQuery.extend();
polyfillbool Ver. 4.1.9+ Use window.requestAnimationFrame for jQuery animations; If true /axZm/plugins/jquery.requestAnimationFrame.min.js will be loaded; Requires jQuery Ver. 1.8+
Watermark
with PNG image, text or both
Option Type Description
watermarkbool Enable watermark with an PNG image. Does not work in demo mode, see licenceKey.
wtrmrkarray Multidimensional array with watermark options and settings:
wtrmrk['gravity']string Position or gravity of the watermark image. Possible values: NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast
wtrmrk['file']string PNG 24 Bit image with transparancy, located in icon directory, e.g. 'copyright.png'; Ver. 3.2.2+ The PNG image can now be anyware, just define the absolute path to the image, e.g. '/pic/watermarks/watermark.png';
wtrmrk['watermarkTiles']bool Ver. 3.2.2+ When image tiles are loaded directly (pyrLoadTiles is set to true) enable this option to put watermark directly on all created image tiles.
wtrmrk['composeStyle']string, bool This optional overlay style is for imageMagick only! Possible values: 'screen', 'overlay', 'multiply', 'darken', 'lighten', 'linear-light', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'plus', 'minus', 'subtract', 'difference', 'exclusion'
If You just want opacity, save Your png watermark file with transparancy and set composeStyle to false
wtrmrk['fill']bool Watermark all over the image. Consider also making a png image as big as picDim if this settings slows down the performance or the results are not satisfactory.
wtrmrk['initPic']bool Place watermark on initial picture.
Watermark with text
textbool Enable watermark as text. Does not work in demo mode, see licenceKey.
txtarray Multidimensional array with text watermark options and settings. This options can be repeated allowing more text blocks at different positions,
$zoom['config']['txt'][0] = array (options, ...);
$zoom['config']['txt'][1] = array (options, ...);
$zoom['config']['txt'][2] = array (options, ...);
txt['fontFile']string Font ttf file, e.g. 'arial.ttf'
txt['fontSize']int Font size pt, e.g. 12
txt['fontColor']array Font color array R (Red), G (Green), B (Blue), e.g. array('R' => 255, 'G' => 255, 'B' => 255);
txt['fontTransp']int Text opacity [0-100], e.g. 100 (no opacity)
txt['fontGravity']string Array of multiple positions of the same text. Possible values: 'NorthWest', 'North', 'NorthEast', 'West', 'Center', 'East', 'SouthWest', 'South', 'SouthEast'
txt['fontMargin']int Font margin from the edges of the image in px.
txt['fontAngle']int Font angle deg.
txt['fontBox']bool Enable background box.
txt['fontBoxColor']array Background color of the box - R (Red), G (Green), B (Blue), e.g array('R' => 0, 'G' => 0, 'B' => 0);
txt['fontBoxTransp']int Background box opacity [0-100].
txt['fontBoxPadding']int Background box padding in px.
Virtual Watermark
vWtrmrkstring, bool Virtual watermark as a layer over the image. Does not provide any real protection to the images! CSS class with a png background image, e.g. 'zoomWtrmrk' or false to disable.
Image Pyramid with Tiles
Option Type Description
pyrTilesbool Enable image pyramid with tiles.
pyrDialogbool Display info dialog after tiles have been made on the fly. Happens only once for each image.
pyrQualint JPG quality of the generated tiles. 100 is recommended when image tiles are stitched server-side. In this case the JPG compression level of the final output image is defined by qual. If pyrLoadTiles is aktivated and image tiles are loaded directly, the recomended JPG quality is 80.
pyrQualPngarray Ver. 4.0+ Quality for tiles under pngMode
tileSizeint Size of the tiles in px, [128-768], e.g. 256 or 384
pyrAutoDetectbool This option should only be set to true if there are different tileSizes in the image collection with zoom functionality. Different tilesizes arise out of changing the tileSize option after some image tiles pyramids have already been generated. So in case tileSize values are going to be changed afterwards, consider rebuilding all tiles too and disable this option.
pyrTilesPathstring Folder where image tiles will be saved, e.g. '/pic/zoomtiles/'. Can be a http password protected direcotry (.htaccess, .htpasswd) only if pyrLoadTiles (introduced in Ver. 2.0.0) is set to false, which means, that image tiles are stitched server side before sending them as one image to the browser. Otherwise, if pyrLoadTiles is set to true this directory can not be http password protected. In this case image tiles are loaded directly by the client. A subfolder with the name of the picture without .jpg containing the image tiles will be created in this folder. PHP should in any case be able to write to and read from this directory!
pyrChmodint Chmod for the new created subfolders, where the tiles will be stored separately for each image, e.g. 0755
pyrChmodAllbool Chmod all existing subfolders which contain the tiles. This might be useful if the created files or folders need to be accessed over FTP and the above chmod will not give enough permission rights for a FTP user. Change pyrChmod to 0777 and run AJAX-ZOOM just once. After that change this option to false again.
pyrProgstring With which imaging library make image tiles, possible values: 'GD' or 'IM'. GD stands for with PHP bundled GD2 and IM for ImageMagick. For stitching tiles see pyrStitchProg option.
pyrProgImLimitarray Only for ImageMagick: limit memory and other settings for making tiles. http://www.imagemagick.org/script/command-line-options.php#limit
pyrProgErrorRemovebool In case, when ImageMagick or GD can not allocate sufficient RAM (especially on very large images), not all tiles for an image might be generated. If pyrProgErrorRemove is set to true the program will delete the tiles and the created folder for this unsuccessful attempt.

If You use GD make sure, that memory_limit ( e.g. ini_set ('memory_limit', '512M') in zoomConfig.inc.php ) or even more is possible! If You have imageMagick installed please notice $zoom['config']['pyrIMcacheLimit'] and $zoom['config']['pyrProgImLimit'] options.
pyrIMcacheLimitfloat With ImageMagick ($zoom['config']['pyrProg'] = 'IM';) it is possible to proceed very large images (100 Mio Pixel e.g. 20.000px x 5.000) with relative low RAM. This setting will force to cache the image to disk (and not RAM) if image dimensions (width x height) exceed this settings value in mio. pixel, e.g. imagesize: 5.200 x 3.700 = 19.24 mio. pixel. However this procedure is much slower, so be patient! With 512mb RAM we found a limit from around 50 Mio Pixel (Will override any $zoom['config']['pyrProgImLimit']['memory'] and ['map'] settings) Set $zoom['config']['pyrDialog'] = true for testing purposes.
pyrStitchProgstring With which imaging library stitch tiles, possible values: 'GD' or 'IM'. GD stands for native PHP GD2 and IM for ImageMagick. For making tiles refere to pyrProg option. If pyrLoadTiles is activated there is no need to stitch image tiles on the server.
pyrStitchImLimitarray Only for imagemagick: limit memory and other settings for stitching tiles. http://www.imagemagick.org/script/command-line-options.php#limit
pyrStitchSelfloat Which level to select during zoom. Value equal or bigger than 1.0; 1.2 means that the stitched image has to be at least 20% larger or equal, than outputted cropped size. If not, the next bigger level will be chosen and scaled down to the needed output size.
pyrLoadTilesbool Ver. 2+; Load tiles directly without stitching them server side. Increases speed and user experience, reduces operational demands to server hardware.
pyrTilesFadeInSpeedint Ver. 2+; If pyrLoadTiles is activated, the image tiles fadein speed in ms.
pyrTilesFadeLoadint Ver. 2+; If pyrLoadTiles is activated, the image tiles fadein speed while dragging (panning) in ms.
Auto Generated Options
Option Type Description
iconDir, picDir, thumbDir, tempDir, galleryDir, fontDir, gPyramidDir, pyrTilesDir string Root paths composed out of fpPP and other path options.
picX, picY, galPicX, galPicY, galFullPicX, galFullPicY, galHorPicX, galHorPicY int Various dimensions generated from the above options.
Fullscreen
Ver. 3.2.0+ pyrLoadTiles must be enabled.
Option Type Description
fullScreenEnablebool Enable fullscreen mode.
fullScreenNaviButtonbool Enable fullscreen button in the navibar.
fullScreenCornerButtonbool Enable fullscreen button at the top right corner.
fullScreenCornerButtonPosstring Next Update: Position of the fullscreen button image, possible values: topLeft, topRight, bottomLeft, bottomRight
fullScreenCornerButtonFileInitstring Next Update: Filename of the fullscreen Init button located in /axZm/icons directory; Depreciated in Ver. 4.0+
fullScreenCornerButtonFileRestorestring Next Update: Filename of the fullscreen Restore button located in /axZm/icons directory; Depreciated in Ver. 4.0+
fullScreenCornerButtonMarginXint Ver. 4.0+ Horizontal distance of the fullscreen button to the edge of the player.
fullScreenCornerButtonMarginYint Ver. 4.0+ Vertical distance of the fullscreen button to the edge of the player.
fullScreenCornerButtonMouseOverbool Ver. 4.0+ Enable mouseover state of the fullscreen button.
fullScreenNaviBarbool Enable navi bar at fullscreen mode.
fullScreenGallerybool Depreciated in Ver. 4.0+ Show gallery in fullscreen mode. Must be enabled in not fullscreen mode too.
fullScreenVertGallerybool Show vertical gallery in fullscreen mode. Both - vertical and horizontal are not possible any more (does make more problems than sense). You can however enable e.g. horizontal gallery in regular mode and enable vertical in fullscreen mode or disable gallery at one of the mods at all!
fullScreenHorzGallerybool Show horizontal gallery in fullscreen mode. Both - vertical and horizontal are not possible any more (does make more problems than sense). You can however enable e.g. horizontal gallery in regular mode and enable vertical in fullscreen mode or disable gallery at one of the mods at all!
fullScreenExitTextstring, bool Show text about using ESC to exit the fullscreen mode on entering (flash like option). If false, disabled.
fullScreenExitTimeoutint Time in ms after which the ESC message disappears.
fullScreenRelstring The size of fullscreen with Javascript is only possible relative to the inner width and height of the current window. The default setting is 'window'. You can however set the ID of any other element on your page instead.
fullScreenMapFractfloat, bool Relative size of the Zoom Map in fullscreen mode. Float < 1.0; At false the setting defaults to that of the not fullscreen mode.
fullScreenMapWidthint, bool Fixed width of the Zoom Map in px. at fullscreen mode. See also mapWidth
fullScreenMapHeightint, bool Fixed height of the Zoom Map in px. at fullscreen mode. Siehe auch mapHeight
fullScreenKeepZoomarray Ver. 4.0+ try to keep zoom level (visible part of the zoomed image) when changing to fullscreen mode, back or resizing the player / browser window size.
fullScreenApibool Ver. 4.0+ Enable native fullscreen JavaScript API if supported by the browser.
fullScreenSpacearray Ver. 4.1.9+ Adds divs for custom content around the player at fullscreen mode You can access the divs best over onFullScreenSpaceAdded callback and append your content to these divs with IDs #axZmFsSpaceTop, #axZmFsSpaceRight, #axZmFsSpaceBottom and #axZmFsSpaceLeft
Download
Ver. 3.3.0+ Patch: 2011-10-17 Download full sized image
Option Type Description
allowDownloadbool Allow to download full sized / original image or full image in certain resolution.
downloadButtonbool Enable download button in the navi bar.
downloadResmixed Download resolution of the image. Possible values:
  • false - download the original image in its original format.
  • string - e.g. '1024x768' - download the image in certain resolution as jpg file.
  • array - e.g. array('1024x768', '1280x1024', '1600x1050') - download the image in this resolution depending on second argument 'res' passed by the API function jQuery.fn.axZm.downloadImg(id, res);
downloadQualint Output quality of the jpg image if $zoom['config']['downloadRes'] is not false.
downloadQualPngarray Ver. 4.0+ Output quality of the PNG image if $zoom['config']['downloadRes'] is not false.
downloadCachebool Cache files in $zoom['config']['downloadRes'] resolution once they have been downloaded by a user.

Defining the images

Introduction, please read.
There are three ways of how to tell AJAX-ZOOM which images to load. The first two are very easy to use and do not require programming skills.
  • From a page, where AJAX-ZOOM will be displayed, You can pass the list of images defining each image and its location individually. The parameters name is "zoomData".
  • Alternatively you can only pass a path to a folder with several images in it. AJAX-ZOOM will pick all the images from the specified folder and load them into the gallery. The parameters name is "zoomDir".
  • In case the above methods do not satisfy your needs You can pass any other self defined parameter(s), e.g. productID=123 as a reference to something, e.g. database entry. The file '/axZm/zoomObjects.inc.php' needs to be adjusted in order to generate the list (array) of images which will be further proceeded internally. As practice shows this is a rather complicated procedure and it is not needed in most cases. The documentation and examples for changing '/axZm/zoomObjects.inc.php' can be found in appendix.
Please note that all paths can be set in reference to the option $zoom['config']['pic'] as "base folder", e.g. if you want to get the image '/pictures/sourceImages/123/test.jpg' and all your images are in '/pictures/sourceImages/' You can set $zoom['config']['pic'] = '/pictures/sourceImages/';

In order to refere to the image '/pictures/sourceImages/123/test.jpg' You would then just need this path: '/123/test.jpg', so in case '/pictures/sourceImages/' is not a path from some standard software programm no one would get to know where You hide the source images. Additionally '/pictures/sourceImages/' can be a password protected directory without http access.

In following for the sake of completeness defining the parameters "zoomData" or "zoomDir" is completed with one of the simple integration methods using jquery.axZm.loader.js file. This file loads even jQuery core if it is not present on the page. For more ways of integration see next section and the examples.
By defining the images to load with relative paths may lead to not showing them under certain conditions. A simple workaround is to always use absolute paths. Please avoid using relative paths on productive environments.
zoomData
zoomData as PHP array turned into string.
	$zoomData = array();
	
	$zoomData[1]['p'] = '/pic/zoom/animals/'; // Absolute paths
	$zoomData[1]['f'] = 'test_animals1.png'; // Image Name
	
	$zoomData[2]['p'] = '/pic/zoom/animals/';
	$zoomData[2]['f'] = 'test_animals2.png';
	
	$zoomData[3]['p'] = '/pic/zoom/boutique/';
	$zoomData[3]['f'] = 'test_boutique1.png';
	
	$zoomData[4]['p'] = '/pic/zoom/boutique/';
	$zoomData[4]['f'] = 'test_boutique2.png';

	// Turn above array into string, it will be decoded in AJAX-ZOOM and turned into a PHP array again
	$_GET['zoomData'] = strtr(base64_encode(addslashes(gzcompress(serialize($zoomData),9))), '+/=', '-_,');
	
or, if $zoom['config']['pic'] = '/pic/zoom/';
	$zoomData = array();
	
	$zoomData[1]['p'] = 'animals'; // Absolute paths
	$zoomData[1]['f'] = 'test_animals1.png'; // Image Name
	
	$zoomData[2]['p'] = 'animals';
	$zoomData[2]['f'] = 'test_animals2.png';
	
	$zoomData[3]['p'] = 'boutique';
	$zoomData[3]['f'] = 'test_boutique1.png';
	
	$zoomData[4]['p'] = 'boutique';
	$zoomData[4]['f'] = 'test_boutique2.png';
	
	$_GET['zoomData'] = strtr(base64_encode(addslashes(gzcompress(serialize($zoomData),9))), '+/=', '-_,');
	
Example integration - HTML / Javascript:
	
This text will be replaced after AJAX-ZOOM is loaded
	<script type="text/javascript">
	// Create new object
	var ajaxZoom = {}; 
	
	// Path to the axZm folder, relative or absolute
	ajaxZoom.path = "../axZm/"; 
	
	/* 
	Custom parameters including zoomData and example (overrides some default options in /axZm/zoomConfigCustom.inc.php)
	
	If you need to change something the method interpreting the zoomData string is called "uncompress" and it can be found in '/axZm/axZmH.class.php'; 
	So in fact the compressing and obfuscating / encrypting procedure (see above strtr(base64_encode...) can be changed as you like, 
	as long as "uncompress" method interprets this string back into php array. 
	*/
	ajaxZoom.parameter = "zoomData=<?php echo $_GET['zoomData'];?>&example=13"; 
	
	// The id of the element where ajax-zoom has to be loaded into
	ajaxZoom.divID = "test";
	</script>
	
	<script type="text/javascript" src="../axZm/jquery.axZm.loader.js"></script>
	
zoomData as CSV string (Character "|" Separated Value).
Example integration - HTML / Javascript:
	
This text will be replaced after AJAX-ZOOM is loaded
	<script type="text/javascript">
	// Create new object
	var ajaxZoom = {}; 
	
	// Path to the axZm folder, relative or absolute
	ajaxZoom.path = "../axZm/"; 
	
	/* Custom parameters including zoomData and example (overrides some default options in /axZm/zoomConfigCustom.inc.php) 
	For pure html pages or none PHP dynamic pages like .NET you could just wirte the following / respectively have the folloing as output: 
	ajaxZoom.parameter = "zoomData=/pic/zoom/animals/test_animals1.png|/pic/zoom/boutique/test_boutique1.png&example=13"; 

	// The id of the element where ajax-zoom has to be loaded into
	ajaxZoom.divID = "test";
	
	</script>
	
	<script type="text/javascript" src="../axZm/jquery.axZm.loader.js"></script>
	
zoomDir
Select all images in a folder
Example integration - HTML / Javascript:
	
This text will be replaced after AJAX-ZOOM is loaded
	<script type="text/javascript">
	// Create new object
	var ajaxZoom = {}; 
	
	// Path to the axZm folder, relative or absolute
	ajaxZoom.path = "../axZm/"; 
	
	// Custom parameters including zoomDir and example (overrides some default options in /axZm/zoomConfigCustom.inc.php)
	ajaxZoom.parameter = "zoomDir=/pic/zoom/animals&example=13"; 
	
	// The id of the element where ajax-zoom has to be loaded into
	ajaxZoom.divID = "test";
	</script>
	
	<script type="text/javascript" src="../axZm/jquery.axZm.loader.js"></script>
	

Integration into HTML/PHP

This section will be completly rewritten. Please see the examples.

Batch process

zoomBatch.php
-

zoomBatch.php is an example of how to batch process a large amount of images preparing them for AJAX-ZOOM. Since everything can be made on-the-fly during the use of AJAX-ZOOM this "step" is not required. However some operations like tiling the images can take a considerable amount of time and server resources. So please check, if You can use it, best of all at times, where server load is at least.

zoomBatch.php can make many operations with visual feedback by using ajax. Once a procedure is started the file calls itself and returns some JavaScript. This actually makes the visual feedback. Therefore it is not suitable for cron jobs.

At the head of zoomBatch.php You will find some commented configuration options used only for batch processing and stored on $zoom['batch'] array. Also there is a very basic password protection. The default password is random number! You need to edit the sourcecode of this file, change the password or protect it somehow else.

On default the base folder is shown first.

In the top dropdown select the desired folder with images.

If there are images in the folder, they will be shown in the table to the left. You can preview an image by clicking on the image icon in each row.

At the very bottom of the left column You can choose which images have to be created or deleted: initial images, thumbnails, image pyramid or image pyramid with tiles. Then You choose the original images You want to batch convert. You can choose them by clicking on table row, "select all" button or "smart select" button. Smart select button is very useful, as it selects only those images, that have not been (completely) prepared yet.

That's it. Hiting the "batch convert" button starts the procedure.

When everything is ready it will show a diolog.

API

JavaScript Vars
jQuery.axZm.ow Width of the original image.
jQuery.axZm.oh Height of the original image.
jQuery.axZm.iw Width of the initial image.
jQuery.axZm.ih Height of the initial image.
jQuery.axZm.lastZoom Object containing the coordinates (x1, y1, x2, y1) of the zoomed area in the source high-resolution image. See this example.
jQuery.axZm.zoomID The current ID (key) of jQuery.axZm.zoomGA, see below
jQuery.axZm.orgPath Path to the original image if $zoom['config']['cropNoObj'] in zoomConfig.inc.php is set to true. Otherwise this value is undefined and there are no other JavaScript vars pointing to the location of the original image. Please note that the player does not need to access original images over http, so you can protect the directories e.g. with htaccess
jQuery.axZm.zoomGA JS object containing all information about gallery images.
jQuery.axZm.userFunc Callback functions (see below) are stored in this var and can be also changed after initialization.
 
Javascript Callbacks
AJAX-ZOOM has many callbacks which can be used to develop custom applications.

Callbacks are passed as options with the initialization method 'jQuery.fn.axZm(options)'. All other options are defined in zoomConfig.inc.php. After the initialization of AJAX-ZOOM the callback functions are stored in the object 'jQuery.axZm.userFunc', e.g. 'jQuery.axZm.userFunc.onZoomInClickStart', so they can be accessed, defined and modified after initialization. Here is an example which prints the output of custom callback functions to a html console.

Many callbacks receive an argument with some very useful data! If you would like to inspect and test all callbacks quickly on your application, please see the example code for jQuery.fn.axZm.getAllCallBackNames

On demand API can be extended.
Callback Description
onBeforeStart Triggers just after jQuery.fn.axZm starts initializing.
onStart Triggers while initialization after passing some tests.
onLoad Triggers after first image is loaded.
onZoom Ver. 4.0+ Triggers alsways on any zoom in or out.
onZoomStart Ver. 4.1.2+ Triggers only at the beginning of any zoom in or out.
onZoomTo Ver. 4.0+ Triggers only when using API jQuery.fn.axZm.zoomTo()
onSpinChange Ver. 4.0+ Triggers when frames of a 360/3D spin changes.
onStartPlay Ver. 4.0+ Triggers when autoPlay starts.
onStopPlay Ver. 4.0+ Triggers when autoPlay stops.
onDragStart Ver. 4.1.0+ Triggers when user starts dragging.
onDragDrag Ver. 4.1.0+ Triggers when user drags zoomed image.
onDragEnd Ver. 4.1.0+ Triggers when user stops dragging.
onMapDragStart Ver. 4.1.0+ Triggers when user starts dragging the zoomMap.
onMapDragDrag Ver. 4.1.0+ Triggers when user drags zoomed image over zoomMap.
onMapDragEnd Ver. 4.1.0+ Triggers when user stops dragging image over zoomMap.
onZoomInClickStart Triggers after the user clicks on the image to zoom in. If your function returns false the zooming action does not take place! Useful if you want to inspect the coordinates of the click and e.g. open a popup for this position...
onZoomInClickEnd Triggers after the user clicks on the image to zoom in and the zoom animation is completed.
onZoomOutClickStart Triggers after the user clicks on the image to zoom out (right click or SHIFT + left click).
onZoomOutClickEnd Triggers after the user clicks on the image to zoom out and the zoom animation is completed.
onSelection Triggers during the selection of the image area.
onSelectionEnd Triggers after the image area is selected (mouseup).
onImageChange Triggers on changing the image from gallery.
onImageChangeEnd Triggers when changing the image from gallery is done.
onCropEnd Triggers after the zoomed image portion is croped and loaded / image tiles are loaded.
onRestoreStart Ver. 4.1.2+ Triggers at the beginning when the user hits restore button or restoring is triggered by the API. The speed till the image zooms back to it's initial stage is controlled by zoomMapSwitchSpeed and restoreSpeed.
onRestoreEnd Triggers when the image zooms back to initial stage (full image visible). The speed till the image zooms back to it's initial stage is controlled by zoomMapSwitchSpeed and restoreSpeed. Ver. 4.1.2+ changed to the time where initial stage is really reached.
onFullScreenStart Ver. 3.2.0+ Triggers when initializing the fullscreen.
onFullScreenStartFromRel Ver. 4.0.4+ Triggers when starting initializing the fullscreen from relative sized AJAX-ZOOM.
onFullScreenStartEndFromRel Ver. 4.1.0+ Triggers when initializing the fullscreen from relative sized AJAX-ZOOM is done.
onFullScreenReady Ver. 3.2.0+ Triggers after fullscreen view is ready.
onFullScreenResizeEnd Ver. 3.2.0+ Triggers after window resize at fullscreen mode.
onFullScreenClose Ver. 3.2.0+ Triggers at the beginning of restore process from fullscreen to notmal mode.
onFullScreenCloseFromRel Ver. 4.0.4+ Triggers at the beginning of restore process from fullscreen to relative sized mode.
onFullScreenCloseEndFromRel Ver. 4.1.0+ Triggers at the end of restore process from fullscreen to relative sized mode.
onFullScreenCloseEnd Ver. 4.0+ Triggers at the end of restore process from fullscreen to normal mode.
onFullScreenSpaceAdded Ver. 4.1.9+ Triggers when extra space in fullscreen mode is created. See also fullScreenSpace
onFullGalShow Ver. 4.0+ Triggers when inline gallery is shows.
onStartSpin Ver. 4.0+ Triggers when 360 spinning starts by some option or API like jQuery.fn.axZm.spinTo.
onStopSpin Ver. 4.0+ Triggers when 360 spinning stops after beeing triggered by some option or API like jQuery.fn.axZm.spinTo.
onSliderZoom Ver. 3.2.0+ Triggers while zooming with the slider.
onZoomOutButtonStart Ver. 3.2.0+ Triggers when hitting the button for zoom out or using API method for this.
onZoomOutButtonEnd Ver. 3.2.0+ Triggers when hitting the button for zoom out or using API method for this.
onZoomInButtonStart Ver. 3.2.0+ Triggers when hitting the button for zoom in or using API method for this.
onZoomInButtonEnd Ver. 3.2.0+ Triggers when hitting the button for zoom in or using API method for this.
onMouseWheelZoomIn Ver. 3.2.0+ Triggers on zooming with the mouse(wheel).
onMouseWheelZoomOut Ver. 3.2.0+ Triggers on zooming with the mouse(wheel).
onButtonClickMove_N Ver. 3.2.0+ Triggers when panning (Top) with the buttons or using API method for this.
onButtonClickMove_E Ver. 3.2.0+ Triggers when panning (Right) with the buttons or using API method for this.
onButtonClickMove_S Ver. 3.2.0+ Triggers when panning (Bottom) with the buttons or using API method for this.
onButtonClickMove_W Ver. 3.2.0+ Triggers when panning (Left) with the buttons or using API method for this.
onSpinPreloadEnd Ver. 3.3.0 Patch: 2012-02-12 Triggers when all initial images for 360 or 3D are preloaded.
onMapMouseOverClick Ver. 3.3.0 Patch: 2012-02-13 Triggers on click when zoom map selector is dragged by mouseover.
onMapMouseOverDbClick Ver. 3.3.0 Patch: 2012-02-13 Triggers on double click when zoom map selector is dragged by mouseover .
onVertGalLoaded Ver. 4.0+ Triggers when vertical gallery is loaded.
onHorGalLoaded Ver. 4.0+ Triggers when horizontal gallery is loaded.
onFullGalLoaded Ver. 4.0.10+ Triggers when full gallery is loaded.
onHotspotsDragEnd Ver. 4.1.0+ Triggers after a hotspot has been dragged.
onImageProcessStart Ver. 4.1.3+ Triggers when image tiles || initial image || map image are starting to be generated on the fly.
onImageProcessEnd Ver. 4.1.3+ Triggers when image tiles || initial image || map image are done with generation on the fly.
onBeforePrevNext Ver. 4.1.3+ Triggers when any action for loading "next" or "prev" image from gallery is executed. This callback receives an array as argument defining if it is "next" or "prev" action, also the next gallery ID (from jQuery.axZm.zoomGA) which is going to be loaded without your intervention. If your custom function will return a different valid gallery ID or image name, then this image will be loaded!
JavaScript Methods
Several API methods are provided to make it easier to extend AJAX-ZOOM and to integrate it with other web application
 
jQuery.fn.axZm (options)
Description: 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: See this example.
jQuery.fn.adjVertGallery(scrollToCurrent)
Description: Ver. 4.1.3+ Adjust the size of the vertical gallery and reinit JS scrolls; usefull if thumbnails are hidden and displayed again.
Parameter: @param bool scrollToCurrent - scroll to the active image thumb
Example: See this example.
jQuery.fn.adjFullGallery(scrollToCurrent)
Description: Ver. 4.1.3+ Adjust the size of the full gallery and reinit JS scrolls; usefull if thumbnails are hidden and displayed again.
Parameter: @param bool scrollToCurrent - scroll to the active image thumb
Example: See this example.
jQuery.fn.axZm.areaResize (event, area)
Description: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="#" onClick="jQuery.fn.axZm.areaResize(false,{x1: 168, y1: 178, x2: 261, y2: 240});">Set area</a>
	
jQuery.fn.axZm.areaDisable (effect)
Description:Removes a visible image area selection.
Parameter: @param bool effect - Adds a nice effect
Example:
	<a href="#" onClick="jQuery.fn.axZm.areaDisable(false);">Remove area</a>
	
jQuery.fn.axZm.areaRestart ()
Description:Restarts image area for tool selection.
jQuery.fn.axZm.citeAllInitialPic (opt)
Description: Ver. 4.1.0+ 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')
				}
			});
		}
	});
	
jQuery.fn.axZm.closeFullScreen ()
Description:Ver. 3.2.0+ Close fullscreen mode.
jQuery.fn.axZm.downloadImg (id, res)
Description: Ver. 3.3.0+ Patch: 2011-10-17 Download original image or image as JPG in certain resolution. See also the these config options.
Parameter: @param int|string id: inernal ID of the image or filename.
@param bool|string: certain resolution or false.
Example:
	<a href="#" onClick="jQuery.fn.axZm.downloadImg(test.png, '1024x768');">Download Image</a>
	
jQuery.fn.axZm.fillArea (opt)
Description: Ver. 4.0+ 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
  • callback: function when finished
Example:
	<a href="#" onClick="jQuery.fn.axZm.fillArea({callback: function(){alert('done')}});">Fill space</a>
	
jQuery.fn.axZm.fullGalHide ()
Description:Ver. 4.0+ Hide "Inline Gallery".
jQuery.fn.axZm.fullGalShow ()
Description:Ver. 4.0+ Show "Inline Gallery".
jQuery.fn.axZm.fullGalToggle ()
Description:Toggle "Inline Gallery".
jQuery.fn.axZm.getAllCallBackNames ()
Description:Ver. 4.1.0 - 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', 
	dataType: '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
});
	
jQuery.fn.axZm.getBackColor (set, id, callback)
Description: Ver. 4.0+ experimental: retirieve 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="#" onClick="$.fn.axZm.getBackColor (true, false, function(rgbColor){alert(rgbColor)});">Get background color</a>
	
jQuery.fn.axZm.getCropValues (val)
Description: Ver. 4.1.9+ 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] ouput coordinates in respect to original image size
[2] - integer, if 1 the input coordinates were not fully above the image
jQuery.fn.axZm.getCurrentZoom ()
Description:Ver. 4.0+ Returns x1, y1, x2, y2 coordinates of current zoom crop
jQuery.fn.axZm.getCurrentZoomLevel ()
Description:Ver. 4.0+ Returns current zoom level, 100 is when image is zoomed to the max.
jQuery.fn.axZm.getLastZoomInfo ()
Description:Ver. 4.0+ Returns js object with coordinates of last zooms.
jQuery.fn.axZm.getImagePath (id, key)
Description: Ver. 4.0 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'.
jQuery.fn.axZm.getImgPath ()
Description: Ver. 4.1.9+ returns folder and image name of the source image; (the folder does not need to be accessable by JS (over http) and the access can be restricted)
jQuery.fn.axZm.helpToggle (content)
Description: Ver. 4.1.9+ Toggle help layer.
Parameter: @param string content: any html or text.
jQuery.fn.axZm.helpShow (content)
Description: Ver. 4.1.9 Show help layer.
Parameter: @param string content: any html or text.
jQuery.fn.axZm.helpHide ()
Description: Ver. 4.1.9 Close help layer.
jQuery.fn.axZm.initFullScreen ()
Description:Ver. 3.2.0+ Start fullscreen mode.
jQuery.fn.axZm.installPath ()
Description:Ver. 4.0+ Tries to return the path of /axZm directory.
jQuery.fn.axZm.mNaviRebuild ()
Description:Ver. 4.1.9+ Rebuild "mNavi"; you can change $.axZm.mNavi object before doing this.
jQuery.fn.axZm.openFullScreen (path, parameter, callbacks, target, apiFullscreen, disableEsc)
Description: Open AJAX-ZOOM directly at fullscreen mode or fluid / responsive layout (see "target" parameter). 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 simmilar.
Parameter: @param string path: Absolute path to AJAX-ZOOM directory, e.g. '/axZm/'
@param string parameter: Query string to determin which images to load
@param object callbacks: JS object containing callback functions
@param string target: On default the target is browser window. You can optionally set some other container ID (e.g. "myAzResponsiveContainer") if needed.
@param bool apiFullscreen: Ver. 4.0+ if target is 'window', use browser fullscreen mode if available
@param bool disableEsc: Ver. 4.0.8+ prevent closing with Esc key.
@param bool postMode: Ver. 4.1.5+ 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="#" onClick="jQuery.fn.axZm.openFullScreen('/axZm/', 'zoomID=1&zoomDir=1&example=2', ajaxZoomCallbacks);">Init AJAX-ZOOM</a>
	
See also: this example
Related: If you want to initialize AJAX-ZOOM in non responsive layout please use jQuery.fn.axZm.load
jQuery.fn.axZm.loadAjaxSet (query_string, callback, callbackEnd)
Description:Loads a different set of images into AJAX-ZOOM instance.
Parameter: @param string query_string: The query string to determin which images to load.
@param function callback: Ver. 4.1.0+ Optional callback function.
@param function callbackEnd: Ver. 4.1.0+ Optional callback function.
Example:
	<a href="#" onClick="jQuery.fn.axZm.loadAjaxSet ('zoomDir=some_dir&some_other_param=some_value');">Remove area</a>
	
For implementation also see this example
Related:jQuery.fn.axZm.zoomSwitch
jQuery.fn.axZm.load (options)
Description: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 tag which executes jQuery.fn.axZm.load(); if not above, then please trigger jQuery.fn.axZm.load() within $(document).ready() or simmilar.
Parameter: @param object options
@option string options.path: Absolute path of AJAX-ZOOM, e.g. '/axZm/'
@option string options.parameter: Query string to determin which images to load (see jQuery.fn.axZm.loadAjaxSet)
@option string options.divID: Target ID of the container
@option object options.opt: Callback functions
@option bool options.postMode: Use POST mode instead of GET
Example:
	<a href="#" 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
jQuery.fn.axZm.moveDir (dir)
Description:Ver. 3.2.0+ Move in certain direction
Parameter: @param dir: possible values ('N', 'E', 'S', 'W') - Top, Right, Bottom, Left
Example:
	<a href="#" onClick="jQuery.fn.axZm.moveDir('W')">Move left</a>
	
jQuery.fn.axZm.panTo (opt)
Description: Ver. 4.0+ Pan to x, y coordinates
Parameter: @param object opt: object with parameters:
  • x1: coordinates of x1
  • y1: coordinates of x2
Example:
	<a href="#" onClick="jQuery.fn.axZm.panTo({x1: 600, y1: 900});">Pan to x,y</a>
	
jQuery.fn.axZm.preloadAllInitialPic ()
Description:Ver. 4.0+ 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 runnig. 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()
jQuery.fn.axZm.preloadAllGalleryThumbs ()
Description:Ver. 4.0+ Preload all gallery thumbs. Normally thumbs are preloaded when gallery is shown first time.
jQuery.fn.axZm.reloadGallery (notScrollToCurrent)
Description:Ver. 4.0+ Reload thumbs in vertical gallery
jQuery.fn.axZm.reloadHorGallery (notScrollToCurrent)
Description:Ver. 4.0+ Reload thumbs in horizontal gallery
jQuery.fn.axZm.resizeStart (endTime)
Description: Ver. 4.0+ Prepare AJAX-ZOOM in responsive layouts to change it's size and redraw. Triggering this function twice before endTime is reached will result into clearing the previous resizeStart and endTime, which can be usefull 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 it's parent container.
Example:
	<a href="#" onClick="jQuery.fn.axZm.resizeStart(1);">Redraw</a>
	
jQuery.fn.axZm.remove ()
Description:Completly removes AJAX-ZOOM
Example:
	<a href="#" onClick="jQuery.fn.axZm.remove();">Remove AJAX-ZOOM</a>
	
jQuery.fn.axZm.setDescr (fileName, extensiveDescr, thumbDescr)
Description: Ver. 3.2.2+ 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="#" onClick="jQuery.fn.axZm.setDescr('watch.jpg', 'Long description of the image', 'New Thumb Descr');">Set description 1</a>
	<a href="#" onClick="jQuery.fn.axZm.setDescr('watch.jpg', 'Long description of the image', false);">Set description 2</a>
	<a href="#" onClick="jQuery.fn.axZm.setDescr('watch.jpg', 'unset', 'unset');">Set description 3</a>
	<a href="#" onClick="jQuery.fn.axZm.setDescr(1, false, 'New Thumb Descr');">Set description 4</a>
	
jQuery.fn.axZm.spinBy (x, z, callback)
Description: Ver. 4.0+ 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="#" onClick="jQuery.fn.axZm.spinBy(-2, 0, false);">Spin by -2</a>
	
jQuery.fn.axZm.spinStart (rounds, roundTime, mouseOverStop, opposit, callback)
Description: 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: Ver. 4.1.9+ spin in opposit direction as it would turn normally.
@param function callback: Ver. 4.1.9+ optional callback function.
Example:
	<a href="#" onClick="jQuery.fn.axZm.spinStart(2, 1500, false, false, function(){jQuery.fn.axZm.spinStart(1,1500,false, true)});">Start spin</a>
	
jQuery.fn.axZm.spinStop ()
Description: Stop spinning 360 object.
Example:
	<a href="#" onClick="jQuery.fn.axZm.spinStop();">Stop spin</a>
	
jQuery.fn.axZm.spinPlayToggle ()
Description: Ver. 4.1.11+ Toggles spin / pause.
Example:
	<a href="#" onClick="jQuery.fn.axZm.spinPlayToggle();">Play / Pause</a>
	
jQuery.fn.axZm.spinTo (frame_number, speed, easing, callback, zoomTo)
Description:Spin 360 degree object to a particular frame number. Ver. 4.0+ extended to spin within any frame in 3D object.
Parameter: @param int frame_number: frame number (ID) of the sequence. Ver. 4.0+ 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); Ver. 4.1.9+ 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: Ver. 4.0+ callback function
@param object zoomTo: Ver. 4.1.9+ 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 spinTo;
Example:
	<a href="#" 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>
	
jQuery.fn.axZm.spinInit ()
Description:Ver. 3.2.2+ Starts preloading 360 degree images, useful if firstMod is not set to 'spin' where spinInit triggers instantly. Can be triggered with the onLoad callback.
jQuery.fn.axZm.startPlay ()
Description:Ver. 4.0+ Start diashow
jQuery.fn.axZm.switchCrop ()
Description: Select the zooming tool crop, left click triggers zoom in, right click zoom out, mousewheel zoom in / out
Example:
	<a href="#" onClick="jQuery.fn.axZm.switchCrop();">Switch to crop mode</a>
	
jQuery.fn.axZm.switchPan ()
Description: Select the zooming tool pan, left click triggers zoom in, right click zoom out, mousewheel zoom in / out
Example:
	<a href="#" onClick="jQuery.fn.axZm.switchPan();">Switch to pan mode</a>
	
jQuery.fn.axZm.switchSpin ()
Description: Select the spin mode, click triggers spinning some rounds, mousewheel zoom in / out
Example:
	<a href="#" onClick="jQuery.fn.axZm.switchSpin();">Switch to spin mode</a>
	
jQuery.fn.axZm.tapHide (excludeArray)
Description: Ver. 4.0.8+ 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 ellements which should not be hidden
Example:
	<a href="#" onClick="jQuery.fn.axZm.tapHide(['zoomCornerFsc']);">Hide overlays</a>
	
jQuery.fn.axZm.tapShow ()
Description: Ver. 4.0.8+ Show overlay elements which have been hidden by jQuery.fn.axZm.tapHide
Example:
	<a href="#" onClick="jQuery.fn.axZm.tapShow();">Show overlays</a>
	
jQuery.fn.axZm.tapToggle (excludeArray)
Description: Ver. 4.0.8+ Toggle overlay elements, see jQuery.fn.axZm.tapHide and jQuery.fn.axZm.tapShow;
Parameter: @param array excludeArray - array with IDs of the ellements which should not be hidden
Example:
	<a href="#" onClick="jQuery.fn.axZm.tapToggle(['zoomCornerFsc']);">Toggle overlays</a>
	
jQuery.fn.axZm.zoomAlert (text, title, subtitle, autoRemove)
Description: 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>
	
jQuery.fn.axZm.zoomIn (options)
Description:Triggers zoom in.
Parameter: @param object options
@option string motion: Transitiont 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: Ver. 4.0+ 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>
	
jQuery.fn.axZm.zoomOut (options)
Description:Triggers zoom out.
Parameter: @param object options
@option string motion: Transitiont 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: Ver. 4.0+ 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>
	
jQuery.fn.axZm.zoomReset(options, callback)
Description:Reset the view to initial state.
Parameter: @param object options
@option int speed: Ver. 4.1.7+ 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>
	
jQuery.fn.axZm.zoomPrevNext (dir, galleryFadeInAnm, once, callback)
Description:Switch to next or prev image in the gallery.
Parameter: @param string dir: Direction - 'prev' or 'next'
@param string galleryFadeInAnm: Ver. 4.0+ image switching type, possible values see galleryFadeInAnm
@param bool once: Ver. 4.0+ if true switching will not try to repeat until switching is possible
@param function callback: Ver. 4.0+ callback function
Example:
	<a href="#" onClick="jQuery.fn.axZm.zoomPrevNext('prev', 'SwipeHorz')">Prev</a> 
	<a href="#" onClick="jQuery.fn.axZm.zoomPrevNext('next' 'SwipeHorz')">Next</a>
	
For implementation see also this example
jQuery.fn.axZm.zoomSwitch (zoomID, galleryFadeInAnm, once, callback, callback1)
Description: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: Ver. 4.0+ image switching type, possible values see galleryFadeInAnm
@param bool once: Ver. 4.0+ if true switching will not try to repeat until switching is possible
@param function callback: Ver. 4.0+ callback function fired on switching
@param function callback1: Ver. 4.1.0+ callback function fired at the end of switching
Example:
	<a href="#" onClick="jQuery.fn.axZm.zoomSwitch(1234);">Image 123</a>
<a href="#" onClick="jQuery.fn.axZm.zoomSwitch('test.jpg');">Image test.jpg</a>
For implementation see alsothis example
jQuery.fn.axZm.zoomSwitchQuick (zoomID, callback)
Description: Ver. 4.0.10+ switch to a different image in the 2D gallery at zoomed state without reseting 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="#" onClick="jQuery.fn.axZm.zoomSwitchQuick(1234);">Image 123</a>
<a href="#" onClick="jQuery.fn.axZm.zoomSwitchQuick('test.jpg');">Image test.jpg</a>
jQuery.fn.axZm.zoomTo (options)
Description:Zoom to a predefined image area or Ver. 4.0+ coordinates, zoomLevel etc. In Ver. 4.0+ this Api method has been completely rewritten and bugfixed!
Parameter: @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, Ver. 4.0+ not necessary to pass
@option int y2: Bottom-Right y coordinate of the area, Ver. 4.0+ not necessary to pass
@option string zoomLevel: Ver. 4.0+ 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: Ver. 4.0+ callback function
Example:
	<a href="#" 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>
	
Ver. 4.0+
	<a href="#" onClick="jQuery.fn.axZm.zoomTo({x1: 2584, y1: 1650, zoomLevel: '55%'}); return false;">Some other interesting thing</a>
	
	<a href="#" onClick="jQuery.fn.axZm.zoomTo({zoomLevel: '35%'}); return false;">Zoom to 35%</a>
	
	<a href="#" onClick="jQuery.fn.axZm.zoomTo({x1: '35.7%', y1: '56.5%', zoomLevel: '50%'}); return false;">Show some coordinates and zoom to 55%</a>
	
For implementation see this extensive example.
Related vars: jQuery.axZm.lastZoom - object, containing coordinates (x1..y2) of current zoomed area related to the original image.

jQuery.axZm.lastSel - object, containing coordinates (x1..y2) of current zoomed area related to area selection on initial 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 whatever:

Custom JavaScript function:
	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));
				}); 
			}
		}
	}
	
HTML:
	<FORM id='parametersF' onSubmit="return false">
	<table 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></table>
	</FORM>
	
JavaScript hotspots methods
Ver. 4.0+ some methods to handle hotspots on 2D, 360 and 3D
 
jQuery.fn.axZm.createNewHotspot (param)
Description: Ver. 4.0.9+ 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 contain white spaces, default: random string
@param bool param.draggable: set hotspots to be draggable / resizeable after creation, default: false
@param bool param.noRightClickRemove: Ver. 4.0.10+ 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: Ver. 4.0.10+ any callback funciton 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; usefull 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 / resizeable
		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 Detail',
			click: function(){
				alert('Test')
			}
		}
	});
	
	// Create rectangle 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 contains 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!!!
	}
	
jQuery.fn.axZm.deleteHotspot (name)
Description: Ver. 4.0+ Delete / remove hotspot
Parameter: @param string name: name of the hotspot
Example:
	<a href="#" onClick="jQuery.fn.axZm.deleteHotspot('abc')">Remove hotspot</a> 
	
jQuery.fn.axZm.initHotspots (hSpot, callback)
Description: Ver. 4.0+ Init / rebuild hotspots
Parameter: @param object hSpot: optional object replacing jQuery.axZm.hotspots
@param function callback: Ver. 4.0.10+ optional callback function
Example:
	<a href="#" onClick="jQuery.fn.axZm.initHotspots()">Init hotspots</a> 
	
jQuery.fn.axZm.getHotspotDefaults ()
Description: Ver. 4.0+ Returns all hostpot configuration options as js object
Example:
	<a href="#" onClick="console.log(jQuery.fn.axZm.getHotspotDefaults());">Get hotspot defaults</a> 
	
jQuery.fn.axZm.setHotspotDefaults (obj)
Description: Ver. 4.0.6+ 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="#" onClick="console.log(jQuery.fn.axZm.setHotspotDefaults({"hotspotImage": "hotspot64_blue.png"}));">Change defaults</a> 
	
jQuery.fn.axZm.getHotspotObj (withDefaults, stringifyFunctions, imgNames)
Description: Ver. 4.0+ Returns hostpot 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:
	<textarea id="axzmhotspotsobj"></textarea>
	<a href="#" onClick="$('#axzmhotspotsobj').html($.toJSON(jQuery.fn.axZm.getHotspotObj(true, true, true)));">Get hotspots</a> 
	
jQuery.fn.axZm.getHotspotPositions (name, imgNames)
Description: Ver. 4.0+ Returns only positions object of a specific hotspot
Parameter: @param bool imgNames: return positions object with specific image names (and not ID's)
Example:
	<textarea id="axzmhotspotsobj"></textarea>
	<a href="#" onClick="$('#axzmhotspotsobj').html($.toJSON(jQuery.fn.axZm.getHotspotPositions('abc', true)));">Get hotspots positions</a> 
	
jQuery.fn.axZm.getHotspotPosition (name, frame)
Description: Ver. 4.0+ 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="#" onClick="console.log(jQuery.fn.axZm.getHotspotPosition('abc'))">Get hotspot abc position</a> 
	
jQuery.fn.axZm.hideHotspotLayer ()
Description: Ver. 4.0+ Hide hotspots
Example:
	<a href="#" onClick="jQuery.fn.axZm.hideHotspotLayer()">Hide hotspots</a> 
	
jQuery.fn.axZm.hotspotsDraggable (destroy, noRightClickRemove)
Description: Ver. 4.0+ 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: Ver. 4.0.10+ if true right click will not disable the hotspot at a particular frame
Example:
	<a href="#" onClick="jQuery.fn.axZm.hotspotsDraggable()">Dragable hotspots</a> 
	
jQuery.fn.axZm.modifyHotspotPosition (name, frame, pos, set)
Description: Ver. 4.1.9+ 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="#" onClick="jQuery.fn.axZm.modifyHotspotPosition('myHotspot', 5, {left: 300, top: 500}, true)">Change position</a> 
	
jQuery.fn.axZm.loadHotspotsFromJsFile (url, cache, callback)
Description: Ver. 4.0+ 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="#" onClick="jQuery.fn.axZm.loadHotspotsFromJsFile('../pic/hotspotJS/bike.js', false, function(){alert('loaded')})">Load hotspots</a> 
	
jQuery.fn.axZm.removeAllHotspots (callback)
Description: Ver. 4.0.5+ Simply remove and delete all hotspots.
Parameter: @param function callback: Ver. 4.1.0+ optional callback function
Example:
	<a href="#" onClick="jQuery.fn.axZm.removeAllHotspots()">Delete all hotspots</a> 
	
jQuery.fn.axZm.switchHotspot(name, action)
Description: Ver. 4.0.5+ 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="#" onClick="jQuery.fn.axZm.switchHotspot(['abc1', 'abc2', 'abc3'], 'disable'); jQuery.fn.axZm.switchHotspot(['abc4', 'abc5'], 'enable');">Disable three hotspots and enable two others</a> 
	
jQuery.fn.axZm.zoomToHotspot (name, settings)
Description: Ver. 4.0.6+ 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 deternined instantly depending on hotspots size. The hotspot will be visible as a whole with the margin determinded by this parameter.
  • switchQuick (bool): Ver. 4.0.10+ 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): Ver. 4.1.8+ 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): Ver. 4.1.9+ 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="#" onClick="jQuery.fn.axZm.zoomToHotspot('myHotspot', {zoomID: 5, zoomLevel: '75%'});">Find hotspot myHotspot and zoom to 75%</a> 
	
jQuery.fn.axZm.toggleHotspotFrame (name, action, frame)
Description: Ver. 4.0+ Remove or enable hotspot on a particular frame, usefull for 360 and 3D as there are many frames there. Please note that when hotspot is disabled in a particular frame it's 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="#" onClick="jQuery.fn.axZm.toggleHotspotFrame('abc', 'enable', jQuery.axZm.zoomID)">Enable hotspot at current frame</a> 
	
jQuery.fn.axZm.showHotspotLayer ()
Description: Ver. 4.0+ Show hotspots
Example:
	<a href="#" onClick="jQuery.fn.axZm.showHotspotLayer()">Show hotspots</a> 
	
jQuery.fn.axZm.toggleHotspotLayer ()
Description: Ver. 4.0+ Toggle hotspots
Example:
	<a href="#" onClick="jQuery.fn.toggleHotspotLayer()">Toggle hotspots</a> 
	
JavaScript hotspots options
Ver. 4.0+ Create descend 2D/ 360°/ 3D product presentations with clickable hotspots. The following parameters describe $.axZm.hotspots javascript object and are loaded over separate file, see e.g. /examples/example33.php or over $.fn.axZm.createNewHotspot API
ValueDefaultDescription
shape'point'Shape of the hotspot. Possible values "point" or "rect", added Ver. 4.0.5; Type: bool
enabledtrueState of defined hotspot. Possible values true and false, added Ver. 4.0.5; Type: bool
width32Width of the hotspot image, only applied if shape value is "point". Type: integer
height32Height of the hotspot image, only applied if shape value is "point". Type: integer
gravity'center'Hotspot gravity relative to its position. Possible values: 'center', 'topLeft', 'top', 'topRight', 'right', 'bottomRight', 'bottom', 'bottomLeft', 'left'. Only applied if shape value is "point". Type: string
offsetX0Adjustment of hotspots horizontal visual position. Only applied if shape value is "point". Type: integer
offsetY0Adjustment of hotspots vertical visual position. Only applied if shape value is "point". Type: integer
padding0Padding of the box with hotspot image and/or text. Type: integer
opacity1Default opacity, disabled in IE < 9; Type: float <= 1.0
opacityOnHover1Opacity on mouse hover, disabled in IE < 9; Type: float <= 1.0
backColor'none'Background color, added Ver. 4.0.5; Type: string
zIndex1zIndex of the hotspot. Type: integer
borderWidth0CSS border width, added Ver. 4.0.5; Type: integer
borderColor'red'CSS border color, added Ver. 4.0.5; Type: string
borderStyle'solid'CSS border style, e.g. 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset' or combinations of them, added Ver. 4.0.5; Type: string
cursor'pointer'Mouse cursor. Type: string
zoomRangeMin0Min zoom level for hotspot to be shown, added Ver. 4.0.6; Type: 0 <= integer <= 100
zoomRangeMax100Max zoom level for hotspot to be shown, added Ver. 4.0.6; Type: 0 <= integer <= 100
hotspotImage'hotspot64_green.png'PNG image for the hotspot located in /axZm/icons directory, only applied if shape value is "point". Ver. 4.0.6+ image can be any absolute path with and without http. Type: string
hotspotImageOnHoverfalsePNG image for the hotspot on mouse hover, only applied if shape value is "point". Ver. 4.0.6+ image can be any absolute path with and without http. Type: string
hotspotTextfalseText puten direct over the hotspot image, can be for example a number if shape value is point; can be also HTML. Type: false or string
hotspotTextFillfalseIf shape value is "rect" the rectange does not capture mouse events like click. Setting this value to true will set the inner box to 100% height capturing all events except mousescroll for zooming. Any css can be overriden with hotspotTextCss option, see below, added Ver. 4.0.5; Type: bool
hotspotTextClassfalseAdditionally to CSS class ".axZmHotspotText" add on ther CSS class to hotspotText layer, added Ver. 4.0.5; Type: false or string
hotspotTextCss{}Additionally to CSS class ".axZmHotspotText" css which is added to hotspotText layer, added Ver. 4.0.5; Type: object
hotspotObjects{}Any number of absolutely positioned layers directly inside the hotspot if shape value is "rect", added Ver. 4.0.5; Type: object
altTitlefalseShow system like tootip by mousehover if main tooltip is triggered on click (toolTipEvent); CSS class: axZmHoverTooltip; Type: false or string
altTitleClassfalseCSS class for altTitle instead of axZmHoverTooltip class, added Ver. 4.0.6; Type: false or string
altTitleAdjustX20Horizontal offset of the altTitle, added Ver. 4.0.6; Type: integer
altTitleAdjustY20Vertical offset of the altTitle, added Ver. 4.0.6; Type: integer
labelTitlefalseSticky label (or tooltip) at any position near a hotspot, accepts HTML, added Ver. 4.0.6; Type: string
labelGravity'left'Label gravity, possible values: 'topLeft', 'topLeftFlag1', 'topLeftFlag2', 'top', 'topRight', 'topRightFlag1', 'topRightFlag2', 'right', 'rightTopFlag1', 'rightTopFlag2', 'rightBottomFlag1', 'rightBottomFlag2', 'bottomRight', 'bottomRightFlag1', 'bottomRightFlag2', 'bottom', 'bottomLeft', 'bottomLeftFlag1', 'bottomLeftFlag2', 'left', 'leftTopFlag1', 'leftTopFlag2', 'leftBottomFlag1', 'leftBottomFlag2', 'center', added Ver. 4.0.6; Type: string
labelBaseOffset5Auto offset in all directions, added Ver. 4.0.6; Type: integer
labelOffsetX0Horizontal offset, added Ver. 4.0.6; Type: integer
labelOffsetY0Vertical offset, added Ver. 4.0.6; Type: integer
labelClassfalseCSS class instead of axZmHotspotLabel, added 4.0.6; Type: false or integer
labelOpacity1Opacity level, added 4.0.6; Type: float <= 1.0
toolTipTitlefalseTitle shown in the tooltip; Type: false or string
toolTipHtmlfalseText or html inside tooltip, as idea it can be also iframe, e.g. <iframe src="http://www.ebay.de" scrolling="no" width="100%" height="100%" frameborder="0"></iframe> Type: false or string
toolTipAjaxUrlfalseUrl for toolTipHtml get from AJAX request (not cross site, for cross site use an iframe inside toolTipHtml); Type: false or string
toolTipWidth250Width of the tooltip, ignored when toolTipGravity is set to fullsize or fullscreen! Type: integer
toolTipHeight120Min height of the tooltip, ignored when toolTipGravity is set to fullsize or fullscreen! Type: integer
toolTipGravity'hover'Tooltip gravity, possible values: 'hover', 'fullsize', 'fullscreen' (added Ver. 4.0.6), 'topLeft', 'top', 'topRight', 'right', 'bottomRight', 'bottom', 'bottomLeft', 'left'. The difference between 'fullsize' and 'fullscreen' is that 'fullsize' refers to players dimensions, whereas 'fullscreen' to window size. Type: string
toolTipGravFixedfalseApplies fixed position to toolTipGravity except 'fullsize', 'hover' turns into centered position. Type: bool
toolTipFullSizeOffset40toolTipGravity fullsize uses maximal available player / window width and height. This is the margin to the edges if e.g. toolTipGravity is 'fullscreen', 'fullsize' or toolTipGravFixed option is set to true, so the fixed position is relative to the player size. Type: integer
toolTipTitleCustomClassfalseUse specific classname instead of axZmToolTipTitle, added Ver. 4.0.5; Type: false or string
toolTipCustomClassfalseUse specific classname instead of axZmToolTipInner. Type: false or string
toolTipAdjustX10Horizontal offset. Type: integer
toolTipAdjustY10Vertical offset; Type: integer
toolTipAutoFliptrueFlip tooltip horizontaly / vertically depending on best fit. Type: bool
toolTipOpacity1.0Opacity of the tooltip. Type: float <= 1.0
toolTipFadefalseFade tooltip time in ms. Type: false or integer
toolTipEvent'click''mouseover' or 'click', defaults to 'click' on touch devices. Type: string
toolTipHideTimout1000If toolTipEvent is 'mouseover' this setting allows to move the cursor to the tooltip within this time. Type: integer
toolTipDraggabletrueSet tooltip to be draggable, toolTipTitle has to be defined because this is the handle, can be an empty div. Type: bool
toolTipCloseIcon'fancy_closebox.png'PNG image for close button located in /axZm/icons directory. Shown if toolTipEvent is 'click' and touch devices. Ver. 4.0.6 can be absolute image path, also with http; Type: string
toolTipCloseIconPosition'topRight'Position of the close icon, possible values are: 'topLeft', 'topRight', 'bottomRight' and 'bottomLeft', added Ver. 4.0.5; Type: string
toolTipCloseIconOffsetfalseOffset / position of the close button icon. If false the offset is set instantly. An integer sets depending on toolTipCloseIconPosition - top, bottom or left, right position to this number. If object, e.g. {"right": 20, "top": 0} toolTipCloseIconPosition is ignored. Changed in Ver. 4.0.5; Type: false, integer or object
toolTipCloseIconMouseOverfalseShow close button also if toolTipEvent is 'mouseover'. Type: bool
toolTipOverlayShowfalseShow overlay when tooltip window pops up, added Ver. 4.0.5; Type: bool
toolTipOverlayOpacity0.75Overlay opacity, added Ver. 4.0.5; Type: float <= 1
toolTipOverlayColor'#000000'Overlay color, added Ver. 4.0.5; Type: integer
toolTipOverlayClickClosefalseClose tooltip by clicking on the overlay, added Ver. 4.0.5; Type: bool
hreffalseSimple link for the hotspot.
hrefTarget'_blank'Target for href (simple link), possible values: _blank (new window), anything else is same window. Type: string
clicknullYour custom click event function, e.g. simple fancybox gallery:
					
$.fancybox([
{
'href': 'http://www.domain.com/your/image1.jpg',
'title': 'Description of the first image'
},
{
'href': '/path/to/an/other/image2.jpg',
'title': 'Description of the second image'
},	
], {
'padding': 0,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'image',
'titlePosition': 'over',
'changeFade': 0
});
AJAX-ZOOM does not require fancybox, so fancybox JavaScripts and CSS files need to be included in the document. The above code is just an example of a lightbox usage; it can be any other lightbox where you could define images to be displayed in a simmilar way. Please note that toolTip* options e.g. toolTipHtml would produce a popup which looks simmilar to fancybox, but they do not require fancybox JavaScript and CSS files.
onRendernullVer. 4.1.3+ Your custom function when a particlar hotspot is added to the DOM; receives name of the hotspot as argument
mouseovernullYour custom mouseover event function
mouseoutnullYour custom mouseout event function
mouseenternullYour custom mouseenter event function
mouseleavenullYour custom mouseleave event function
mousedownnullYour custom mousedown event function
mouseupnullYour custom mouseup event function
position{}position is a JS object with the positions of a particular hotspot, e.g.
position: {
1: {left: 1500, top: 720},
3: {left: 660, top: 710},
4: {left: 760, top: 510}
}
The keys (1,2,3 ...) can be numbers (starting from 1, not 0) or filenames of particular frames. In case a key is omited the hotspot will not be shown in that particular frame.

If shape value is 'rect' each value of position object needs to have 'width' and 'height', e.g.
position: {
1: {left: 300, top: 720, width: 300, height: 300},
3: {left: 660, top: 710, width: 200, height: 350},
4: {left: 760, top: 510, width: 700, height: 220}
}
The 'left', 'top', 'width' and 'height' values can be pixel values related to original size of the image or percentage values (e.g. left: '45.75%', top: '37.3%').
PHP Class Methods: axZm.class.php

All methods are closely related to the $zoom variable, assembled in zoomConfig.inc.php and zoomObjects.inc.php

$axZm is the instance of this class, created in zoomInc.inc.php. The usage is thus $axZm -> methodName(param)

$axZm -> makeFirstImage($zoom, $skipInitialImage)
Description: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.
$axZm -> makeAllThumbs($zoom)
Description:Make all gallery thumbs
Parameter: @param array $zoom - Array with all configuration parameters.
$axZm -> makeThumb($zoom, $pic_list_array, $zoomID)
Description: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.
Ver. < 4.1.9
$axZm -> rawThumb($zoom, $picDir, $imgName, $prevWidth, $prevHeight, $qual, $cache)
Description:make a thumbnail image on-the-fly.
Parameter: @param array $zoom - Array with all configuration parameters.
@param string $picDir - Directory path of the image starting from root, with slash at the end.
@param string $imgName - Filename of the image.
@param int $prevWidth - Width.
@param int $prevHeight - Height.
@param int $qual - Jpg quality.
@param bool $cache - Ver. 3.2.0+ If true images will be cached in tempCache folder.
Ver. 4.1.9+
$axZm -> rawThumb($zoom, $options)
Description: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)
$axZm -> gPyramid($zoom)
Description:Create image pyramid from source image
Parameter: @param array $zoom - Array with all configuration parameters.
$axZm -> makeZoomTiles($zoom)
Description:Create image pyramid with tiles from source image
Parameter: @param array $zoom - Array with all configuration parameters.
$axZm -> zoomReturnCrop($zoom)
Description:Return the zoomed image via ajax, used in zoomLoad.php
Parameter: @param array $zoom - Array with all configuration parameters.
$axZm -> getVerion()
Description:Returns an array with version number and date
PHP Class Methods: axZmH.class.php

Many class methods are closely related to the $zoom variable, assembled in zoomConfig.inc.php and zoomObjects.inc.php

All class methods are also documented inline in axZmH.class.php, feel free to modify any method. Following are just commonly used methods:

$axZmH is the instance of this class, created in zoomInc.inc.php. The usage is thus $axZmH -> methodName(param)

$axZmH -> proceedList($zoom, $zoomTmp)
Description: Check the existance of all needed image files and generate everything on-the-fly. Used in zoomObjects.inc.php
Parameter: @param array $zoom - Array with all configuration parameters.
@param array $zoomTmp - Array needed to store some arbitrary data like errors ans other.
@return array - modified $zoom and $zoomTmp
$axZmH -> removeAxZm($zoom, $pic, $arrDel, $self)
Description: 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.
  $key string
  'In' - initial image,
  'Th' - gallery thumbs,
  'gP' - image pyramid,
  'Ti' - image pyramid with tiles
  $value bool
@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)
	
$axZmH -> checkSlash($input, $mode)
Description: Checks if slashes in paths are set correctly.
Parameter: @param string $input - Path.
@param strinf $mode - 'add' will add slash at the end if necessary, 'remove' will remove slash at the end, if present.
@return string - $input
$axZmH -> delteZoomCache($cacheDir, $maxTime)
Description: Delete old cache files.
Parameter: @param string $cacheDir - Path to temp folder, should be $zoom['config']['tempDir']
@param int $maxTime - difference of cache filetime from "now"
@return - nothing
$axZmH -> getl($char, $str)
Description: Used to determine filetype.
Parameter: @param string $char - Delimeter
@param string $str - String
@return string
Example:
	$string = 'some_image.file.jpg';
	$fileType = $axZmH -> getl('.', $string);
	// $fileType = jpg
	
$axZmH -> getf($char, $str)
Description: Used to determine filename without filetype extension.
Parameter: @param string $char - Delimeter
@param string $str - String
@return string
Example:
	$string = 'some_image.file.jpg';
	$fileName = $axZmH -> getf('.', $string);
	// $fileName = some_image.file
	
$axZmH -> composeFileName($file, $ext, $sep)
Description: Compose filename out of input parameter.
Parameter: @param string $file - Filename, e.g. my-file.jpg
@param string $ext - String to add to the filename.
@param string $sep - Separator between filename and additional string.
@return string - new composed filename.
Example:
	$newFileName = $axZmH -> composeFileName('my-file.jpg', 'thumb', '_');
	// $newFileName = my-file_thumb.jpg
	
$axZmH -> zoomServerPar($ret, $parExcl, $parExclPreg, $queryString)
Description: 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);
	
$axZmH -> drawZoomStyle($zoom)
Description: Returns all needed CSS files as HTML - text/css link tags.
Parameter: @param array $zoom - Array with all configuration parameters.
$axZmH -> drawZoomJs($zoom, $exclude = array())
Description: Returns all needed JavaScript files as HTML - text/javascript script tags.
Parameter: @param array $zoom - Array with all configuration parameters.
@param array $exclude - JS files to exclude, possible values: 'jquery', 'ui.core', 'ui.draggable', 'effects.core', 'browser', 'mousewheel', 'jScrollPane', 'facebox', 'axZm'
Example:
	// Return all needed js files, except of jquery and jquery-ui core libraries
	echo $axZm -> drawZoomJs($zoom, $exclude = array('jquery','ui.core'));
	
$axZmH -> drawZoomJsConf($zoom, $rn = false, $pack = true))
Description: Returns all needed configuration variables for JavaScript. This method is primary gateway between PHP (zoomConfig.inc.php, zoomObjects.inc.php) and JavaScript
Parameter: @param array $zoom - Array with all configuration parameters.
@param bool $rn - Add line break after each line of code
@param bool $pack - If true, the returned JavaScript is packed with the Dean Edwards JavaScript packer
Example:
	echo $axZmH->drawZoomJsConf($zoom, $rn = false, $pack = true);
	
$axZmH -> drawZoomJsLoad($zoom, $pack = false, $windowLoad = true, $jsObject)
Description: Returns all needed exetuable JavaScript.
Parameter: @param array $zoom - Array with all configuration parameters.
@param bool $pack - If true, the returned JavaScript is packed with the Dean Edwards JavaScript packer
@param bool $windowLoad - Init on window load - jQuery(window).load(function(){jQuery.fn.axZm();});
@param string $jsObject - Adds some api event options to jQuery.fn.axZm()
Example:
	echo $axZmH->drawZoomJsLoad($zoom, $pack = true, $windowLoad = true, $jsObject = false);
	
$axZmH -> drawZoomBox($zoom, $zoomTmp)
Description: This method outputs the main HTML for zoom.
Parameter: @param array $zoom - Array with all configuration parameters.
@param array $zoomTmp - Array with data collected in zoomObjects.inc.php
Example:
	echo $axZmH->drawZoomJsConf($zoom, $zoomTmp);
	

Version History

Ver. 4.1.11
Date: 2014-11-18
  • Maintenance release
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZm.css
    • /axZm/extensions/jquery.axZm.mouseOverZoom.js
    • /axZm/extensions/jquery.axZm.mouseOverZoom.css
    • /examples/axZmThumbSlider/*.*
    • /examples/plugins/demo/jquery.fancybox/*.*
Ver. 4.1.10
Date: 2014-09-21
  • Some quick fixes for iOS 8
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/extensions/jquery.axZm.mouseOverZoom.js
    • /examples/example34.php

Patches:

  • 2014-09-23: Small bugfix for onLoad callback
    • Updated files:
      • /axZm/jquery.axZm.js
  • 2014-09-22: Small bugfixes for mouseover extension where small images did not show properly
    • Updated files:
      • /axZm/extensions/jquery.axZm.mouseOverZoom.js
      • /axZm/extensions/jquery.axZm.mouseOverZoom.css
Ver. 4.1.9
Date: 2014-09-02
Ver. 4.1.8
Date: 2014-06-04
  • Minor changes
  • Updated files:
    • /axZm/jquery.axZm.js
Ver. 4.1.7
Date: 2014-05-22
  • Fixed a bug produced couple minor versions ago where on resizing the browser in responsive or fullscreen modes there was a js error due to wrong variable.
  • Dragging and spinning is now possible with mouse outside the browser boundaries even out of iframe.
  • In 360 / 3D modes tiles are byloading without mouseup.
  • Improved spinTo and zoomToHotspot API
  • Updated files: (in this update it is important to update all the following files in axZm directory)
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/axZm.css
    • /axZm/axZmThumbSlider/lib/jquery.axZm.thumbSlider.js
    • /axZm/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css
    • /examples/example32_clean.php
Ver. 4.1.6
Date: 2014-05-01
  • Some fixes for IE11 (fullscreen mode).
  • PHP 5.5 support (Ioncube version).
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomInc.inc.php
    • /axZm/zoomBatch.php
    • index.php
  • New Files:
    • /axZm/axZm.class.ioncube.7.php
    • /axZm/axZm.class.ioncube.8.php
Ver. 4.1.5
Date: 2014-04-06
  • New thumb slider extension.
  • Several fixes and some new options.
  • Many examples updated; example32.php heavily modified in the background.
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomObjects.inc.php
    • /axZm/axZmH.class.php
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/zoomLoad.php
    • /axZm/zoomDownload.php
    • /axZm/jquery.axZm.loader.js
    • /axZm/extensions/*.*
    • /examples/*.*
    • index.php
  • New Options:
Ver. 4.1.4
Date: 2013-11-24
  • Bugfixes, couple new examples, heavily revised example15.php and others for 360.
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomObjects.inc.php
    • /axZm/axZmH.class.php
    • /axZm/zoomConfig.inc.php
    • /axZm/jquery.axZm.js
    • index.php
    • /examples/*.*
  • New Options:
Ver. 4.1.3
Date: 2013-11-10
  • Changed the way 360/3D are preloading, should be faster now preloading from cache;
  • Some new callbacks and API;
  • Fixed a bug where in some cases the image did not get sharp after zooming and paaning quickly. Especially noticeable in responsive and fullscreen implementations;
  • Extended hotspots options, added onRender
  • Removed the possibility to pass zoomDir parameter as index number because of performance issues;
  • Some other smaller bugfixes;
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZm.css
    • /axZm/jquery.axZm.loader.js
    • /axZm/zoomObjects.inc.php
    • /axZm/axZmH.class.php
    • /axZm/zoomSess.php
    • /examples/example14.php (now instantly shows all possible callbacks even if new ones are added)
    • many other examples where zoomDir parameter was passed as index
  • New Callbacks:
  • New API:
Ver. 4.1.2
Date: 2013-10-20
  • Faster initializing of the player, especially for starting at fullscreen mode!
  • Some new callbacks;
  • Browser specific fixes: Chrome grey line at fullscreen none zoomed mode, some IOS7 Safari fixes;
  • Back to support jQuery Ver. 1.4.3 (previously at least jQuery 1.5 was required);
  • General bugfixes;
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/jquery.axZm.loader.js
    • /extensions/jquery.axZm.mouseOverZoom.js
    • /extensions/jquery.axZm.openAjaxZoomInFancyBox.js
    • /extensions/jquery.axZm.openAjaxZoomInFancyBox.min.js
    • /examples/example22.php
    • /examples/example24.php
  • New Callbacks:
Ver. 4.1.1
Date: 2013-10-08
  • Some fixes for autoZoom option.
  • Updated files:
    • /axZm/jquery.axZm.js
Ver. 4.1.0
Date: 2013-10-06
Ver. 4.0.10
Date: 2013-06-24
  • Bugfixes, some new features
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/extensions/jquery.axZm.imageSlider.js
    • /axZm/extensions/jquery.axZm.imageSlider.min.js
    • /axZm/extensions/jquery.axZm.mouseOverZoom.js
    • /axZm/examples/example32.php
  • New files:
    • /axZm/plugins/demo/jquery.autoSuggest
Ver. 4.0.9
Date: 2013-05-20
  • Important bugfix release
  • Updated files:
    • /axZm/jquery.axZm.js
Ver. 4.0.8
Date: 2013-04-14

Patches:

  • 2013-04-23: Small improvements:
    • Updated files:
      • /axZm/jquery.axZm.js
      • /examples/example22.php
    • New files:
      • /examples/example22_clean.php
  • 2013-05-01: Small improvements:
    • Updated files:
      • /axZm/jquery.axZm.js
      • /examples/example29.php
      • /examples/zoomConfigCustom.inc.php
  • 2013-05-10: Opera fullscreen bugfix.
    • Updated files:
      • /axZm/jquery.axZm.js
Ver. 4.0.7
Date: 2013-04-08
  • Added few options for better control of jQuery UI files byloading.
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/zoomConfig.inc.php
  • New files:
    • /axZm/plugins/demo/ jquery.fancybox/jquery.fancybox-1.3.4.zIndex.css
  • New options:

Patches:

  • 2013-04-09: Minor bug fix:
    • Updated files:
      • /axZm/extensions/jquery.axZm.mouseOverZoomInit.js
  • 2013-04-11: Bug fix - sometimes image did not get sharp after spinning with the navi buttons or slide buttons:
    • Updated files:
      • /axZm/jquery.axZm.js
Ver. 4.0.6
Date: 2013-04-07
  • Rebuilt and extended the online hotspot configurator, added many new hotspot options.
  • Changed default configuration for touch devices to display no navigation bars... smart double tap zoom allows to zoom in and out, pinch zoom works as well.
  • Updated files:
    • /examples/example33.php
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/axZm.css
    • /axZm/saveHotspotJS.php
    • /axZm/extensions/jquery.axZm.hotspotEditor.js
    • /axZm/extensions/jquery.axZm.hotspotEditor.css
    • /axZm/zoomInc.php
    • /axZm/zoomObjects.inc.php
    • /axZm/zoomBatch.php
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.css
  • New options:
  • Updated options:
  • New API:
Ver. 4.0.5
Date: 2013-03-18
  • Rebuilt and extended the online hotspot configurator, added rectangle hotpot areas, extended the API for hotpots, added back sourceguardian support, bug fixes.
  • Updated files:
    • /examples/example33.php
    • /axZm/jquery.axZm.js
    • /axZm/saveHotspotJS.php
    • /axZm/extensions/jquery.axZm.hotspotEditor.js
    • /axZm/zoomInc.php
    • /axZm/zoomObjects.inc.php
    • /axZm/axZm.css
  • New files:
    • /axZm/extensions/jquery.axZm.hotspotEditor.css
    • /axZm/axZm.class.ixed.php
    • /examples/example33_vario.php
    • /examples/example33_clean.php
    • /examples/example33_fullscreen.php
    • /pic/hotspotsJS/backup (empty subfolder)
    • /plugins/xml-to-json/jquery.xml2json.js
    • /pic/icons/move_drag_64.png
Ver. 4.0.4
Date: 2013-02-27
  • Fixes for hotspots (href did not work properly), code in example27 turned into new jQuery extension (jquery.axZm.openAjaxZoomInFancyBox.js), some additional callbacks added, new examples
  • Updated files:
    • /axZm/jquery.axZm.js
    • /examples/example27.php
    • /examples/example33.php
    • /axZm/axZmH.class.php
  • New files:
    • /axZm/jquery.axZm.openAjaxZoomInFancyBox.js
    • /axZm/jquery.axZm.openAjaxZoomInFancyBox.min.js
    • /examples/example33_clean.php
    • /examples/example33_fullscreen.php
Ver. 4.0.3
Date: 2013-02-24
  • Minor fixes
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfig.inc.php
    • /axZm/axZmH.class.php
Ver. 4.0.2
Date: 2013-02-20
  • Fixed couple hotspot issues - better compatibility with IE9+ and Opera, E-Commerce Moduls (Magento, XTC, Oxid) implementation
  • Updated files:
    • /axZm/axZm.class.ioncube.php
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/mods/magento/media.phtml
    • /axZm/mods/magento/magento_axZm.js
Ver. 4.0.1
Date: 2013-02-18

Plugins & Modules

360° Object Spin in all Ecommerce Plugins
Currently available for Magento, XT:commerce (xtcModified, VEYTON, Gambio)
HOW TO:
To add 360 degree view simply upload your high resolution images of a spin over FTP into '/axZm/pic/zoom3D/[product id]' e.g. '/axZm/pic/zoom3D/123'.

An other words create folder with product ID under '/axZm/pic/zoom3D/' and put all your images (frames of 360 spin) in it. AJAX-ZOOM will look into this directory and trigger everything else instantly!
THINGS TO TAKE ACCOUNT OF:
  1. Every image must have an unique filename!!! You could prefix each image of a spin with the product id to ensure the uniqueness, e.g.
    /axZm/pic/zoom3D/123/123_spin001.jpg
    /axZm/pic/zoom3D/123/123_spin002.jpg
    /axZm/pic/zoom3D/123/123_spin003.jpg
    [...]
    /axZm/pic/zoom3D/123/123_spin036.jpg
    (number of images is not restricted)

  2. When you upload 16, 24, 36, 48, 72 or even more high resolution images - this takes time. To avoid incomplete generation of the animated preview gif and / or image tiles you can upload the spin set into some other folder and move it to '/axZm/pic/zoom3D/[product id]' after all images have been successfully uploaded. Alternatively place an empty file named "upload.txt" into this folder and remove it after the upload is complete.
Magento Commerce
Demo Magento commerce store
1. Unzip the download package keeping the file structure intact.
2. Copy only the 'axZm' folder into your Magento store installation folder.
3. Ver. 3.0.1 Not needed. Move the file 'axZm/mods/magento/zoomObjects.inc.php' into 'axZm' folder overwriting the original file (move up).
4. Move the folder '/axZm/mods/magento/pic' (not '/pic') into 'axZm' folder (move up).
5. chmod all subfolders in 'axZm/pic/' to 775 or other (e.g. 777) so that PHP can write to them.
6. Make sure "ioncube" or "sourceguardian" loaders are installed on your server. For more info please check requirements at http://www.ajax-zoom.com/index.php?cid=docs
7. Backup your 'app/design/frontend/[your_interface]/[your_theme]/template/page/html/head.phtml' file and open it in the editor. In case there is no such a file find it at 'app/design/frontend/base/default/template/page/html/head.phtml' or at 'app/design/frontend/default/default/template/page/html/head.phtml'.
8. Insert the following line: <?php require (BP . str_replace('/', DS, '/axZm/mods/magento/magento_head.php'));?> after <?php echo $this->getCssJsHtml() ?>
9. Please make sure, that jQuery Core Library is bint only once into the source code and all jQuery plugins are below it.
IMPORTANT: the most common reason why modules that contain jQuery plugins do not work together is that jQuery core library is inserted more than once into the source. Consider this example:

<script type="text/javascript" src="jqueryCore_1.js"></script>
<script type="text/javascript" src="somePlugin_1.js"></script>

<script type="text/javascript" src="jqueryCore_2.js"></script>
<script type="text/javascript" src="somePlugin_2.js"></script>

jqueryCore_2.js overwrites jqueryCore_1.js and somePlugin_1.js; as the result somePlugin_1.js is not existent. When some arbitrary code is called on a function from somePlugin_1.js the results are javascript errors and none of the plugins might work properly.
In case jQuery core library is already installed, open 'axZm/mods/magento/magento_head.php' and remove the jQuery core script tag.

In case it is not possible to insert AJAX-ZOOM Code below the jQuery core(s) inserted by other modules (or present in the template) but only before, then you can make the following: do not remove jQuery core from 'axZm/mods/xtc/xtc_head.php'. Find all other jQuery cores (not plugins), open these files and delete everything in them. The script tags will be present in the source code but they will do no harm anymore. This way the page is optimized in a sense, that the same library is not loaded twice or more times, your modules (not just AJAX-ZOOM) work together and you have the control over the version of jQuery in your shop.
10. Backup your 'app/design/frontend/[your_interface]/[your_theme]/template/catalog/product/view/media.phtml' file.
11. Move the file 'axZm/mods/magento/media.phtml' into the 'app/design/frontend/[your_interface]/[your_theme]/template/catalog/product/view/' folder of your Magento store. Please note that media.phtml from AJAX-ZOOM has some parameters which can be set inside, e.g. you can set to open AJAX-ZOOM as fullscreen or show it in an embedded way.
12. Feel free to modify the media.phtml and 'axZm/mods/magento/magento_axZm.js' files to suit your needs. At the top of media.phtml you will find some options, which you can change to suit the gallery to your layout.
13. If template cache is activated do not forget to clear it in order to changes take effect. (To clear cache go to System -> Cache Management in the admin area.)
14. You have istalled the demo version of AJAX-ZOOM. To upgrade buy a commercial license at www.ajax-zoom.com/index.php?cid=download and update the 'axZm/zoomConfig.inc.php' file with the License Key.
15. For uploading and displaying 360 degree images please see here: http://www.ajax-zoom.com/index.php?cid=docs#heading_9
In case You get an error stating, that images could not be found, please open /axZm/zoomConfig.inc.php and set this options manually. Replace:
$zoom['config']['installPath'] = $axZmH->installPath();
with:
$zoom['config']['installPath'] = '';
or if the path to you shop is '/shop', then set:
$zoom['config']['installPath'] = '/shop';
NOTES:

1. The 'axZm/zoomConfig.inc.php' contains over 250 options to configure AJAX-ZOOM. For Your Magento store installation some options will be overridden in the same file. To see or adjust them find the line: elseif ($_GET['example'] == 'magento') in 'axZm/zoomConfig.inc.php'. From Ver. 2.1.6 these overrides have been moved to the file 'axZm/zoomConfigCustom.inc.php'.

2. Run 'axZm/mods/magento/magento_cleanup.php' to remove all images produced by AJAX-ZOOM which are not needed any more. Edit the file (remove exit; at the beginning) to use it. You can rename it and set a cronjob running once a day (php q /[path_to_magento]/axZm/mods/magento/magento_cleanup.php).

3. For a detailed explanation of all options, methods etc. see the documentation at http://www.ajax-zoom.com/index.php?cid=docs

4. The lightbox implementation (jquery.fancybox Ver. 1.2.6) has been modified to support auto dimensions (jquery.fancybox-1.2.6.js line 158ff). The new version of fancybox, currently 1.3.1 slows down Magento in IE (some JS issue?). The slightly modified old version 1.2.6 is sufficient for the purpose.
xt:Commerce (AJAX-ZOOM Ver. 2.1.3+) - xtcModified, Gambio, VEYTON
Demo xt:Commerce store (xtcModified)
1. Unzip the contents keeping the file structure intact.
2. Copy only the 'axZm' folder into your xt:Commerce installation folder.
3. Ver. 3.0.1+ Not needed. Move the file 'axZm/mods/xtc/zoomObjects.inc.php' into 'axZm' overwriting the original file (move up).
4. Move the folder 'axZm/mods/xtc/pic' into axZm folder (move up).
5. chmod all subfolders in 'axZm/pic/' to 775 or other (e.g. 777), so that PHP can write to them.
6. Make sure "ioncube" or "sourceguardian" loaders are installed on your server. For more into please check requirements at http://www.ajax-zoom.com/index.php?cid=docs
7. Backup this file and open it in the editor.
XTC: 'includes/header.php'
VEYTON: 'templates/[your_template]/javascript/js.php'
8. Insert the following line
XTC: include(DIR_FS_DOCUMENT_ROOT.'axZm/mods/xtc/xtc_head.php');
before:
require('templates/'.CURRENT_TEMPLATE.'/javascript/general.js.php');
(somewhere in the head section of your page)
VEYTON: <?php include(_SRV_WEBROOT.'axZm/mods/xtc/xtc_head.php'); ?>
9. Please make sure, that jQuery Core Library is bint only once into the source code and all jQuery plugins are below it.
IMPORTANT: the most common reason why modules that contain jQuery plugins do not work together is that jQuery core library is inserted more than once into the source. Consider this example:

<script type="text/javascript" src="jqueryCore_1.js"></script>
<script type="text/javascript" src="somePlugin_1.js"></script>

<script type="text/javascript" src="jqueryCore_2.js"></script>
<script type="text/javascript" src="somePlugin_2.js"></script>

jqueryCore_2.js overwrites jqueryCore_1.js and somePlugin_1.js; as the result somePlugin_1.js is not existent. When some arbitrary code is called on a function from somePlugin_1.js the results is javascript error and none of the plugins might work properly.
In case jQuery core library is already installed open 'axZm/mods/xtc/xtc_head.php' in an Editor and remove the jQuery script tag (line 24). Make sure that You insert the code from step 8 after existing jQuery script tag.

Should the jQuery be not in the head section xtcModified Ver. 1.04 jQuery was at the bottom of the body, fixed in 1.05) remove jQuery from there: open 'templates/[your_template]/javasctipt/general.js.php' and remove the line with the jquery.js

In case it is not possible to insert AJAX-ZOOM code below the jQuery core(s) inserted by other modules (or present in the template) but only before, then you can make the following: do not remove jQuery core from 'axZm/mods/xtc/xtc_head.php'. Find all other jQuery cores (not plugins), open these files and delete everything in them. The script tags will be present in the source code but they will do no harm anymore. This way the page is optimized in a sense, that the same library is not loaded twice or more times, your Modules (not just AJAX-ZOOM) work together and you have the control over the version of jQuery in your shop.
10. Backup your 'templates/[your_template]/module/product_info/product_info_v1.html' file and open it in the editor. In Gambio GX the file name is standard.html, in VEYTON the full path is: 'templates/[your_template]/xtCore/pages/product/product.html'.
Important: please save the backup not in the same directory, because the backup and not the new template file could be parsed.
11. XTC: Put between {if $PRODUCTS_IMAGE!=''} .... {/if} this line of code:
{php}include(DIR_FS_DOCUMENT_ROOT.'/axZm/mods/xtc/xtc_media.php');{/php} VEYTON: Put between {if $products_image!=''} .... {/if} this line of code: {php}include(_SRV_WEBROOT.'/axZm/mods/xtc/xtc_media.php');{/php}
12. Standard xt:Commerce, Gambio GX: optionally delete everything between <!-- more images --> ... <!-- more images eof -->
xtcModified: optionally delete everything between {if $more_images|@count > 0} ... {/if}
13. Feel free to modify the 'axZm/mods/xtc/xtc_media.php' and 'axZm/mods/xtc/xtc_axZm.js' files to suit your needs.
14. In admin area choose Advanced Configuration -> Cache Options and hit "Delete Templatecache" button.
15. You have installed the light version of AJAX-ZOOM. To upgrade buy a commercial license at www.ajax-zoom.com/index.php?cid=download and update the 'axZm/zoomConfig.inc.php' file with the License Key.
16. For uploading and displaying 360 degree images please see here: http://www.ajax-zoom.com/index.php?cid=docs#heading_9
In case You get an error stating, that images could not be found, please open /axZm/zoomConfig.inc.php and set this options manually. Replace:
$zoom['config']['installPath'] = $axZmH->installPath();
with:
$zoom['config']['installPath'] = '';
or if the path to you shop is '/shop', then set:
$zoom['config']['installPath'] = '/shop';
NOTES:

1. The 'axZm/zoomConfig.inc.php' contains over 250 options to configure AJAX-ZOOM. For Your xt:Commerce store installation some options will be overridden in the same file. To see or adjust them find the line: elseif ($_GET['example'] == 'xtc') in 'axZm/zoomConfig.inc.php'. From Ver. 2.1.6 these overrides have been moved to the file 'axZm/zoomConfigCustom.inc.php'.

2. Run 'axZm/mods/xtc/xtc_cleanup.php' to remove all images produced by AJAX-ZOOM which are not needed any more. Edit the file (remove exit; at the beginning) to use it. You can rename it and set a cronjob running once a day (php q /[path_to_xtc]/axZm/mods/xtc/xtc_cleanup.php)

3. For a detailed explanation of all options, methods etc. see the documentation at http://www.ajax-zoom.com/index.php?cid=docs

4. The lightbox implementation (jquery.fancybox Ver. 1.2.6) has been modified to support auto dimensions (jquery.fancybox-1.2.6.js line 158ff).
Oxid eSales (AJAX-ZOOM Ver. 2.1.6+, Oxid Ver. 4.3.0+)
Demo Oxid eSales store
1. Unzip the contents keeping the file structure intact.
2. Copy only the 'axZm' folder into your Oxid installation folder.
3. Ver. 3.0.1+ Not needed. Move the file 'axZm/mods/oxid/zoomObjects.inc.php' into 'axZm' overwriting the original file (move up).
4. Move the folder 'axZm/mods/oxid/pic' into axZm folder (move up).
5. chmod all subfolders in 'axZm/pic/' to 775 or other (e.g. 777), so that PHP can write to them.
6. Make sure "ioncube" or "sourceguardian" loaders are installed on your server. For more into please check requirements at http://www.ajax-zoom.com/index.php?cid=docs
7. Backup your 'out/[your_template]/tpl/_header.tpl' file and open it in the editor.
8. Insert the following line: [{php}]include(getShopBasePath().'axZm/mods/oxid/oxid_head.php');[{/php}]
before:
[{if $rsslinks}]
(somewhere in the head section of your page)
9. In case jQuery core library is already installed open 'axZm/mods/oxid/xtc_head.php' in an Editor and remove the jQuery script tag (line 24). Make sure that You insert the code from step 8 after existing jQuery script tag.
10. Backup your 'out/[your_template]/tpl/details.tpl' file and open it in the editor.
11. Put instead of <div class="picture">....</div> this line of code:
[{php}]include(getShopBasePath().'axZm/mods/oxid/oxid_media.php');[{/php}]
12. In order to remove the standard gallery and zoom from detail view you can modify Your 'details.tpl' file. The link (a tag) with the id 'test_zoom' is not needed. Also the div tag with the css class name 'morepics' is also not needed. If $axZm['adjTemplate'] and $axZm['removeMorePics'] in file 'axZm/mods/oxid/oxid_media.php' are enabled, this is done by javasctipt after page load.
13. Feel free to modify the 'axZm/mods/oxid/oxid_media.php' and 'axZm/mods/oxid/oxid_axZm.js' files to suit your needs.
14. Clear the Templatecache if needed.
15. You have installed the demo version of AJAX-ZOOM. To upgrade buy a commercial license at www.ajax-zoom.com/index.php?cid=download and update the 'axZm/zoomConfig.inc.php' file with the License Key.
In case You get an error stating, that images could not be found, please open /axZm/zoomConfig.inc.php and set this options manually. Replace:
$zoom['config']['installPath'] = $axZmH->installPath();
with:
$zoom['config']['installPath'] = '';
or if the path to you shop is '/shop', then set:
$zoom['config']['installPath'] = '/shop';
NOTES:

1. The 'axZm/zoomConfig.inc.php' contains over 250 options to configure AJAX-ZOOM. For Your Oxid eSales installation some options will be overridden in the same file. To see or adjust them find the line: elseif ($_GET['example'] == 'oxid') in 'axZm/zoomConfig.inc.php'. From Ver. 2.1.6 these overrides have been moved to the file 'axZm/zoomConfigCustom.inc.php'.

2. Run 'axZm/mods/oxid/oxid_cleanup.php' to remove all images produced by AJAX-ZOOM which are not needed any more. Edit the file (remove exit; at the beginning) to use it. You can rename it and set a cronjob running once a day (php q /[path_to_oxid]/axZm/mods/oxid/oxid_cleanup.php)

3. For a detailed explanation of all options, methods etc. see the documentation at http://www.ajax-zoom.com/index.php?cid=docs

4. The lightbox implementation (jquery.fancybox Ver. 1.2.6) has been modified to support auto dimensions (jquery.fancybox-1.2.6.js line 158ff).

Appendix

Datei zoomObjects.inc.php
This is additional Information. You do not have to edit zoomObjects.inc.php in order to get the images defined. The below information is for advanced useage only.

This file 'zoomObjects.inc.php' is responsible for generating a PHP array with images needed to be zoomed ($pic_list_array).

Also in this file You can, and in some cases should, overwrite some options that have been set in 'zoomConfig.inc.php'. For example if not all Your images are stored in one directory then it is necessary to overwrite $zoom['config']['pic'] and $zoom['config']['picDir'] in this file for the current selected image, see examples.

STEP I
Defining $pic_list_array

The basic array, which needs to be generated is defined as $pic_list_array. The key of the array should be an integer > 0 and does not have to be 1, 2, 3... it could also be 1254, 5846, 352... This key is then passed internally within AJAX-ZOOM as identifier for the image as a $_GET variable zoomID ($_GET['zoomID']).

The values are the names of the files (string), e.g. 'product_777.jpg'. Please note, that the value should really be just the image name without any paths, /pictures/product_images/product_777.jpg. The path is defined in zoom['config']['pic'] and can be modified for the current selected image in this file as needed...

First define the new basic array:
$pic_list_array = array();

The "data array" $pic_list_data is a "multidimensional" array which contains more information about the source files like filesize or image description. For more information jump over to Step II.

Define the new data array:
$pic_list_data = array(); 
$zoomTmp is a array needed to store some arbitrary data like errors or other.
$zoomTmp = array(); 

Now it depends on Your system and purpose how to generate $pic_list_array and $pic_list_data arrays.

Please note that in all dynamic examples the superglobal $_GET needs to be used. Copy the needed vars into $_GET (e.g. $_GET['yourVar'] = "someValue";), if they are not passed over the query string anyway (e.g. http://www.yourdomain.com/index.php?yourVar=someValue)!
Example 1
For quick testing You could define the $pic_list_array manually.
$pic_list_array[1] = 'some_file1.jpg';
$pic_list_array[2] = 'some_file2.jpg';
$pic_list_array[3] = 'some_file3.jpg';
$pic_list_array[4] = 'some_file4.jpg';
$pic_list_array[5] = 'some_file5.jpg';

Please note, that the pictures have to be in the folder defined in $zoom['config']['pic'] in '/axZm/zoomConfig.inc.php'. Of course the above example is static and not flexible enough to deal with large amount of images. To get closer to the intended purpose - the dynamic generation of an image set, one could write instead:

if ($_GET['productID'] == 15){
	$pic_list_array[1] = 'some_file1.jpg';
	$pic_list_array[2] = 'some_file2.jpg';
	$pic_list_array[3] = 'some_file3.jpg';
	
	// Overwriting source folder would look like this:
	$zoom['config']['pic'] = '/some_folder/folder_abc/';
	$zoom['config']['picDir'] = $axZmH -> checkSlash($zoom['config']['fpPP'].$zoom['config']['pic'], 'add');
} 

elseif ($_GET['productID'] == 354){
	$pic_list_array[1] = 'some_file4.jpg';
	$pic_list_array[2] = 'some_file5.jpg';
	$pic_list_array[3] = 'some_file6.jpg';
} 

elseif ($_GET['productID'] == 677){
	$pic_list_array[1] = 'some_other_file7.jpg';
	$pic_list_array[2] = 'some_other_file5.jpg';
} 

elseif ($_GET['productID'] == 555){
	$pic_list_array[1] = 'some_other_file88.jpg';
} 

Depending on a parameter 'productID' passed over the query string or copied into $_GET, a different set of images is loaded.

Example 2
Generate an array for zooming picture or gallery from a specific folder with all images in it

This example mirrors exactly how $pic_list_array is generated in most examples on this page.

Since the folders with the images are always different, there is a parameter defined as 'zoomDir' which is passed over the query string, e.g. ?zoomDir=animals or simply defined inline for the demo, e.g.:

$_GET['zoomDir'] = 'animals';

In this example the option $zoom['config']['pic'], defined in zoomConfig.inc.php has to be understood at this point as "base folder" with subfolders (just one sublevel). $zoom['config']['pic'] AND $zoom['config']['picDir'] are adjusted accordingly to the passed value of 'zoomDir'. In this way, images uploaded in this subfolders via FTP or some other PHP application, instantly appear in the AJAX-ZOOM gallery. (In the examples, the names of the subfolders are used for simplification as headings, if subfolders can be changed by user action.)

$zoomTmp['folderArray'] = array(); // Create empty array for folders

// Open the "base directory" $zoom['config']['picDir'] and choose only folders in it (GLOB_ONLYDIR)
$n=0; // Start counter
foreach ( glob ($axZmH->checkSlash($zoom['config']['picDir'],'add').'*', GLOB_ONLYDIR) as $folder){
	$n++; 
	// Fill folder array with subfolder names
	$zoomTmp['folderArray'][$n] = $axZmH->getl('/',$folder);
}

// If $_GET['zoomDir'] is not a number (the key in $zoomTmp['folderArray']), try to find the real numeric key and redefine $_GET['zoomDir'] if found
if (isset($_GET['zoomDir'])){
	if (!is_numeric($_GET['zoomDir']) AND !empty($zoomTmp['folderArray'])){
		// if urldecoded string can be found in the above defined array with folders
		if (in_array(urldecode($_GET['zoomDir']),$zoomTmp['folderArray'])){
			$flipedArray = array_flip($zoomTmp['folderArray']);
			$_GET['zoomDir'] = $flipedArray[urldecode($_GET['zoomDir'])];
		}else{
			unset ($_GET['zoomDir']);
		}
	}
}

// Choose the first folder if zoomDir ($_GET['zoomDir']) is not passed or has been unset above
if (!isset($_GET['zoomDir']) AND !empty($zoomTmp['folderArray'])){
	reset($zoomTmp['folderArray']);
	$_GET['zoomDir'] = key($zoomTmp['folderArray']);
}

// Adjust $zoom['config']['pic'] AND $zoom['config']['picDir']
if (isset($_GET['zoomDir'])){
	if (!empty($zoomTmp['folderArray']) AND array_key_exists($_GET['zoomDir'],$zoomTmp['folderArray'])){
		// Redefine base folder
		$zoom['config']['pic'] .= $axZmH->checkSlash($zoomTmp['folderArray'][$_GET['zoomDir']],'add');
		// Redefine server path for the pic directory
		$zoom['config']['picDir'] = $axZmH->checkSlash($zoom['config']['fpPP'].$zoom['config']['pic'],'add');
	}
}

The above code does not only define the directory of the image(s), but also generates an array - $zoomTmp['folderArray'] containing all the subfolders within one directory. This might be usefull for some advanced examples.

If this information is not needed, one could write instead of the above just a couple of lines, taken and slightly modified from the second example. Since there is no array build with all subfoders, the value of $_GET['zoomDir'] should be the real name of the subfolder, e.g. 'animals'. In the above code there is also a possibility to pass the numeric key of $zoomTmp['folderArray'] containing all the subfolders (line 11 ff).

// Set the absolute path option completly overwriting it from zoomConfig.inc.php
$zoom['config']['pic'] = $axZmH->checkSlash($zoom['config']['pic'].urldecode($_GET['zoomDir']),'add');

// Redefine server path for the pic directory
$zoom['config']['picDir'] = $axZmH->checkSlash($zoom['config']['fpPP'].$zoom['config']['pic'],'add');

// Check if the path does exist
if (!is_dir($zoom['config']['picDir'])){
	// If the folder does not exist, do something like break up for example
	exit;
}

As next $pic_list_array has to be filled with images:

// Open the above defined (in zoomConfig.php or here) directory with images
$handle = opendir($zoom['config']['picDir']);

// Loop through each file in $zoom['config']['picDir']
$n=0;
while (false !== ($file = readdir($handle))){ 
	// If filetype is jpg
	if ( strtolower( $axZmH->getl('.',$file) ) == 'jpg' ){
		// Add filename to the pic_list_array with the index $n ($n >= 1)
		$n++; $pic_list_array[$n] = $file;
	}
}
// Close directory
closedir($handle);

// Sort piclist by filename if You want, (not necessary)
$pic_list_array = $axZmH->natIndex($pic_list_array);
Example 3
Generate an array from MySQL

Connect to the Database.

// First You need to connect to MySQL database
// Make sure to replace localhost, mysql_user and mysql_password with Your settings
$sqlConnect = mysql_connect('localhost', 'mysql_user', 'mysql_password');

// If connection fails trigger an error
if (!$sqlConnect){ die('Could not connect: ' . mysql_error());}

// Select the db name
$dbSelect = mysql_select_db ("your_db_name", $sqlConnect);

// If resorce is not available trigger an error
if (!$dbSelect) { die ('Can not use your_db_name: ' . mysql_error());}

Suppose following scenario: You have one relevant mysql table with products, called "products". It has this fields: id, title, description, pic1, pic2, pic3 and You want to display all three pictures in the gallery. The parameter passed over the http query string is probaly something like "pID" (e.g. product.php?pID=12345) or "productID" or just "id"

// If there is a connection to the database
if ($dbSelect){
	/* Select picture fields from products table where the id is equals to the 
	relevant parameter (e.g. pID) from http query string */
	$row = mysql_fetch_assoc ( mysql_query ('SELECT pic1, pic2, pic3 FROM products WHERE id=\''.(int)$_GET['pID'].'\' LIMIT 1') );
	
	/* Loop through each field starting from 1 ($n=1), 
	increasing $n by one ($n++) till it reaches 3 ($n<=3) */
	for ($n=1; $n<=3; $n++){
		// if there is a filename string in the field
		if ($row['pic'.$n]){
			// add the picture to the array $pic_list_array
			$pic_list_array[$n] = $row['pic'.$n];
		}
	}
}
Example 4
Generating an array from MySQL II

The above database layout (Example 3.) would allow only a couple pictures to be stored. In more advanced CMS or Webshop there would be a separate table for infinite number of pictures. Suppose it is called "images" and has this fields: imgID, imgProdID, imgFileName, imgTitle, imgDescription, [imgOrder]. The main relevant parameter passed over http query string as in Example 3. is called "pID" (e.g. product.php?pID=12345) Since we are only interested in pictures we do not need to join both tables. The field "imgProdID" in "images" table tells us, that the row belongs to a certain product with this id. Anotherwords all rows in "images" table with imgProdID that equals the ID in products table belong to this specific product.

Connect to the Database:

/* First You need to connect to MySQL database
Make sure to replace localhost, mysql_user and mysql_password with Your settings */
$sqlConnect = mysql_connect('localhost', 'mysql_user', 'mysql_password');

// If connection fails trigger an error
if (!$sqlConnect){ die('Could not connect: ' . mysql_error());}

// Select the db name
$dbSelect = mysql_select_db ("your_db_name", $sqlConnect);

// If resorce is not available trigger an error
if (!$dbSelect) { die ('Can not use your_db_name: ' . mysql_error());}

Select all fields from images table where the "identifier" imgProdID equals the query string parameter "pID" You could also cache the results by adding SQL_CACHE after SELECT (http://dev.mysql.com/doc/refman/4.1/en/query-cache-in-select.html) The example query has no order, so if there is an order field like "imgOrder" add " ORDER BY imgOrder " to the query.

$sql = mysql_query ("SELECT * FROM images WHERE imgProdID='".(int)$_GET['pID']."'");

/* We do not know how many pictures there are, it could be 0 or whatever. So we ask how many result or rows the $sql query has returned
$numRows = mysql_num_rows($sql); */

// If we have at least one picture row
if ($numRows > 0){
	$n = 0; // Start counter
	// Loop through each row
	while ($row = mysql_fetch_assoc($sql)){
		
		/* now You could add the field imgFileName to the array $pic_list_array, 
		CODE: $pic_list_array[$n] = $row['imgFileName'];
		but since images have a unique id (imgID) that can not be zero You could 
		write it instead of the above as following: */
		$pic_list_array[$row['imgID']] = $row['imgFileName'];
		
		/* Also in this example there are fields with title and description 
		of that specific image. $pic_list_data defined in the beginning can
		contain more information for image gallery. So we can write here: */

		$pic_list_data[$row['imgID']]['thumbDescr'] = $row['imgTitle'];
		$pic_list_data[$row['imgID']]['fullDescr'] = $row['imgDescription'];
	}
}else{
	// do something
}
STEP II
Gather additional data

In step II, after the $pic_list_array is defined, it is nessecery to gather some additional information about the images:


// Loop through the $pic_list_array
// $k is the "zoomID" and $v is the source filename
foreach ($pic_list_array as $k=>$v){
	
	// Store filename under the key 'fileName'
	$pic_list_data[$k]['fileName'] = $v; 

	// We need this information only once at loading process, 
	// not for zooming into an image. AJAX-ZOOM passes the 
	// additional parameter 'str' which means,  
	// that this is a zoom request.
	if (!isset($_GET['str'])){

		// Ver. 2.1.2+
		if (isset($pic_list_data[$k]['path'])){
			$picPath = $axZmH->checkSlash($zoom['config']['pic'].'/'.$pic_list_data[$k]['path'],'add');
			$zoom['config']['picDir'] = $axZmH->checkSlash($zoom['config']['fpPP'].$picPath,'add');
		}
	
		// Store imagesize under the key 'imgSize' (necessary!!!)
		$pic_list_data[$k]['imgSize'] = 
		getimagesize($zoom['config']['picDir'].$pic_list_array[$k]);

		// Store filesize under the key 'fileSize' 
		// (not necessary, just for example)
		$pic_list_data[$k]['fileSize'] = 
		filesize($zoom['config']['picDir'].$pic_list_array[$k]);
		
		/* Under the key 'thumbDescr' You can store any short image 
		information  that will be shown under the thumb of image 
		gallery. This is just an example, if image size is important. 
		In Example 5. we have already defined thumb description 
		from database field "imgTitle". In this case remove the 
		following lines, as it would overwrite the already 
		obtained information.
		*/

		$pic_list_data[$k]['thumbDescr'] = 
		$pic_list_data[$k]['imgSize'][0].' x '.$pic_list_data[$k]['imgSize'][1];
		
		// Same with full description. In Example 5 it has 
		// been taken out of the database field 'imgDescription'. 
		$pic_list_data[$k]['fullDescr'] = '';
	}
}

Now there should be three arrays: $pic_list_array, $pic_list_data and $toomTmp. The last one can be empty. Basically there is no need to change anything below this line!!! The results of the above code are checked and processed with the php class method proceedList as seen on line 6 of the following code.

// Store information in $zoom['config']
$zoom['config']['pic_list_array'] = $pic_list_array;
$zoom['config']['pic_list_data'] = $pic_list_data;

// Check the existance of the files and generate everything else needed on-the-fly. 
$proceed = $axZmH->proceedList($zoom, $zoomTmp);
$zoom = $proceed[0]; $zoomTmp = $proceed[1];
$pic_list_array = $zoom['config']['pic_list_array'];
$pic_list_data = $zoom['config']['pic_list_data'];
Possible Motion (Transition) Types.
swing
jswing
linear
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
Use Zoomify image tiles with AJAX-ZOOM
This feature is only available with the unlimited license and allows to use gigapix images with AJAX-ZOOM on almost any web server, also on shared accounts, provided AJAX-ZOOM is installable there. It does also work for 360 degree object spins. Please read step 1-6 before proceed:
1. Instead of pointing AJAX-ZOOM to the original image file, create a smaller image e.g. 1600x1200px and name it for example mytestimage.jpg; point AJAX-ZOOM to this image.
2. Create an empty txt file and name it as your image, in this case mytestimage.txt; in this txt image write original resolution of the source image as string WidthxHeight, e.g. 120000x50000 ... nothing else. Upload this txt file in the same directory, where mytestimage.jpg resides.
3. In config file set $zoom['config']['tileSize'] = 256; In case you want to create some tiles by AJAX-ZOOM and they are already created, either delete them to recreate or set $zoom['config']['pyrAutoDetect'] = true;
4. Make Zoomify tiles on your computer. Zip TileGroup0, TileGroup1, TileGroup[x] folders and name your zip file mytestimage.zip; chmod this zip file to 777! In case this does not work with the zip file, because your server can’t open it, see step 5;
5. Only needed, if step 4 does not work! Create subfolder under /pic/zoomtiles_80/mytestimage; chmod mytestimage subfolder to 777; upload TileGroup0, TileGroup1, TileGroup[x] to /pic/zoomtiles_80/mytestimage; chmod all TileGroup[x] folders to 777;
6. Run AJAX-ZOOM. Depending on the size of the original image it should take no longer then one minute at first run. Do not use example1.php for testing. Otherwise place the folders from step 5 (if needed) into /pic/zoomtiles/mytestimage/ and not /pic/zoomtiles_80/mytestimage/;