AJAX-ZOOM - Image Zoomer Documentation PHP / ASP.NET, 360° Product Zoom Viewer Magento, XTC

Requirements

Server Software PHP Version
PHP 5+	PHP 5.2+ recommended, memory_limit at least 128M and safe_mode = off* One known issue with safe_mode is that when AJAX-ZOOM creates subfolders and tries to put image tiles for each image in them, the subfolders are created, but because of save_mode turned on it is not allowed to write in them. You can solve this problem by changing the owner of AJAX-ZOOM files and folders. Mostly the FTP owner and PHP owner are different.
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). If you experince any troubles try to adjust: $zoom['config']['fpPP'] $zoom['config']['installPath'] 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. Alternatively there is a Zend Guard/Optimizer version available (Ver. 3.3.0+); You can choose between the encoded scripts by editing the file 'zoomInc.inc.php'. Just uncomment the desired line with the require() statement. 'axZm.class.ixed.php' is the SourceGuardian version, 'axZm.class.ioncube.php' is the IonCube encoded version and 'axZm.class.zend.php' the Zend Guard/Optimizer versison. All files are identical, but require different loaders to run. The default setting (uncommented line) is IonCube. IonCube encoded version is recommended.

3. Adjust the options in '/axZm/zoomConfig.inc.php' file to suit Your needs. All options are explained inline 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) the thumbnails, temporary files and the image tiles. These folders are defined in '/axZm/zoomConfig.inc.php' as:

$zoom['config']['pic'] and all subfolders (read)
$zoom['config']['thumbs'] (read/write)
$zoom['config']['gallery'] (read/write)
$zoom['config']['temp'] (read/write)
$zoom['config']['pyrTilesPath'] (read/write)
$zoom['config']['tempCacheDir'] (read/write) needed for some examples, see also allowDynamicThumbs
$zoom['config']['mappath'] (read/write) Ver 4.0+

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:

$zoom['config']['fpPP']
$zoom['config']['installPath']

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:

$zoom['config']['pic']
$zoom['config']['pyrTilesPath']

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
Major Directories and Filenames
Image Map
Description Area
Galleries
Horizontal Gallery
Vertical Gallery
Inline Gallery
Gallery Navigation
3D (VR Object) / 360 Spin & Zoom
Navigationsleiste
Mobile buttons (Navi)
Motion (Animation, Transition)

Mousewheel Zoom In and Out
Pan / Drag
Image Area Selector
Progressbar
Ajax Loader
Mixed Options
Watermark
Image Pyramid with Tiles
Auto Generated Options
Fullscreen
Download
Hotspots

General Settings
Option	Type	Description
licenceKey	string	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.
licenceType	string	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_limit	string	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.
domain	string	Your domain name, like: 'http://www.ajax-zoom.com'. Leave it blank in this version!
quirks	bool	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.
parToPass	string	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!
cropNoObj	bool	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)
cTimeCompare	bool	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.
exifAutoRotation	bool	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/"
visualConf	bool	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_allow	array	An array with supported image types like jpg. Currently only jpg is supported.
picDim	string	Max dimensions for initial image, e.g. '600x400'. Changing this setting will also change the entire dimensions of the zoom player.
enlargeSmallImage	bool	Ver. 2.1.1+ Enlarge image if width and height of the source image is smaller than picDim.
firstImageDialog	bool	Display a dialog after initial images have been generated.
keepBoxW	bool	Keep stage dimensions for width as defined in picDim independently from image proportions. By using a gallery this option must also be activated.
keepBoxH	bool	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.
gravity	string	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.
traveseGravity	string	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.
disableZoom	bool	Disable zoom function completly.
disableZoomExcept	array	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
iMagick	bool	Ver. 2.1.5+ Use ImageMagick for all image processing. Overrides all other options regarding the choice between GD and ImageMagick.
im	bool	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)
imKeepProfiles	bool	Ver. 4.0+ Keep color and other profiles for all operations processed with ImageMagick.
imQuotes	mixed	Only for ImageMagick: remove or replace single quotes in exec string. Possible values: 'remove', 'replace' oder false. 'replace' will replace them to double quotes.
imLimit	array	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.
imPath	string	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.
qual	int	Output JPG quality for zoomed images, max. 100. See also pyrQual
qualPng	array	Ver. 4.0+ Output PNG quality for zoomed images.
qualRange	array	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
initPicQual	int	Output JPG quality for initial images.
initPicQualPng	array	Ver. 4.0+ Output PNG quality for initial images.
pngMode	bool	Ver. 4.0+ Generate PNG images, tiles etc. instead of JPG
pngKeepTransp	bool	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.
notTouchUA	array	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.
Major Directories and Filenames
Option	Type	Description
fpPP	string	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!
installPath	string	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!
zoomLoadFile	string	Absolute path for the file zoomSess.php, e.g. '/axZm/zoomSess.php'
zoomLoadSess	string	Absolute path for the file zoomSess.php, e.g. '/axZm/zoomSess.php'
icon	string	Folder where icons are located, absolute path with a slash at the end! This folder should not be password protected! e.g. '/axZm/icons/'
js	string	Folder where JavaScript files are located, e.g. '/axZm/'
jsDynLoad	bool	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>
jsMin	bool	If jsMin is true the minified versions of the JavaScript files will be loaded.
jsUiAll	bool	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.
jsUiVer	string	Ver. 4.0+ jQuery UI version used by AJAX-ZOOM
jsUiTheme	string	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.
jsUiSuppressJS	bool	Ver. 4.0.7+ Suppress loading jQuery UI JavaScript files. May result in JavaScript error if certain jQuery UI elements are not loaded otherwise.
jsUiSuppressCSS	bool	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.
fontPath	string	Fonts directory path e.g. '/axZm/fonts/'. All font files (.ttf) have to be in the same directory.
pic	string	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).
thumbs	string	Folder, where initial images will be written into, e.g. '/pic/zoomthumb/'. Please make sure PHP can write to this directory (chmod)!
temp	string	Folder where to write temporary zoomed images, e.g. '/pic/temp/'. Please make sure PHP can write to this directory (chmod)!
gallery	string	Folder where to write the thumbs for gallery images, e.g. '/pic/zoomgallery/'. Please make sure PHP can write to this directory (chmod)!
tempCache	string	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
useMap	bool	Enable image map.
mapParent	mixed	Parent DIV id (string) of the image map if you want to place it outside of AJAX-ZOOM. See example16.php
mapParCenter	bool	Center within parent container.
dragMap	bool	If activated, image map is draggable.
mapHolderHeight	int	If dragMap is activated, the holder height in px. CSS: .zoomMapHandle
mapHolderText	string	If dragMap is activated, the text string inside the holder.
zoomMapDragOpacity	float	If dragMap is activated, opacity while dragging, e.g. 0.7 (70%)
zoomMapSelOpacity	float	Opacity of the selector inside the image map, e.g. 0.25 (25%), CSS: .zoomMapSelArea
zoomMapSelBorder	int	Ver. 4.0+ Border width of the selector.
zoomMapContainment	string, 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.
zoomMapAnimate	bool	Animate map while switching to a different image.
zoomMapVis	bool	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.
mapFract	float	Image map size in percentage of picDim width, e.g. 0.25 (25%).
mapWidth	int, bool	Fixed map width in pixels. Overrides mapFract.
mapHeight	int, bool	Fixed map Height in pixels. Overrides mapFract.
mapButton	bool	Show the button for turning image map on and off.
mapBorder	array	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.
zoomMapSwitchSpeed	int	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)
zoomMapRest	bool	Restore position of the map on window resize.
mapPos	string	Position of the map! Possible values: 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'; Map must be not dragable - dragMap set to false;
mapSelSmoothDrag	bool	Smooth flow of zoomed image while dragging the selector rectangle inside the image map.
mapSelSmoothDragSpeed	int	Smoothness speed in ms of map selector dragging, e.g. 1000 (1 second)
mapSelSmoothDragMotion	string	Ver. 2.1.3+ Smoothness motion of map selector dragging, e.g. 'easeOutSine'
mapSelZoomSpeed	int	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)
mapMouseOver	bool	Move selector inside zoom map by mouseover and not by dragging the selector. Instantly disabled for touch devices.
mapMouseWheel	bool	If mapMouseOver is enabled, allow to zoom in and out using mousewheel.
mapHorzMargin	int	Ver. 4.0+ Horizontal margin from the edge of the player.
mapVertMargin	int	Ver. 4.0+ Vertical margin from the edge of the player.
mapOpacity	float	Ver. 4.0+ Opacity of the map when mouse is not over it.
mapOwnImage	bool, string	Ver. 4.0+ Define physical image dimensions for the map image e.g. "200x200" or false;
mapPath	string	Ver. 4.0+ Path where map images are stored when mapOwnImage is set to some size.
mapFilterIM	array	Ver. 4.0+ Some image filters like sharp or grayscale applied to the map image when using GD for processing.
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
zoomShowButtonDescr	bool, 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;
descrAreaTransp	float	Description area opacity, e.g. 0.5
descrAreaShowTime	int	Showing animation time in ms, e.g. 200
descrAreaHideTime	int	Hiding animation time in ms, e.g. 200
descrAreaShowTimeOut	int	The delay in ms after which the description shows up, e.g. 500
descrAreaHideTimeOut	int	The delay in ms after which the description instantly hides, if mouse is not over an object any more, e.g. 750
descrAreaHeight	int	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.
descrAreaMotion	string	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
galleryPicQual	int	JPG quality for gallery thumbs, e.g. 90 (max. 100)
galleryPicQualPng	array	Ver. 4.0+ Quality for gallery thumbs under pngMode
galleryFill	bool	Ver. 4.0+ Fit gallery size with the image. Depending on ratios image is croped to fill entire area.
galleryFilterIM	array	Ver. 4.0+ Some image filters like sharp, unsharp or grayscale applied to the gallery thumbs when using Imagemagick for processing.
galleryFilterGD	array	Ver. 4.0+ Some image filters like sharp, sepia-tone or grayscale applied to the gallery thumbs when using GD for processing.
galleryDialog	bool	Display modal dialog (only once) when thumbs have been made by the server.
galleryFadeOutSpeed	int	Fadeout speed in ms for previous image in the gallery, e.g. 300
galleryFadeInSpeed	int	Fadein speed of new image, e.g. 300
galleryFadeInMotion	string	Fadein animation motion, e.g. 'easeOutCirc'
galleryFadeInOpacity	float	Fadein starting opacity, e.g. 0.1 or 0
galleryFadeInSize	float	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.
galleryFadeInAnm	string	Fadein starting animation position, possible values: 'Center', 'Top', 'Right', 'Bottom', 'Left', 'StretchVert', 'StretchHorz'; Ver. 4.0+ added: 'SwipeHorz', 'SwipeVert', 'Vert', 'Horz'
galleryInnerFade	int, 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.
galleryInnerFadeCut	int, 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.
galleryInnerFadeMotion	string	Motion type of the above animation (galleryInnerFadeCut), e.g. 'swing'
gallerySwipe	mixed	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.
gallerySlideNavi	bool	Ver. 4.0+ Enable prev / next buttons above the picture of the player. In 360/3D mode these buttons turn the object.
gallerySlideNaviMouseOver	bool	Ver. 4.0+ Arrows for prev / next over the image appear only when mouse is over the player. Disabled for touch devices.
gallerySlideNaviOnlyFullScreen	bool	Ver. 4.0+ Show arrows for prev / next over the image only at fullscreen mode.
gallerySlideNaviMargin	int	Ver. 4.0+ Margin of the prev / next buttons from the edge of the player.
gallerySlideNaviAnm	string	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'
scrollPane	bool	Scrollbar replacement - ScrollPane (jScrollPane.js) for inline and vertical galleries.
scrollPaneTheme	string	jScrollPane theme folder located in "/axZm/plugins/jScrollPane/themes".
scrollPaneOptionsVert	array	jScrollPane options array for vertical gallery.
scrollPaneOptionsFull	array	jScrollPane options array for "inline gallery".
Mouseover animation parameters between different colors of the gallery thumbs, CSS: .zoomGalleryBox to .zoomGalleryBoxOver AND .zoomFullGalleryBox to .zoomFullGalleryBoxOver
galleryThumbFadeOn	bool	Enable fade animation between the two CSS classes for the gallery thumbs.
galleryThumbOverSpeed	int	If galleryThumbFadeOn is aktivated, the speed of animation in ms on mouseover, e.g. 150
galleryThumbOutSpeed	int	If galleryThumbFadeOn is aktivated, the speed of animation in ms on mouseout, e.g. 1250
galleryThumbOverOpaque	float	Overall opacity on mouseover, e.g 1.0 (1.0 -> no opacity, 100%)
galleryThumbOutOpaque	float	Overall opacity on mouseout, e.g 0.8 (0.8 -> 80%)
galleryNoThumbs	bool	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.
galleryThumbDesc	function
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.
galleryThumbFullDesc	function	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.
Horizontal Gallery
Option	Type	Description
useHorGallery	bool	Enable horizontal gallery.
galleryHorPicDim	string	Thumb size in horizontal gallery, e.g. '70x70'
galHorPosition	string	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
galHorHeight	int	Height of the gallery container in px.
galHorCssMarginTop	int	Top margin of the gallery thumb "frames" in px, CSS: .zoomHorGalleryBox, .zoomHorGalleryBoxSelected, .zoomHorGalleryBoxOver
galHorCssMarginBetween	int	Distance between thumb "frames", CSS: .zoomHorGalleryBox, .zoomHorGalleryBoxSelected, .zoomHorGalleryBoxOver
galHorMarginTop	int	Top margin of the horizontal gallery container in px.
galHorMarginBottom	int	Bottom margin of the horizontal gallery container in px.
galHorFlow	bool	"Flow-scroll". Scrolling happens depending on mouse position within the container.
galHorArrows	bool	Enable arrows (left and right) as horizontal scroll navigation.
galHorMouse	bool	Mousewheel scrolling support.
galHorArrowWidth	int	Width of the arrow images for horizontal scroll navigation in px.
galHorCssPadding	int	Space between the actual thumb and outer frame in px, CSS: .zoomHorGalleryImg
galHorCssBorderWidth	int	Border width outer frame in px, css: .zoomHorGalleryBox, .zoomHorGalleryBoxSelected, .zoomHorGalleryBoxOver
galHorCssDescrHeight	int	Height of description div under the thumb in px, CSS: .zoomGalleryDescr, Use 0 to disable thumb description
galHorCssDescrPadding	int	Padding of the description div in px, CSS: .zoomHorGalleryDescr
galHorScrollPos	string	Tend to center the thumbnail image in the gallery after clicking on it.
galHorScrollToCurrent	bool	Scroll to the first loaded image thumb on the beginning.
galHorScrollMotion	string	Motion type for scroll, e.g. 'easeOutSine'
galHorScrollSpeed	int	Scroll speed in ms, e.g. 1000
galHorScrollBy	int	Scroll by this number of thumbs, e.g. 3
galHorInnerCorner	bool	Enable inner container rounded corners.
galHorInnerCornerImage	string	If galHorInnerCorner activated, the background image for rounded corner, located at icons folder, e.g. 'inner_corner_black_5.png'
galHorInnerCornerWidth	int	If galHorInnerCorner activated and galHorInnerCornerImage is defined, border-radius in px.
Vertical Gallery
Option	Type	Description
useGallery	bool	Enable vertical gallery.
galleryPicDim	string	Vertical gallery thumbs size, e.g. '100x100'
galleryPos	string	Gallery Position, possible values: 'left', 'right'
galleryLines	int	Number of columns in the vertical gallery, limited by users resolution and Your layout.
galleryScrollbarWidth	int	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.
galleryScrollTop	bool	Scroll gallery to the point, where the clicked image thumb is on top of visible area.
galleryScrollToCurrent	type	Scroll to the loaded image thumb on the beginning.
galleryMarginLeft	int	Margin to the zooming image on px, only if galleryPos is 'right'.
galleryCssPadding	int	Space in px between the thumb image and outer frame, CSS: .zoomGalleryImg
galleryCssBorderWidth	int	Border width of the outer thumb frame in px, CSS: .zoomGalleryBox, .zoomGalleryBoxSelected, .zoomGalleryBoxOver
galleryCssDescrHeight	int	Height of description div under the thumb, CSS: .zoomGalleryDescr
galleryCssDescrPadding	int	Padding within the description div in px, CSS: .zoomGalleryDescr
galleryCssMargin	int	Distance between thumb "frames" in px, CSS: .zoomGalleryBox, .zoomGalleryBoxSelected, .zoomGalleryBoxOver
galleryCssFirstTopMargin	int	Ver. 4.0+ Top Margin for the first thumb.
Inline Gallery
"Inline Gallery" is shown by clicking an a button in navigation and displays over the image.
Option	Type	Description
useFullGallery	bool	Enable inline gallery.
galleryFullPicDim	string	Size of the thumbs, e.g. '70x70', CSS: .zoomFullGalleryBox, .zoomFullGalleryBoxOver, .zoomFullGalleryBoxSelected, .zoomFullGalleryDescr
galFullButton	bool	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
galFullScrollCurrent	bool	If set to true it will be scrolled to the current selected image.
galFullAutoStart	bool	Autostart and autoshow "Inline Gallery" after initialization of AJAX-ZOOM.
galFullTooltip	bool	Enable description tooltip for "Inline Gallery".
galFullTooltipOffset	int	Tooltip offset from the thumb in px, e.g. 5
galFullTooltipSpeed	int	Tooltip fadein speed in ms.
galFullTooltipTransp	float	Tooltip opacity, e.g. 0.93
galFullCssPadding	int	Space between the thumb and outer frame in px, e.g. 5, CSS: .zoomFullGalleryImg
galFullCssBorderWidth	int	Border width outer frame in px.
galFullCssDescrHeight	int	Height of description under the thumb in px, e.g 10, CSS: .zoomFullGalleryDescr
galFullCssDescrPadding	int	Padding within the description in px, CSS: .zoomFullGalleryDescr
galFullCssMargin	int	Distance between thumb frames in px, CSS: .zoomFullGalleryBox, .zoomFullGalleryBoxSelected, .zoomFullGalleryBoxOver
Gallery Navigation
Prev, Next, Play buttons for the gallery.
Option	Type	Description
galleryNavi	bool	Enable gallery navigation buttons.
galleryNaviPos	string	Gallery navigation position. Possible values: 'top', 'bottom' or 'navi'. Top and bottom refere to position above or under the vertical gallery container.
galleryNaviHeight	int	Ver. 4.0+ Height of the parent container if positioned not inside navigation bar (galleryNaviPos not 'navi')
galleryNaviCirc	bool	Circular gallery navigation - carousel (after reaching the last image the first image is next).
galleryNaviMargin	array	Gallery navigation container margin in px, array(top, right, bottom, left), e.g. array(2, 25, 5, 0);
galleryButtonSpace	int	Space between buttons in px.
galleryPlayButton	bool	Enable Play, Pause button.
galleryAutoPlay	bool	Enable autoplay (diashow) on start.
galleryPlayInterval	int	Interval for diashow in ms, e.g. 3500 (3,5 seconds)
3D (VR Object) / 360 Spin & Zoom
Option	Type	Description
spinMod	bool	Enable 360 spin / 3D spin & zoom. Inline Gallery (useFullGallery) must be enabled too.
spinBounce	mixed	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
spinKeys	array	Ver. 4.0+ Configuration of the keyboard keys to perform spinning in 360 and 3D;
spinSensitivity	float	Spin sensitivity to mouse movement. Greater number means faster spinning.
spinSensitivityZ	float	Spin sensitivity to mouse movement of the Z axis. Greater number means faster spinning.
spinReverse	bool	Activate reversed direction of the spin to mouse movement. In fact the direction depends on the order of the images in the sequence.
spinReverseZ	bool	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.
spinFlip	bool	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.
firstAxis	mixed	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.
spinDemo	bool	Start spin after it first loads.
spinDemoTime	int	Time in ms for autospin which is needed to make one turn.
spinDemoRounds	int, 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.
spinOnSwitch	bool	Demo spin each time the User switches to routate tool.
spinWhilePreload	bool	Ver. 3.2.2+ Spin while preloading.
spinMouseOverStop	bool	Stops automatic spinning if mouse over the object.
spinEffect	array	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.
spinPreloaderSettings	array	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.
cueFrames	csv, 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.
spinToMotion	string	Ver. 3.1.0+ Motion type of the spinning to a specific frame, see also cueFrames
spinOnClick	bool	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%.
spinAreaDisable	bool	Ver. 3.1.0+ Disable spinning for the zoom area, see this example
gallerySlideNavi	bool	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
spinSlider	bool	Ver. 3.0.2+ Enable UI slider as additional control for spinning.
spinSliderHeight	int	Ver. 3.0.2+ Height or thikeness of the slider in px.
spinSliderHandleSize	int	Ver. 3.0.2+ Height or thikeness of the slider handle in px.
spinSliderWidth	mixed	Ver. 3.0.2+ Width of the slider. false (auto width) or integer in px;
spinSliderPosition	string	Ver. 3.0.2+ Position of the slider. Possible values: naviTop, naviBottom, top, bottom
spinSliderContainerHeight	int	Ver. 3.0.2+ Height of the parent container in px.
spinSliderContainerPadding	int	Ver. 3.0.2+ Padding of the slider container in px.
spinSliderTopMargin	int	Ver. 3.1.0+ Top Margin of the spin slider in px.
spinSliderFSoffset	int	Ver. 4.0+ Margin from bottom edge at fullscreen mode.
spinSliderPlayButton	bool	Ver. 3.1.0+ Play / pause button left to the spin slider.
spinSliderReverse	bool	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
displayNavi	bool	Eneable (display) regular navigation bar. For disabling / enabling in the fullscreen mode please set fullScreenNaviBar option.
firstMod	string	Ver. 3.0.1+ First switched tool on load. Poosible values: crop, pan, spin
keyPressMod	array	Ver. 4.0+ Quickly switch between crop, pan or spin using keyboard keys (experimental).
forceToPan	bool	Ver. 3.0.1+ Instantly switch to pan when reached 100% zoom level.
naviPos	type	Navigation position, possible values: 'top' or 'bottom'
naviFloat	string	Navigation gravity, possible values: 'left' or 'right'
naviHeight	int	Height of navigation container in px, e.g. 48
naviSpace	int	Space between buttons of one group in px, e.g. 5
naviGroupSpace	int	Space between groups of buttons in px, e.g. 10
naviMinPadding	int	Minimal padding of navigation container left and right in px, e.g. 5
naviTopMargin	int	Top margin of navigation container in px, e.g. 2
naviBigZoom	bool	Enable big buttons for zoom in and zoom out (the plus and minus buttons)
naviDownState	bool	Ver. 4.0+ Enable a different icon when mouse is down of the regular navigation button.
naviOverState	bool	Ver. 4.0+ Enable a different icon when mouse is over the regular navigation button.
naviZoomBut	bool	Display zoom in and zoom out buttons.
naviPanBut	bool	Display pan buttons set (the left, top, right and bottom arrows)
naviRestoreBut	bool	Ver. 4.0+ Display restore button.
naviHotspotsBut	bool	Ver. 4.0+ Display button for toggling hotspots.
naviCropButSwitch	bool	Ver. 3.0.1+ Display crop switch button.
naviPanButSwitch	bool	Ver. 3.0.1+ Display pan switch button
naviSpinButSwitch	bool	Ver. 3.0.1+ Display 3D spin switch button.
zoomLogInfoDisabled	bool	Ver. 3.0.1+ Completely disable zoom level.
zoomLogInfo	bool	Along with zoom level the time needed to generate the zoomed picture and the overall image traffic will be shown. CSS: .zoomLogHolder, .zoomLog
zoomLogJustLevel	bool	Diplay only the zoom level. If true - disable zoomLogInfo above. CSS: .zoomLogHolder, .zoomLogJustLevel
deaktTransp	float	Opacity for deactivated bottons, [0-1], e.g. 0.5
disabledTransp	float	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
zoomSlider	bool	Ver. 3.0.2 Enable vertical UI slider for zoom in and out
zoomSliderHorizontal	bool	Ver. 3.3.0 Patch: 2011-12-27 Enable horizontal slider.
zoomSliderHeight	int	Ver. 3.0.2 Height of the vertical slider in px.
zoomSliderHandleSize	int	Ver. 3.0.2 Height or thikeness of the slider handle in px.
zoomSliderWidth	int	Ver. 3.0.2 Width or thikeness of the slider in px.
zoomSliderPosition	string	Ver. 3.0.2 Position of the slider. Possible values: topRight, topLeft, bottomRight, bottomLeft, top, bottom Ver. 4.0+ added: left, right
zoomSliderMarginV	int	Ver. 3.0.2 Vertical margin of the slider in px.
zoomSliderMarginH	int	Ver. 3.0.2 Horizontal margin of the slider in px.
zoomSliderOpacity	float	Ver. 3.0.2 Opacity of the slider [0.0 - 1.0], diabled for MSIE.
zoomSliderContainerPadding	int	Ver. 4.0+ Padding of the parent container which can be styled with css - #zoomSliderZoomContainer
zoomSliderMouseOver	bool	Ver. 4.0+ Show zoom slider only when mouse is over the player. Disabled for touch devices.
Language vars log
zoomLogLevel	string	Zoom level text string, e.g. 'Zoom Level:'
zoomLogTime	string	Time needed to generate the zoomed picture, e.g. 'Zoom Time:'
zoomLogTraffic	string	Traffic, e.g. 'Zoom Traffic:'
zoomLogSeconds	string	Seconds, e.g. 'sec.'
zoomLogLoading	string	Loading message, e.g. 'Loading...'
Help (Info) button
help	bool	Enable help (Info) button.
helpTransp	float	Opacity of Help (Info) container, e.g. 0.95
helpTime	int	Help (Info) container transition time in ms, e.g. 300
helpMargin	int	Margin in px of help container within the stage, e.g. 20
helpTxt	string	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;
helpUrl	string	Instead of the option helpTxt load an external url into the help / info container as iframe.
Button icons
buttonSet	string	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.
icons	array	Multidimensional array with icons parameter for each button in the navigation. See the source code in
mapButTitle	array	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	array	Ver. 4.0+, multidimansional array with parameters for mobile navibar and buttons.
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['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
pMove	int	By clicking on a pan button in the navigation bar the image will be paned by this percentage of visible area, e.g. 75
pZoom	int	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)
stepZoom	bool	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% ...
autoZoom	array	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'.
pZoomOut	int	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).
zoomSpeedGlobal	int	Default speed for motions in ms, e.g. 500
moveSpeed	int	Motion speed in ms by clicking on arrows in navigation bar , e.g. 750
zoomSpeed	int	Motion speed by clicking on plus in navigation or left clicking the image in ms, e.g. 750
zoomOutSpeed	int	Motion speed by clicking on minus in navigation or right clicking the image, e.g. 750
cropSpeed	int	Motion spped for zoom in by selecting an image area in ms, e.g. 750
restoreSpeed	int	Motion speed by clicking on restore button in ms, e.g. 750
traverseSpeed	int	Sidewords motion speed in ms when reached 100% zoom and left clicked on image, e.g. 300
zoomFade	int	Fade in time in ms of zoomed image after it has been loaded, e.g. 200 (0 for disabling fade in effect)
zoomFadeIn	int	Fade in time of the first image loaded in ms, e.g. 300
buttonAjax	int	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
zoomEaseGlobal	string	Default motion type, e.g. 'easeOutCirc'
zoomEaseIn	string	Motion for zoom in by clicking the plus button or the image, e.g. 'easeOutCirc'
zoomEaseOut	string	Motion zoom out on clicking minus or right click the image, e.g. 'easeOutCirc'
zoomEaseCrop	string	Motion for zoom in by selecting an image area, e.g. 'easeOutCirc'
zoomEaseMove	string	Sideward motion on clicking the arrow buttons in navigation, e.g. 'easeOutCirc'
zoomEaseRestore	string	Motion on clicking the restore button, e.g. 'swing'
zoomEaseTraverse	string	Motion when reached 100% zoom and clicking the image, e.g. 'easeOutCirc'
fps1	string	Ver. 3.2.0+ Frames per second for all animations or false
fps2	string	Ver. 3.2.0+ Frames per second for all animations at fullscreen mode or false
gpuAccel	array	Ver. 4.0.3+ Enable GPU rendering (translateZ) for desktop browsers
Mousewheel Zoom In and Out
Option	Type	Description
scroll	bool	Enable mousewheel zooming.
mouseScrollEnable	bool	Ver. 3.0.2+ Enabling this option will not prevent scrolling the browser window with the mousewheel.
scrollAnm	bool	Enables / disables animation during mousewheel zoom in and out. If disabled the options scrollSpeed, scrollMotion and scrollPause have no effect!
scrollZoom	int	Percentage of zoom in / out on each mousewheel scroll. 16 is a good value, if scrollAnm is deactivated and 35 if scrollAnm is activated.
scrollAjax	int	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.
scrollSpeed	int	If scrollAnm is true the duration of animation effect, e.g. 1500
scrollMotion	string	If scrollAnm is true the animation motion type. 'easeOutQuad' is a good one.
scrollPause	int	Disables scroll tick for this time period in ms. Helps to prevent to fast scrolling, e.g. 100
scrollBrowserExcl	array	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'
scrollBrowserExclPar	array	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;
scrollPanR	int	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
scrollOutReversed	bool	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.
scrollOutCenter	bool	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
zoomDragPhysics	bool	Enables acceleration of the mouse while dragging resulting in a throw effect.
zoomDragAnm	bool	Ver. 2+; Animate images while dragging (smooth motion). Not recommended, if image tiles are loaded directly.
zoomDragSpeed	int	Time im ms the image needs to fully reach the mouse position on drag if zoomDragAnm is activated, e.g. 1000
zoomDragMotion	string	Type of drag motion, e.g. 'easeOutCirc'.
zoomDragAjax	int	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
zoomSelectionColor	string	Color inside the selector, e.g. '#006600' or 'green', false to disable - makes image area selector a bit faster.
zoomSelectionOpacity	float	Selector opacity, [0-1], e.g. 0.2
zoomOuterColor	string	Color outside the selector, false to disable - makes image area selector a bit faster.
zoomOuterOpacity	float	Opacity outside the selector, [0-1], e.g. 0.4
zoomBorderColor	string	Selector border color, e.g. '#006600' or 'green',
zoomBorderWidth	int	Selector border width in px, e.g. 1
zoomSelectionAnm	bool	Expand effect after the selection of imagearea.
zoomSelectionCross	bool	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.
zoomSelectionCrossOp	float	Cross opacity, see zoomSelectionCross, e.g. 0.75
zoomSelectionMod	string	Ver. 3.3.0+ Zoom selector mod, possible values 'min' or 'max'.
zoomSelectionProp	string, 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
pssBar	bool	Enable progressbar.
pssBarP	string	Progressbar position or gravity. Possible values: 'bottom', 'top' and 'center'.
pssBarH	int	Progressbar height in px, CSS: .zoomBar
pssBarM	int	Progressbar margin in px from top or bottom, depending on pssBarP.
pssBarMS	int	Progressbar margin from left and right. While pssBarM value would shift the progressbar vertically, this option will cut the progressbar from both sides.
pssBarO	float	Progressbar opacity, [0-1], e.g. 0.7
Ajax Loader
Option	Type	Description
zoomLoaderEnable	bool	Enable ajax loader (animated icon on top of the image during loading process).
zoomLoaderClass	int	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.
zoomLoaderTransp	type	Loader opacity, [0-1], e.g. 0.9
zoomLoaderFadeIn	int	Fade in speed of the loader in ms, e.g. 500
zoomLoaderFadeOut	int	Fade out speed of the loader in ms, e.g. 500
zoomLoaderPos	string	Position or gravity of the loader, possible values: 'Center', 'TopLeft', 'TopRight', 'BottomLeft' or 'BottomRight'
zoomLoaderMargin	int	Margin in px for loader position. Does not apply, if zoomLoaderPos (loader position) value is 'center'.
zoomLoaderFrames	int 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.
zoomLoaderCycle	int	Loop time (cycle time) in ms, 1000
Mixed Options
Option	Type	Description
cursorWait	bool	Enable system wait cursor on image load.
disableAllMsg	bool	Ver. 3.0.2+ Disable all error and notification messages.
fullZoomBorder	float	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
fullZoomOutBorder	float	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
zoomTimeOut	int	Timeout for ajax zoom request in ms, e.g. 10000 or false for disabling.
zoomWarningBrowser	bool	Display warning for not supported ancient browsers. IE 6.0 is supported!
msInterp	bool	Use bicubic interpolation for IE Ver. prior to 8
errors	bool	Display errors.
licenseErrors	bool	Ver. 4.0+ Display license errors. Before version 4.0 license errors did not display if errors options was not set.
warnings	bool	Display warnings.
useSess	bool	Use session cookies for storing some imformation.
cache	bool	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.
cacheTime	type	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
picChmod	array	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.
cornerRadius	int	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.
innerMargin	int	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.
zoomStat	bool	Append a div under navigation to display some information, mainly framerate during zoom for testing purposes. Switch it off after testing.
zoomStatHeight	int	Height in px of the appended div (zoomStat).
layHorCenter	bool	Center AJAX-ZOOM horizontally within the parent container.
layVertCenter	mixed	Center AJAX-ZOOM vertically. An integer sets top margin, true will center AJAX-ZOOM within the parent container.
layVertBotMrg	int	Bottom margin of AJAX-ZOOM container in px.
allowDynamicThumbs	bool	Ver. 3.1.0+ Allow to generate image thumbs dynamically by passing the values to "/axZm/zoomLoad.php"
allowDynamicThumbsMaxSize	int	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.
dynamicThumbsMaxCacheTime	int	Ver. 4.0+ Sets Cache-Control: maxage header for the dynamically generated images
tapHideAll	bool	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.
zoomDoubleClickTap	int	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.
touchSettings	array	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();
Watermark
with PNG image, text or both
Option	Type	Description
watermark	bool	Enable watermark with an PNG image. ~~Does not work in demo mode, see licenceKey~~.
wtrmrk	array	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
text	bool	Enable watermark as text. ~~Does not work in demo mode, see licenceKey.~~
txt	array	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
vWtrmrk	string, 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
pyrTiles	bool	Enable image pyramid with tiles.
pyrDialog	bool	Display info dialog after tiles have been made on the fly. Happens only once for each image.
pyrQual	int	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.
pyrQualPng	array	Ver. 4.0+ Quality for tiles under pngMode
tileSize	int	Size of the tiles in px, [128-768], e.g. 256 or 384
pyrAutoDetect	bool	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.
pyrTilesPath	string	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!
pyrChmod	int	Chmod for the new created subfolders, where the tiles will be stored separately for each image, e.g. 0755
pyrChmodAll	bool	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.
pyrProg	string	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.
pyrProgImLimit	array	Only for ImageMagick: limit memory and other settings for making tiles. http://www.imagemagick.org/script/command-line-options.php#limit
pyrProgErrorRemove	bool	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.
pyrIMcacheLimit	float	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.
pyrStitchProg	string	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.
pyrStitchImLimit	array	Only for imagemagick: limit memory and other settings for stitching tiles. http://www.imagemagick.org/script/command-line-options.php#limit
pyrStitchSel	float	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.
pyrLoadTiles	bool	Ver. 2+; Load tiles directly without stitching them server side. Increases speed and user experience, reduces operational demands to server hardware.
pyrTilesFadeInSpeed	int	Ver. 2+; If pyrLoadTiles is activated, the image tiles fadein speed in ms.
pyrTilesFadeLoad	int	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
fullScreenEnable	bool	Enable fullscreen mode.
fullScreenNaviButton	bool	Enable fullscreen button in the navibar.
fullScreenCornerButton	bool	Enable fullscreen button at the top right corner.
fullScreenCornerButtonPos	string	Next Update: Position of the fullscreen button image, possible values: topLeft, topRight, bottomLeft, bottomRight
fullScreenCornerButtonFileInit	string	Next Update: Filename of the fullscreen Init button located in /axZm/icons directory; Depreciated in Ver. 4.0+
fullScreenCornerButtonFileRestore	string	Next Update: Filename of the fullscreen Restore button located in /axZm/icons directory; Depreciated in Ver. 4.0+
fullScreenCornerButtonMarginX	int	Ver. 4.0+ Horizontal distance of the fullscreen button to the edge of the player.
fullScreenCornerButtonMarginY	int	Ver. 4.0+ Vertical distance of the fullscreen button to the edge of the player.
fullScreenCornerButtonMouseOver	bool	Ver. 4.0+ Enable mouseover state of the fullscreen button.
fullScreenNaviBar	bool	Enable navi bar at fullscreen mode.
fullScreenGallery	bool	Depreciated in Ver. 4.0+ Show gallery in fullscreen mode. Must be enabled in not fullscreen mode too.
fullScreenVertGallery	bool	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!
fullScreenHorzGallery	bool	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!
fullScreenExitText	string, bool	Show text about using ESC to exit the fullscreen mode on entering (flash like option). If false, disabled.
fullScreenExitTimeout	int	Time in ms after which the ESC message disappears.
fullScreenRel	string	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.
fullScreenMapFract	float, 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.
fullScreenMapWidth	int, bool	Fixed width of the Zoom Map in px. at fullscreen mode. See also mapWidth
fullScreenMapHeight	int, bool	Fixed height of the Zoom Map in px. at fullscreen mode. Siehe auch mapHeight
fullScreenKeepZoom	array	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.
fullScreenApi	bool	Ver. 4.0+ Enable native fullscreen JavaScript API if supported by the browser.
Download
Ver. 3.3.0+ Patch: 2011-10-17 Download full sized image
Option	Type	Description
allowDownload	bool	Allow to download full sized / original image or full image in certain resolution.
downloadButton	bool	Enable download button in the navi bar.
downloadRes	mixed	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);
downloadQual	int	Output quality of the jpg image if $zoom['config']['downloadRes'] is not false.
downloadQualPng	array	Ver. 4.0+ Output quality of the PNG image if $zoom['config']['downloadRes'] is not false.
downloadCache	bool	Cache files in $zoom['config']['downloadRes'] resolution once they have been downloaded by a user.
Hotspots
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
Value	Default	Description
shape	'point'	Shape of the hotspot. Possible values "point" or "rect", added Ver. 4.0.5; Type: bool
enabled	true	State of defined hotspot. Possible values true and false, added Ver. 4.0.5; Type: bool
width	32	Width of the hotspot image, only applied if shape value is "point". Type: integer
height	32	Height 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
offsetX	0	Adjustment of hotspots horizontal visual position. Only applied if shape value is "point". Type: integer
offsetY	0	Adjustment of hotspots vertical visual position. Only applied if shape value is "point". Type: integer
padding	0	Padding of the box with hotspot image and/or text. Type: integer
opacity	1	Default opacity, disabled in IE < 9; Type: float <= 1.0
opacityOnHover	1	Opacity on mouse hover, disabled in IE < 9; Type: float <= 1.0
backColor	'none'	Background color, added Ver. 4.0.5; Type: string
zIndex	1	zIndex of the hotspot. Type: integer
borderWidth	0	CSS 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
zoomRangeMin	0	Min zoom level for hotspot to be shown, added Ver. 4.0.6; Type: 0 <= integer <= 100
zoomRangeMax	100	Max 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
hotspotImageOnHover	false	PNG 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
hotspotText	false	Text 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
hotspotTextFill	false	If 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
hotspotTextClass	false	Additionally 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
altTitle	false	Show system like tootip by mousehover if main tooltip is triggered on click (toolTipEvent); CSS class: axZmHoverTooltip; Type: false or string
altTitleClass	false	CSS class for altTitle instead of axZmHoverTooltip class, added Ver. 4.0.6; Type: false or string
altTitleAdjustX	20	Horizontal offset of the altTitle, added Ver. 4.0.6; Type: integer
altTitleAdjustY	20	Vertical offset of the altTitle, added Ver. 4.0.6; Type: integer
labelTitle	false	Sticky 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
labelBaseOffset	5	Auto offset in all directions, added Ver. 4.0.6; Type: integer
labelOffsetX	0	Horizontal offset, added Ver. 4.0.6; Type: integer
labelOffsetY	0	Vertical offset, added Ver. 4.0.6; Type: integer
labelClass	false	CSS class instead of axZmHotspotLabel, added 4.0.6; Type: false or integer
labelOpacity	1	Opacity level, added 4.0.6; Type: float <= 1.0
toolTipTitle	false	Title shown in the tooltip; Type: false or string
toolTipHtml	false	Text 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
toolTipAjaxUrl	false	Url for toolTipHtml get from AJAX request (not cross site, for cross site use an iframe inside toolTipHtml); Type: false or string
toolTipWidth	250	Width of the tooltip, ignored when toolTipGravity is set to fullsize or fullscreen! Type: integer
toolTipHeight	120	Min 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
toolTipGravFixed	false	Applies fixed position to toolTipGravity except 'fullsize', 'hover' turns into centered position. Type: bool
toolTipFullSizeOffset	40	toolTipGravity 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
toolTipTitleCustomClass	false	Use specific classname instead of axZmToolTipTitle, added Ver. 4.0.5; Type: false or string
toolTipCustomClass	false	Use specific classname instead of axZmToolTipInner. Type: false or string
toolTipAdjustX	10	Horizontal offset. Type: integer
toolTipAdjustY	10	Vertical offset; Type: integer
toolTipAutoFlip	true	Flip tooltip horizontaly / vertically depending on best fit. Type: bool
toolTipOpacity	1.0	Opacity of the tooltip. Type: float <= 1.0
toolTipFade	false	Fade tooltip time in ms. Type: false or integer
toolTipEvent	'click'	'mouseover' or 'click', defaults to 'click' on touch devices. Type: string
toolTipHideTimout	1000	If toolTipEvent is 'mouseover' this setting allows to move the cursor to the tooltip within this time. Type: integer
toolTipDraggable	true	Set 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
toolTipCloseIconOffset	false	Offset / 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
toolTipCloseIconMouseOver	false	Show close button also if toolTipEvent is 'mouseover'. Type: bool
toolTipOverlayShow	false	Show overlay when tooltip window pops up, added Ver. 4.0.5; Type: bool
toolTipOverlayOpacity	0.75	Overlay opacity, added Ver. 4.0.5; Type: float <= 1
toolTipOverlayColor	'#000000'	Overlay color, added Ver. 4.0.5; Type: integer
toolTipOverlayClickClose	false	Close tooltip by clicking on the overlay, added Ver. 4.0.5; Type: bool
href	false	Simple link for the hotspot.
hrefTarget	'_blank'	Target for href (simple link), possible values: _blank (new window), anything else is same window. Type: string
click	null	Your 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.
mouseover	null	Your custom mouseover event function
mouseout	null	Your custom mouseout event function
mouseenter	null	Your custom mouseenter event function
mouseleave	null	Your custom mouseleave event function
mousedown	null	Your custom mousedown event function
mouseup	null	Your 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%').

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.zoomedImage	Path to the zoomed image, e.g '/pic/temp/zoom_qqx23igkzgvdckfhcr4gvmwcbecopr4g.jpg'
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.
jQuery.axZm.userFunc	Callback functions (see below) are stored in this var and can be also changed after initialization.
jQuery.axZm.zoomGA	JS object containing all information about gallery images.

Callbacks

AJAX-ZOOM has some callbacks that 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.

Except the callback functions 'onBeforeStart', 'onStart', 'onLoad' and 'onFullScreen...' actions to all other callbacks one argument is passed with some useful data. The arguments name is 'info' and it is an array-like object.

Array-like object 'info' passed to callbacks

info.viewport	object, containing x, y coordinates of the mouse position related to the original sized image.
info.click	object, containing x, y coordinates of the click event
info.crop	object, containing x1, y1, x2, y2 coordinates of the cropping area related to the original sized image.
info.selector	object, containing x1, y1, x2, y2, width, height coordinates of the selection area (passed while selection of the image area).
info.zoomRatio	float, zoom Ratio: 1 - no zoom (pan), less than 1.0 - zoom out, bigger than 1.0 - zoom in

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 zoom out action.
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.
onZoomInClickStart	Triggers after the user clicks on the image to zoom in. Ver. 3.3.0 Patch 2011-08-22: if this function returns false the zooming action does not take place! Useful if you want to inspect the coordinates of the click and open a popup for this hotspot...
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.
onCropEnd	Triggers after the zoomed image portion is croped and loaded / image tiles are loaded.
onRestoreEnd	Triggers while the image zooms back to initial stage (full image visible).
onFullScreenStart	Ver. 3.2.0+ Triggers when initializing the fullscreen.
onFullScreenStart	Ver. 4.0.4+ Triggers when initializing the fullscreen from relative sized AJAX-ZOOM.
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.
onFullScreenCloseEnd	Ver. 4.0+ Triggers at the end of restore process from fullscreen to normal mode.
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.

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!
Parameter:	@param object options - custom callback functions
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.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.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.fullGalToggle ()

Description:

Toggle "Inline Gallery".

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.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.openFullScreen (path, parameter, callbacks, target, apiFullscreen, disableEsc)

Description:	Ver. 3.2.0 Open AJAX-ZOOM directly at fullscreen mode.
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 function @param string target: Ver. 3.3.0 Patch: 2012-03-11 - on default the target is browser window. You can optionally set some other container 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.
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

jQuery.fn.axZm.loadAjaxSet (query_string, callback)

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: 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.
Parameter:	@param object options @option string path: Absolute path of AJAX-ZOOM, e.g. '/axZm/' @option string parameter: Query string to determin which images to load (see jQuery.fn.axZm.loadAjaxSet) @option string divID: Target ID of the container
Example:	<a href="#" onClick="jQuery.fn.axZm.load({path: '/axZm/', parameter: 'zoomDir=high_res&example=13', divID: 'test'});">Load AJAX-ZOOM</a>

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. Normally initial image loads when it is selected from the gallery, by API function jQuery.fn.axZm.zoomSwitch (zoomID) or when diashow is runnig.

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.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)

Description:	Ver. 3.3.0+ Patch: 2011-10-17 Start spinning 360 object.
Parameter:	@param int rounds: number rounds. @param int roundTime: time in ms for one round. @param bool mouseOverStop: Stop spinning when mouse is over the image.
Example:	<a href="#" onClick="jQuery.fn.axZm.spinStart(9999, 1500, false);"Start spin</a>

jQuery.fn.axZm.spinStop ()

Description:	Ver. 3.3.0+ Patch: 2011-10-17 Stop spinning 360 object.
Example:	<a href="#" onClick="jQuery.fn.axZm.spinStop();"Stop spin</a>

jQuery.fn.axZm.spinTo (frame_number, speed, easing, callback)

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 (recommended) @param string easing: easing, e.g. 'swing', default - spinToMotion @param function callback: Ver. 4.0+ callback function
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)

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
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>

Ver. 3.0.2+ 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()

Description:	Reset the view to initial state.
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)

Description:	Switch to a specified image contained in the gallery.
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
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.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 (name, posObj, autoPos, draggable, noInit)

Description:

Ver. 4.0+ Create new hotspot

Parameter:

@param mixed name: if string - name of the hotspot, if object - more options and settings can be passed, changed Ver. 4.0.5
@param object posObj: optional object with coordinates
@param bool autoPos: place hotspots on all frames
@param bool draggable: make hotspots draggable
@param string shape: shape of the hotspot, possible values are 'point' and 'rect', added Ver. 4.0.5

Example:

	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: true, // 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(){
				// do something
			}
		}
	});

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)

Description:	Ver. 4.0+ Init / rebuild hotspots
Parameter:	@param object hSpot: optional object replacing jQuery.axZm.hotspots
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)

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
Example:	<a href="#" onClick="jQuery.fn.axZm.hotspotsDraggable()">Dragable hotspots</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 ()

Description:	Ver. 4.0.5+ Simply remove and delete all hotspots.
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. speed (integer): speed in ms easing (integer): easing type, e.g. "easeOutElastic"
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>

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)

Description:	Generate initial image
Parameter:	@param array $zoom - Array with all configuration parameters.

$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.

$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.

$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.0.9 Date: 2013-05-20	Important bugfix release Updated files: /axZm/jquery.axZm.js
Ver. 4.0.8 Date: 2013-04-14	Couple smaller bugfixes, new API. Updated files: /axZm/jquery.axZm.js /examples/example15_fullscreen.php /examples/example23.php /examples/example28_fullscreen.php /examples/example33.php /examples/example33_*.php New API: jQuery.fn.axZm.tapHide jQuery.fn.axZm.tapShow jQuery.fn.axZm.tapToggle Updated API: jQuery.fn.axZm.openFullScreen 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: jsUiSuppressJS jsUiSuppressCSS 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: zoomDoubleClickTap Updated options: tapHideAll spinPreloaderSettings touchSettings New API: jQuery.fn.axZm.setHotspotDefaults jQuery.fn.axZm.zoomToHotspot
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	Countless bugfixes, improvements and new features. Following are some of them: Most noteable is the hotspot feature. AJAX-ZOOM is distributed with online hotspot configurator which can be integrated into any CMS or webstore backend. Brand new mouseover (flyout) zoom extension for preview in middle resolution and high resolution zoom with AJAX-ZOOM. Better support for liquid layout (responsive design). AJAX-ZOOM can be triggered within liquid layout parent container and expanded to fullscreen (was not possible in 3.3). Preserve zoom state when switching to and from fullscreen (optionally) Support for browsers fullscreen-API $.fn.axZm.zoomTo has been completely rewritten and bugfixed. It now works at fullscreen. Only two coordinates x, y along with zoomLevel are needed to zoom to a certain point. Much less interaction with the server. More flexibility for built-in galleries. Vertical or horizontal galleries can be configured to be displayed only at fullscreen mode or other way around. Horizontal gallery supports swipe for touch devices. Touch swipe images on mobile devices. jQuery 1.8+ support. Custom cursors. Many new callbacks and API functions. API functions have been extended with callbacks as well. Keyboard support for basic features like 360 spinning. Brand new navigation bar with freely configurable buttons order, type and custom buttons. Old navigation bar improved. Any option can be set for touch devices separately now. PNG mode: all images including image tiles can be generated as png with transparency. User defined CSS file for better upgradeability. Bounce for 360 spins. New options: memory_limit dynamicThumbsMaxCacheTime naviDownState naviOverState licenseErrors fullScreenCornerButtonMarginX fullScreenCornerButtonMarginY fullScreenCornerButtonMouseOver spinSliderReverse spinSliderFSoffset spinKeys keyPressMod fullScreenVertGallery fullScreenHorzGallery gallerySwipe gallerySlideNavi gallerySlideNaviMouseOver gallerySlideNaviOnlyFullScreen gallerySlideNaviAnm galleryFill galleryFilterIM galleryFilterGD galleryCssFirstTopMargin zoomSliderMouseOver zoomSliderContainerPadding zoomMapSelBorder mapHorzMargin mapVertMargin mapOpacity mapOwnImage mapPath mapDir mapFilterIM mapFilterGD stepZoom fullScreenKeepZoom fullScreenApi imKeepProfiles pngMode pngKeepTransp qualPng initPicQualPng galleryPicQualPng pyrQualPng downloadQualPng tapHideAll touchSettings jsUiVer jsUiTheme naviRestoreBut naviHotspotsBut touchSettings galleryNaviHeight Updated options: scrollBrowserExcl galleryFadeInAnm zoomSliderPosition icons autoZoom spinPreloaderSettings zoomShowButtonDescr fullScreenCornerButtonFileInit - depreciated fullScreenCornerButtonFileRestore - depreciated fullScreenGallery - depreciated, use fullScreenVertGallery or fullScreenHorzGallery instead. New API: $.fn.axZm.getCurrentZoom $.fn.axZm.getLastZoomInfo $.fn.axZm.getCurrentZoomLevel $.fn.axZm.stopPlay $.fn.axZm.startPlay $.fn.axZm.reloadGallery $.fn.axZm.reloadHorGallery $.fn.axZm.installPath $.fn.axZm.fullGalShow $.fn.axZm.fullGalHide $.fn.axZm.spinBy $.fn.axZm.preloadAllGalleryThumbs $.fn.axZm.preloadAllInitialPic $.fn.axZm.preloadPrevNextImg $.fn.axZm.getImagePath $.fn.axZm.fillArea $.fn.axZm.panTo $.fn.axZm.getBackColor $.fn.axZm.createNewHotspot $.fn.axZm.deleteHotspot $.fn.axZm.initHotspots $.fn.axZm.getHotspotDefaults $.fn.axZm.getHotspotObj $.fn.axZm.getHotspotPositions $.fn.axZm.getHotspotPosition $.fn.axZm.hideHotspotLayer $.fn.axZm.hotspotsDraggable $.fn.axZm.loadHotspotsFromJsFile $.fn.axZm.toggleHotspotFrame $.fn.axZm.showHotspotLayer $.fn.axZm.toggleHotspotLayer Updated API: $.fn.axZm.zoomPrevNext $.fn.axZm.zoomSwitch $.fn.axZm.loadAjaxSet $.fn.axZm.spinTo $.fn.axZm.zoomTo $.fn.axZm.zoomIn $.fn.axZm.zoomOut $.fn.axZm.openFullScreen New callbacks: onZoom onZoomTo onSpinChange onStartPlay onStopPlay onFullScreenCloseEnd onFullGalShow onFullGalHide onStartSpin onStopSpin
Ver. 3.3.0 Date: 2011-08-03	Runs very smooth on iPad now. Vertical gallery works much better on touch devices. Requires less memory. Some bugfixes and improvements. Updated files: /axZm/axZm.class.ioncube.php and /axZm/axZm.class.ixed.php (code change). /axZm/jquery.axZm.js (code change). /axZm/axZmH.class.php /axZm/zoomConfig.inc.php; new / changed options spinOnClick - If activated and spin tool is selected clicking on the image will result into spinning the object, otherwise it will zoom to 100% zoomSelectionMod - Zoom selector mod zoomSelectionProp - Proportions of the selector. New files: /examples/example24.php /axZm/plugins/iScroll/. Patches: 2011-09-18: Many fixes, Magento implementation can now be displayed in many mods, see demo page. New options: disableZoom disableZoomExcept mapParCenter Updated files: /axZm/axZm.class.ioncube.php and /axZm/axZm.class.ixed.php (code change). /axZm/jquery.axZm.js (minor code change). /axZm/axZmH.class.inc.php /axZm/zoomConfig.inc.php (new options) /axZm/zoomConfigCustom.inc.php (changes Magento) /axZm/axZmSpinGif.php /axZm/mods/magento/media.phtml (complete rewrite) /axZm/mods/magento/magento_axZm.js (complete rewrite) New files: /axZm/zoomLoad360.php /axZm/axZm.class.zend.php (zend encoded version) 2011-09-20: Embarrassing: forgot to remove console.log and alert after testing. Improvements for Safari and minor bugfixes. Updated files: /axZm/jquery.axZm.js (minor code change). 2011-10-03: Fixed js error when diolog about generating tiles etc. is triggered on some examples. Updated files: /axZm/jquery.axZm.js (minor code change). 2011-10-20: Some bugfixes, ASP.NET implementation with Phalanger, new options: exifAutoRotation allowDownload downloadButton downloadRes downloadQual downloadCache New API methods: jQuery.fn.axZm.spinStart $.fn.axZm.spinStop $.fn.axZm.downloadImg Updated files: /axZm/jquery.axZm.js (minor code change). /axZm/axZm.class.ioncube.php, /axZm/axZm.class.ixed.php and /axZm/axZm.class.zend.php (code change). /axZm/axZmH.class.inc.php /axZm/zoomObjects.inc.php /axZm/zoomInc.inc.php (ASP.NET Phalanger) /axZm/zoomConfig.inc.php (new options) /examples/example25.php /index.php New files: /axZm/zoomDownload.php /axZm/classes/pel/ (empty directory) /axZm/bin/axZm.dll (ASP.NET Phalanger) web.az.config (ASP.NET Phalanger) 2011-10-23: Fixed iOS5 on iPad, example3.php updated, lightboxes in the examples updated / slightly changed Updated files: /axZm/jquery.axZm.js (minor code change). /axZm/axZmH.class.inc.php /examples/example3.php /examples/example25.php /axZm/plugins/demo/colorbox/. /axZm/plugins/demo/jquery.fancybox/. 2011-11-03: Some fixes for iOS5 on iPad. Updated files: /axZm/jquery.axZm.js (minor code change). 2011-12-18: Couple fixes for IE6 & IE7. Updated files: /axZm/jquery.axZm.js (minor code change). 2011-12-26: Accelerated spin slider response for Mozilla 4+ New option: zoomSliderHorizontal Updaed option: zoomSliderPosition Updated files: /axZm/jquery.axZm.js (minor code change). /axZm/zoomConfig.inc.js (new option). /axZm/axZmH.class.php 2012-01-18: Some fixes for iPad Pinch Zoom (beta) Updated files for Phalanger 3.0 Updated files: /axZm/jquery.axZm.js web.az.config /bin/axZm.dll 2012-01-22: Some improvements for pinch zoom on touch devices. Updated files: /axZm/jquery.axZm.js 2012-01-24: Couple optimizations & bugfixes. Major speed improvements for Magento / XTC implementations when using 360 degree views. Updated files: /axZm/jquery.axZm.js /axZm/mods/magento/magento_axZm.js /axZm/mods/xtc/xtc_axZm.js 2012-01-30: Support for Z axis (Vertical, Multirow). Bugfixes. Some new options. Updated files: /axZm/jquery.axZm.js (code change) /axZm/axZmH.class.php (code change) /axZm/zoomObjects.inc.php (code change) /axZm/zoomConfig.inc.php, new options: spinSensitivityZ spinReverseZ spinFlip firstAxis 2012-02-12: Added mouseover pan for zoom map, best used for flyout zoom like in example20.php. Hopefully fixed a problem when the zoomed image did not get sharp sometimes. New callback - onSpinPreloadEnd. Updated files: /axZm/jquery.axZm.js (code change) /axZm/axZmH.class.php (code change) /axZm/zoomObjects.inc.php (code change) /axZm/zoomConfigCustom.inc.php (new options) /axZm/zoomConfig.inc.php, new options: mapMouseOver mapMouseWheel 2012-02-13: Updated example20.php. New callbacks - onMapMouseOverClick, onMapMouseOverDbClick. Fixed a bug where zoom map has not been placed correctly outside of AJAX-ZOOM when image has been switched in fullscreen mode. Updated files: /examples/example20.php /axZm/jquery.axZm.js /axZm/mods/magento/media.phtml 2012-02-14: Fixed a bug with zoom map introduced the day before. Sorry folks. Updated files: /axZm/jquery.axZm.js 2012-02-29: Several small fixes. Support for OXID Ver. 4.5+; Removed IE8 Warning in SSL mode. Updated files: /axZm/jquery.axZm.js /axZm/axZmH.class.php (code change) /axZm/plugins/jScrollPane/script/jquery.jscrollpane.js /axZm/plugins/jScrollPane/script/jquery.jscrollpane.min.js /axZm/mods/oxid/oxid_media.php 2012-03-06: Some minor improvements. Gallery of example15.php now takes multirow objects. Updated files: /axZm/zoomObjects.inc.php (sorting 3D images) /axZm/axZmH.class.php (code change) /examples/example15.php (rewritten) 2012-03-27: New example - example27.php. Couple minor improvements. Fancybox 1.3.4 added to download package. Updated files: /axZm/jquery.axZm.js (code change) New files: /examples/example27.php /axZm/plugins/demo/jquery.fancybox (Fancybox 1.3.4 added) 2012-04-13: New example - example28.php. Updated files: /axZm/jquery.axZm.js (code change) /axZm/zoomConfigCustom.inc.php (new option set for example28.php) /axZm/mods/magento/media.phtml /axZm/mods/magento/magento_axZm.js New files: /examples/example28.php /axZm/icons/button_iPad_. 2012-04-19: New example - example29.php, bug correction - switching none jpg images by passing file name (not id). New option: allowDynamicThumbsMaxSize. Better support for passing relative paths... Updated files: /axZm/jquery.axZm.js (code change) /axZm/zoomConfig.inc.php (new option allowDynamicThumbsMaxSize) /axZm/zoomConfigCustom.inc.php (new option set for example29.php) /axZm/zoomObjects.inc.php (support for relative paths) /axZm/zoomLoad.php (new option allowDynamicThumbsMaxSize implementation + relative paths) /examples/example28.php New files: /examples/example29.php /axZm/icons/button_iPad_. /axZm/icons/360.png, 360_1.png, 360_2.png, 3d_1.png, 3d_2.png 2012-04-20: minor bug correction for Magento implementation. Updated files: /axZm/mods/magento/magento_axZm.js (code change) /axZm/mods/magento/media.phtml (code change) /axZm/axZmSpinGif.php (code change) 2012-04-21: new options galleryThumbDesc and galleryThumbFullDesc; 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. Updated files: /axZm/jquery.axZm.js (code change) /axZm/zoomConfig.inc.php (new options) /axZm/axZmH.class.php (code change) /axZm/zoomObjects.inc.php (code change) 2012-05-06: new option notTouchUA. Updated files: /axZm/jquery.axZm.js (code change) /axZm/zoomConfig.inc.php (new option) /axZm/axZmH.class.php (code change) 2012-05-25: minor bugfixes causing warning messages. Updated files: /axZm/zoomObjects.inc.php (code change) /axZm/axZmH.class.php (code change) 2012-08-08: minor bugfixes, last path for version 3.3 Updated files: /axZm/mods/magento/magento_axZm.js /axZm/axZmH.class.php (code change) 2012-09-19: bugfix IE7/8 causing js engine to crash in some cases when loading images from cache in 360 / 3D. Switched to jQuery 1.7.2 on default; fix for jQuery 1.8+ will released in AJAX-ZOOM Ver. 4.0 Updated files: /axZm/jquery.axZm.js (code change) /examples/. 2012-10-09: some basic adjustments for IOS 6.0 mobile. Waiting for IOS 6.1 ... Updated files: /axZm/jquery.axZm.js (code change) 2012-10-16: fixes for mobile devices, android, ios5 & 6, better performance... Updated files: /axZm/jquery.axZm.js (code change) 2012-10-17: missed some logic by upgrade yesterday, now it should be good... Updated files: /axZm/jquery.axZm.js (code change) 2012-11-25: smoother animations on desktop browsers. Updated files: /axZm/jquery.axZm.js (code change)
Ver. 3.2.2 Date: 2011-07-15	Several bugfixes and improvements, IE9 optimization. Image tiles can be now watermarked and loaded directly! Improved handling of zoomify tiles format support for gigapix images (see this example). 360 Gigapix spins are possible too. 360 spins can now start from a specified key frame. Image map can be positioned at all corners. Generation of image tiles can be prevented while uploading images over FTP by placing an empty file 'upload.txt' in the same directory. AJAX-ZOOM "Demo version" is now "Light Version" and can be used on commercial websites for free. The limit is rised from 200 to 500 images. Updated files: /axZm/axZm.class.ioncube.php and /axZm/axZm.class.ixed.php (code change). /axZm/jquery.axZm.js (code change). /axZm/axZm.css (only axZmAlertBox changed). /axZm/axZmH.class.php /axZm/zoomConfig.inc.php; new / changed options spinWhilePreload - Spin the 360 object while preloading firstImageDialog - Confirm creating of the initial image mapPos - Positioning of the map implemented. $zoom['config']['wtrmrk']['watermarkTiles'] - Enable tiles watermarking $zoom['config']['wtrmrk']['file'] - Can now be anywhere. /axZm/zoomConfigCustom.inc.php (new example, new defaults). /axZm/zoomInc.inc.php (code change). /axZm/zoomSess.php (code change). index.php (added some compatibility tests). New files: /examples/example23.php /axZm/icons/watermark-tiles.png
Ver. 3.2.1 Date: 2011-06-10	Several bugfixes, mostly about fullscreen mode. Facebox plugin removed (previously it has been used for several notification alerts). Zoomify tiles format support for gigapix images (only for Unlimited version): now it is possible to show gigapix panoramas, images and gigapix 360 object spins even on low performance shared hosting Updated files: /axZm/axZm.class.ioncube.php and /axZm/axZm.class.ixed.php (code change). /axZm/jquery.axZm.js (code change). /axZm/axZm.css (some new classes at the end). /axZm/axZmH.class.php /axZm/axZmObjects.inc.php /axZm/zoomConfig.inc.php (new option jsUiAll). /axZm/zoomConfigCustom.inc.php (new example). New files: /examples/example22.php /axZm/plugins/jquery.ui/jquery-ui.js /axZm/plugins/jquery.ui/jquery-ui.min.js /axZm/icons/zoom_in1.png /axZm/icons/zoom_out1.png Patches: 2011-06-19: Some minor corrections. Fixed couple things for iPad. Updated files: /axZm/jquery.axZm.js (minor code change). /axZm/axZmH.class.inc.php /axZm/zoomObjects.inc.php
Ver. 3.2.0 Date: 2011-05-29	Fullscreen mode. Lots of new options. New Api methods and many callbacks. New example /examples/example21.php Old examples updated Fixed compatibility to jQuery 1.6.1, examples switched to jQuery 1.6.1 (do not use jQuery 1.6.0) jScrollPane plugin updated. Bugfixes. Updated files: /axZm/axZm.class.ioncube.php and /axZm/axZm.class.ixed.php (code change). /axZm/jquery.axZm.js (code change). /axZm/axZmH.class.php (updated methods: drawZoomJsConf, drawZoomBox, drawZoomStyle). /axZm/jquery.axZm.loader.js (load jQuery 1.6.1 on default if needed). /examples/example14.php, /examples/example15.php, /examples/example16.php, /examples/example17.php, /examples/example20.php /axZm/plugins/jquery.mousewheel.js and /axZm/plugins/jquery.mousewheel.min.js /examples/syntax.php /axZm/zoomConfigCustom.inc.php (new examples). /axZm/zoomConfig.inc.php, new options: imQuotes fullScreenEnable fullScreenNaviButton fullScreenCornerButton fullScreenNaviBar fullScreenGallery fullScreenExitText fullScreenExitTimeout fullScreenRel fullScreenMapFract fullScreenMapWidth fullScreenMapHeight fullScreenMapHeight scrollOutReversed scrollOutCenter scrollPaneTheme scrollPaneOptionsVert scrollPaneOptionsFull fps1 fps2 tempCache Updated button icons: /axZm/icons/[theme]/zoombutton_100.jpg /axZm/icons/[theme]/zoombutton_100_down.jpg /axZm/icons/[theme]/zoombutton_100_over.jpg New files: /examples/example21.php /axZm/plugins/jScrollPane/ (entire directory updated) /axZm/icons/[theme]/fsc_init.png /axZm/icons/[theme]/fsc_restore.png /axZm/icons/[theme]/zoombutton_fullscreen.jpg /axZm/icons/[theme]/zoombutton_fullscreen_down.jpg /axZm/icons/[theme]/zoombutton_fullscreen_over.jpg /axZm/icons/[theme]/zoombutton_fullscreen_exit.jpg /axZm/icons/[theme]/zoombutton_fullscreen_exit_down.jpg /axZm/icons/[theme]/zoombutton_fullscreen_exit_over.jpg /axZm/plugins/jquery-1.6.1.js /axZm/plugins/jquery-1.6.1.min.js
Ver. 3.1.0 Date: 2011-04-06	Two new examples - mouseover zoom and high res. animations Play button for 360 spin / animations. Support for letters with accents in filenames. Minor bugfixes. Updated files: /axZm/axZm.class.ioncube.php and /axZm/axZm.class.ixed.php (code change). /axZm/jquery.axZm.js (code change). /axZm/zoomObjects.inc.php (code change). /axZm/axZmH.class.php (updated methods: drawZoomJsConf, drawZoomBox, isValidPath, isValidFileType; new method: testCSV). /axZm/zoomLoad.php (code change). /examples/example16.php /examples/syntax.php /axZm/zoomConfigCustom.inc.php (new examples). /axZm/zoomConfig.inc.php, new options: mapWidth mapHeight allowDynamicThumbs cueFrames spinToMotion spinAreaDisable spinSliderPlayButton spinSliderPlayButton New files: /examples/example19.php /examples/example20.php /axZm/plugins/demo/jcarousel/ /axZm/icons/ajax-loader-map-white.gif
Ver. 3.0.2 Date: 2010-12-14	Basic touch events for iPad/iPhone etc. Added slider for 360 Spin & Zoom feature as option Added slider for zoom in & out as option Updated to latest jquery.ui Updated to jQuery 1.4.4 Minor & Major improvements - see new options below. Updated files: index.php /axZm/plugins/jquery-1.4.4.js and /axZm/plugins/jquery-1.4.4.min.js /axZm/plugins/jquery.ui (entire directory) /examples/. (upgraded to jQuery 1.4.4 + some minor corrections in example15.php) /axZm/axZm.class.ioncube.php and /axZm/axZm.class.ixed.php (code change). /axZm/jquery.axZm.js (code change). /axZm/axZmH.class.php (updated methods: drawZoomJsConf, drawZoomJs, drawZoomStyle, drawZoomBox). zoomObjects.inc.php (code change). /axZm/zoomConfigCustom.inc.php (new options in examples). /axZm/axZm.css (new class: zoomSliderSpinContainer). /axZm/zoomConfig.inc.php, new options: spinSlider - Slider for 360 Spin & Zoom feature + some additional (following) options zoomSlider - Slider for zoom in & out + some additional (following) options mouseScrollEnable - Enabling this option will not prevent scrolling the browser window with the mousewheel traveseGravity - New value 'none' disableAllMsg - Disables all error and notification messages. Patches: 2010-12-17: Some minor corrections. Updated files: /axZm/jquery.axZm.js (minor code change). /axZm/axZmH.class.inc.php (methods updated: proceedList) /axZm/zoomObjects.inc.php 2010-12-21: Fixed minor bug regarding passing encrypted 'zoomFile' value to select the first loaded image in the gallery. Updated files: /axZm/zoomObjects.inc.php 2010-12-29: Minor corrections, new option mapParent - allows to place the "image map" outside of AJAX-ZOOM. An example follows... Updated files: /axZm/jquery.axZm.js (code change). /axZm/axZmH.class.inc.php (methods updated: drawZoomJsConf) /axZm/zoomConfig.inc.php (added new option mapParent). 2011-01-03: Added two new examples for placing the "image map" outside of AJAX-ZOOM. Added the possibility to easily resize an image by passing the source filename and target image dimensions to zoomLoad.php; The resized image is only cached at clients browser. New files: /examples/example16.php /examples/example17.php /axZm/icons/body.gif (image for examples layout) /axZm/icons/zi_32x32.png (image for examples layout) /axZm/icons/zo_32x32.png (image for examples layout) /axZm/icons/zr_32x32.png (image for examples layout) Updated files: /axZm/zoomLoad.php (possibility to easily resize the image by passing the source filename and target image dimensions) /axZm/axZmH.class.inc.php (methods updated: proceedList) /axZm/zoomObjects.inc.php (minor extension for heuristic image search) /axZm/zoomConfigCustom.inc.php (overrides for new examples - $_GET['example'] - 18, 19). /examples/example6.php (updated) 2011-01-07: Minor corrections Updated files: /axZm/jquery.axZm.js (code change). 2011-01-09: Show keyframes while preloading in 360° rotation. Updated files: /axZm/jquery.axZm.js (code change). 2011-01-25: Changed default configuration of all examples except example1.php to load image tiles directly. Updated files: /axZm/zoomConfig.inc.php /axZm/zoomConfigCustom.inc.php /examples/example2.php 2011-02-06: Added 360° spin option to Magento. Updated files: /axZm/zoomConfigCustom.inc.php /axZm/mods/magento/media.phtml /axZm/mods/magento/magento_axZm.js New files: /axZm/mods/magento/pic (new folders: zoom3D, zoom3Dgif) /axZm/GIFEncoder.class.php /axZm/axZmSpinGif.php 2011-02-11: Fixed a bug where Magento displayed an error because of a php warning. Updated files: /axZm/mods/magento/media.phtml (bugfix) 2011-02-13: Some bugfixes. Added 360° spin option to XT:commerce (xtcModified, VEYTON, Gambio). Updated files: /axZm/mods/magento/media.phtml (bugfix) /axZm/jquery.axZm.js (bugfix) /axZm/zoomConfigCustom.inc.php (360° spin for XTC) /axZm/mods/xtc/xtc_axZm.js (360° spin) /axZm/mods/xtc/xtc_media.php (360° spin) New files: /axZm/mods/xtc/pic (new folders: zoom3D, zoom3Dgif) /axZm/mods/xtc/zoom_icon.png 2011-03-06: The preload process for 360 degree spin images has been accelerated up to 10 times faster. Updated files: /axZm/jquery.axZm.js 2011-03-12: Added a basic tutorial like example. New files: /examples/example18.php Updated files: /examples/syntax.php /axZm/zoomConfigCustom.inc.php (added option set) 2011-03-17: Minor improvements. Updated files: /axZm/jquery.axZm.js
Ver. 3.0.1 Date: 2010-11-22	VR Object 360 Spin & Zoom feature. Minor & Major improvements - see new options below. Updated files: /axZm/axZm.class.ioncube.php and /axZm/axZm.class.ixed.php (code change). /axZm/jquery.axZm.js (code change). /axZm/axZmH.class.php (updated methods: proceedList, drawZoomBox, drawZoomJsConf, isValidFilename, installPath). zoomObjects.inc.php (code change). /axZm/zoomConfigCustom.inc.php (new example). /axZm/axZm.css (new classes: spinPreloaderHolder, spinPreloaderBar, spinPreloadContainer). new images: /axZm/icons/spin_preloader.png and /axZm/icons/default/zoombutton_3d.jpg new example: /examples/example15.php /axZm/zoomConfig.inc.php, new options: galleryNoThumbs - Do not generate gallery thumbs. This is for 360 Spin & Zoom. displayNavi - Possibility to disable the navigation bar. firstMod - Frequently requested feature to choose which tool (crop, pan or spin) is enabled on start. forceToPan - Instantly switch to pan when reached 100% zoom level can be disabled now. zoomLogInfoDisabled - Completely disable zoom level displaying. naviCropButSwitch - Displaying crop button can be disabled. naviPanButSwitch - Displaying pan button can be disabled. naviSpinButSwitch - Displaying spin button can be disabled even 360 spin is enabled. 3D Spin Options - Many new options to control 360 VR object spin & zoom appearance. Patches: 2010-10-30: Some minor corrections. Added example images for all directories. Updated files: /axZm/axZm.class.ioncube.php and /axZm/axZm.class.ixed.php (code change). /axZm/jquery.axZm.js (code change). /axZm/axZmH.class.inc.php (methods updated: isValidPath, isValidFilename, installPath) /axZm/zoomInc.inc.php ($_SERVER['DOCUMENT_ROOT'] fix for some servers) New file index.php
Ver. 2.1.6 Date: 2010-10-18	Oxid eSales implementation. Options overrides for examples and other implementations have been moved from file 'axZm/zoomConfig.inc.php' into the new file 'axZm/zoomConfigCustom.inc.php'. The later is simply included into 'axZm/zoomConfig.inc.php'. Minor improvements. Updated files: /axZm/axZm.class.ioncube.php and /axZm/axZm.class.ixed.php (code change). /axZm/jquery.axZm.js (code change). /axZm/axZmH.class.inc.php (methods updated: proceedList, isValidPath, isValidFilename, composeFileName) Patches: 2010-10-19: New option picChmod Updated files: /axZm/axZm.class.ioncube.php and /axZm/axZm.class.ixed.php (code change). /axZm/zoomConfig.inc.php (new option) 2010-10-20: Adjusted for xt:Commerce VEYTON 4 Updated files: /axZm/mods/xtc/xtc_media.php /axZm/mods/xtc/xtc_cleanup.php /axZm/mods/xtc/readme_manual.txt 2010-10-22: '/axZm/axZmH.inc.php' method checkSlash() changed to replace backslashes on Windows. 2010-10-24: Made some changes to get the examples and plugins work on Windows localhost e.g. with XAMPP. Updated files: '/axZm/axZm.class.ioncube.php' and '/axZm/axZm.class.ixed.php' (code change). '/axZm/axZmH.class.php' (new method: installPath(), changed methods: isValidPath, drawZoomJs) '/axZm/zoomConfig.inc.php' ($zoom['config']['installPath']) '/axZm/zoomConfigCustom.inc.php' ($zoom['config']['mageUrl'], $zoom['config']['xtcUrl'], $zoom['config']['oxidUrl']) '/axZm/plugins/demo/jquery.axZm.demo.js' '/axZm/mods/magento/magento_head.php' '/axZm/mods/xtc/xtc_head.php' '/axZm/mods/oxid/oxid_head.php' 2010-11-01: Updated to jQuery 1.4.3 on default. Updated files: '/axZm/axZm.class.ioncube.php' and '/axZm/axZm.class.ixed.php' (code change). '/axZm/jquery.axZm.js' (smaller code change to fit jQuery 1.4.3 for IE) '/axZm/axZmH.class.php' (drawZoomJs) '/axZm/jquery.axZm.loader.js' '/examples/.' '/axZm/mods/magento/magento_head.php' '/axZm/mods/xtc/xtc_head.php' '/axZm/mods/oxid/oxid_head.php' 2010-11-02: Fixed a small bug when generating the thumbnails for horizontal gallery. Updated files: '/axZm/axZm.class.ioncube.php' and '/axZm/axZm.class.ixed.php' (code change). 2010-11-07: Updated jQuery Colorbox plugin used in examples to work with jQuery 1.4.3 Updated files: '/axZm/plugins/demo/colorbox (entire directory) 2010-11-09: Updated the file 'zoomObjects.inc.php' to facilitate the process of defining the images. The documentation has been also updated. Updated files: '/axZm/zoomObjects.inc.php' 2010-11-11: Reverted to jQuery 1.4.2 on default. Sorry for inconvenience, but jQuery 1.4.3 has too many bugs. Most compatobility issues with jQuery 1.4.3 have been fixed. However there are still some minor issues with various Browsers that will be fixed in jQuery 1.4.4, so waiting for the final 1.4.4 to be released. Updated files: '/axZm/axZmH.class.php' (drawZoomJs) '/axZm/jquery.axZm.loader.js' '/examples/.' '/axZm/mods/magento/magento_head.php' '/axZm/mods/xtc/xtc_head.php' '/axZm/mods/oxid/oxid_head.php'
Ver. 2.1.5 Date: 2010-10-11	Added support for TIF, PNG, GIF, BMP and PSD image formats. PSD and TIF images only with ImageMagick. File type extension does not need to be lower case anymore. xt:Commerce - small patch for older Gambio versions. Minor improvements. All patches from 2.1.4 included. Updated files: /axZm/axZm.class.ioncube.php and /axZm/axZm.class.ixed.php (code change). /axZm/jquery.axZm.js (code change). /axZm/axZmH.class.inc.php (methods updated: isValidPath, isValidFilename, composeFileName, drawZoomJsConf, drawZoomJsGallerySet. New method: isValidFileType) /axZm/zoomObjects.inc.php /axZm/zoomBatch.php Shop plugin Magento: '/axZm/mods/magento/media.phtml' '/axZm/mods/magento/magento_axZm.js' '/axZm/mods/magento/zoomObjects.inc.php' Shop plugin xt:Commerce: '/axZm/mods/xtc/xtc_media.phtml' '/axZm/mods/xtc/xtc_axZm.js' '/axZm/mods/xtc/zoomObjects.inc.php'
Ver. 2.1.4 Date: 2010-09-03	Under certain conditions the generation of the first image (preview image) failed for smaller images, resulting in strange zoom behavior. Images appeared zoomed after load. Now fixed. If such a problem occurred the already generated images in /pic/zoomthumb should be deleted to let AJAX-ZOOM remake them after update. All patches from 2.1.3 included. Many callbacks added (see Api). In Magento some jQuery native functions like height() failed in Opera browser for some unknown reason. Supposingly because of other javascripts in Magento. Updated files: /axZm/axZm.class.ioncube.php and /axZm/axZm.class.ixed.php (minor code change). /axZm/jquery.axZm.js (code change). /axZm/plugins/jScrollPane/jScrollPane.js and jScrollPane.min.js (because of Opera browser in Magento) Patches: 2010-09-14: New option installPath. Allows to quickly test AJAX-ZOOM without adjusting all the paths. Updated files: '/axZm/zoomConfig.inc.php' '/examples/' (all files) 2010-09-09: Some improvements for Magento implementation. More options inside media.phtml to meet various requirements. Updated files: '/axZm/mods/magento/magento_head.php' '/axZm/mods/magento/media.phtml' '/axZm/mods/magento/magento_axZm.js' '/axZm/mods/magento/zoom_icon.png'
Ver. 2.1.3 Date: 2010-07-28	xt:Commerce plugin. Bugfix dragging inside zoom map. New option cTimeCompare - instant renewal for replaced images. New option mapSelSmoothDragMotion Updated files: axZm.class.ioncube.php and axZm.class.ixed.php (minor code change). jquery.axZm.js (code change). axZmH.class.php (new method cTimeCompare(), method proceedList() changed, method drawZoomJsConf() changed). zoomObjects.inc.php zoomConfig.inc.php (added new option cTimeCompare, configuration parameters for xt:Commerce). axZm.css Patches: 2010-08-30: Minor improvements in '/axZm/mods/magento/media.phtml' Minor improvements in '/axZm/mods/magento/magento_axZm.js' Bugfix trying to generate image tiles for small images and printing a boolen as return, updated file '/axZm/axZmH.class.php', methods proceedList() and drawZoomBox(); Minor improvements in '/axZm/jquery.axZm.js' Added new parameter 'zoomRatio' to 'info' object passed to callback functions Update '/examples/example14.php' 2010-08-25: added some callbacks and one example, updated file: jquery.axZm.js 2010-08-19: Fixed a bug generating absolute paths for Magento and xt:Commerce extensions in files: '/axZm/mods/magento/magento_head.php' '/axZm/mods/xtc/xtc_head.php' 2010-08-01: jquery.axZm.js (code optimizing for speed enhancement)
Ver. 2.1.2 Date: 2010-07-08	Fixed the bug introduced in Ver. 2.1.1 by generating the first image with the GD library. New option autoZoom - configurable autozoom function after the image is loaded. Additional example allowing to load images from different locations into one gallery. Updated Magento commerce implementation (all files). Added gallery support. Updated files: axZm.class.ioncube.php and axZm.class.ixed.php (code change). jquery.axZm.js (code change). axZmH.class.php zoomObjects.inc.php zoomConfig.inc.php (added new option above, configuration parameters for the new example and Magento). axZm.css
Ver. 2.1.1 Date: 2010-07-05	This version 2.1.1 has a major bug by generating the first image with the GD library and has been removed till next update. Sorry for the inconvenience. Enhanced support for images smaller than stage dimensions. New options are: enlargeSmallImage - Scale small images. disabledTransp - Opacity for disabled buttons. Updated files: axZm.class.ioncube.php and axZm.class.ixed.php (code change). jquery.axZm.js (code change). axZmH.class.php (drawZoomJsConf and drawZoomBox methods). zoomConfig.inc.php (added new options above).
Ver. 2.1.0 Date: 2010-06-26	Some JS Bugfixes and improvements like support for images smaller than stage dimensions. Replcement of jQuery "$" character to "jQuery" to avoid collusions with other javascript libraries. Magento store installation guide and examples. Small update to fancybox plugin ver. 1.2.6. (The latest official version 1.3.1 seems to have some problems in certain environments: JS and CSS problems.) Updated files: axZm.class.ioncube.php and axZm.class.ixed.php (code change). jquery.axZm.js (code change). axZmH.class.php (jQuery "$" character to "jQuery" and some inline css in drawZoomBox() method). zoomLoad.php, zoomSess.php, jquery.axZm.loader.js (jQuery "$" character to "jQuery"). zoomConfig.inc.php (added Magento store example). New files: axZm/mods folder with additional files for implementation in other systems, currently only for the Magento store. This folder can be deleted if not implemented.
Ver. 2.0.1 Date: 2010-06-11	Small bugfix resulting in artifacts under certain conditions. Updated file: jquery.axZm.js
Ver. 2.0.0 Date: 2010-06-10	Some minor bugfixes. New option allowing to load image tiles without stitching them on server side. Loading image tiles while dragging New options are: pyrLoadTiles - Load tiles directly (general switch) pyrTilesFadeInSpeed - Tiles fadein speed (ms) pyrTilesFadeLoad - Tiles fadein speed while dragging (ms) zoomDragAnm - Animate while dragging (smooth motion) Updated files / methods: axZm.class.ioncube.php and axZm.class.ixed.php jquery.axZm.js axZmH.class.php (only the method drawZoomJsConf is updated with the new options above)
Ver. 1.1.3 Date: 2010-05-20	Bugfix for image name validation. Updated files: axZm.class.ioncube.php and axZm.class.ixed.php (is not security-relevant)
Ver. 1.1.2 Date: 2010-05-12	Minor change in default settings in zoomConfig.inc.php. In previous versions ImageMagick was set for generating and stitching the image tiles ($zoom['config']['pyrProg'] and $zoom['config']['pyrStitchProg') Fixed relative paths in examples resulting in not displaying some images.
Ver. 1.1.1 Date: 2010-05-04	Added the IonCube encoded version. Some minor improvements to support PHP 5.3+
Ver. 1.1 Date: 2010-04-01	First public release.

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:

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)
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' 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.

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';

$zoom['config']['fpPP']
$zoom['config']['installPath']

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  ... 
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

$zoom['config']['fpPP']
$zoom['config']['installPath']

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.

$zoom['config']['fpPP']
$zoom['config']['installPath']

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. Define the $pic_list_array manually
Example 2. Generate an array from a specific folder with all images in it
Example 3. Generating an array from MySQL
Example 4. Generating an array from MySQL II

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/;

Requirements

How to install

Options & Settings

Defining the images

Integration into HTML/PHP

Batch process

Api

Version History

Patches:

Patches:

Patches:

Patches:

Patches:

Patches:

Patches:

Patches:

Patches:

Plugins & Modules

Appendix