Latest version: 5.4.25 (Change Log)
Release date: November 8th, 2023
Download AJAX-ZOOM Software

Requirements

Server software PHP version

PHP 5.4+

PHP 5.4+ (PHP 7.x and PHP 8.x are supported too), memory_limit at least 128M and safe_mode = off*;

IonCube loader

Encoded scripts protected by IonCube require free Ioncube loaders version 5.0 or greater to run. The loaders can be downloaded and installed on many systems. For PHP 7.x, you will need Ioncube loaders v. 6+ or newer. For PHP 8.x, you will need Ioncube loaders v. 12+ or newer.

You can download this installation wizard for IonCube, which will test your system and say exactly how to install the loaders. In case the loaders are already installed the tester script will tell you this too. (For server-wide configuration you need to restart apache, if applicable...).

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 is optional and may require root privileges. Ask your system administrator to install the latest ImageMagick if you want to use it!

Server software ASP.NET version (without installing PHP)

These requirements do not apply to you, if you are using e.g. LAMP || native PHP in general!

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)

Using the "Phalanger" PHP compiler, which is included in the download package, any other PHP interpreter is not supposed to be installed on your server! A fully fledged .Net Framework application pool is required.

IIS 7+

IIS 7 (or later) with ASP.NET 4.0 Web Site configured or Visual Studio 2010 for development.

The basic installation for ASP.NET (not PHP) is fairly easy:

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 acceptime (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, wich is the case in all examples except example1.php, virtually no server resources except traffic are consumed!

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

It is always recommended to use the latest sversion of jQuery. Versions like 1.6.0 should not be used. Also jQuery 1.9.0 and 1.9.1 should not be used!!! If you want to support older Internet Explorer versions, then do not use jQuery 2.x;

jQuery UI 1.8+

ui.core.js, ui.draggable.js, ui.mouse.js, ui.slider.js, ui.widjet.js, effects.core.js'; If not already present, the UI library is dynamically byloadeded. In case necessary components of the UI are not present, then the UI from the same version is byloaded from Google CDN. One of the middle term goals is to get rid of jQuery UI dependency as it is not really needed.

Skills

Unless you are using an AJAX-ZOOM module / plugin, some basic skills in HTML, CSS, PHP and JavaScript are usually required to make things work. It is recommended to start with the examples and adjust the source as you need. Provided that server requirements are met AJAX-ZOOM should work out of the box.

How to install

Moduls

For module installation please check the corresponding module page:

Magento PrestaShop WooCommerce WordPress shortcode Opencart Oxid Shopware

Manual installation

The following description is primarily for manual installation. For modules, please check the corresponding module page.

Define the images

There are several ways to tell AJAX-ZOOM which images need to be loaded. Almost any example can be modified to load other images in different ways. A good overview of parameters, which can be passed to AJAX-ZOOM and which define which images to load, can be found in this example - example27.php

Image protection checklist

If you want to prevent users to download your high resolution source images, make sure there is no access over http to the directories where your source images reside. You can protect these directories with .htaccess;

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

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

You can also create zoomConfigCustomAZ.inc.php file and place it outside of /axZm directory (same level). This way you could place your custom configurations in this file and overwrite the entire /axZm directiry during future updates.

Also it is possible to put the zoomConfigCustomAZ.inc.php one level up, e.g. if your have a structure like /modules/ajaxzoom/axZm, you could also place the file into /modules/zoomConfigCustomAZ.inc.php modules folder, so when ajaxzoom module is updated, your individual settings do not get lost.

Important: in the CSS file (/axZm/axZm.css) please do not add any width, height, margin or other 'px' values, unless they are already present there and You just want to change them!

General settings

Option Type Description
licenceKeystring The Licence Key or 'demo'. In demo mode there is a restriction of 3.2 megaPix images, e.g. (2048 x 1536 px). If You would like to test AJAX-ZOOM with high resolution images prior to purchase You can receive the "Evaluation License" free of charge. Contact the support to get the License Key for your internet domain by giving the URL to the working demo or implementation of AJAX-ZOOM on your server.
licenceTypestring Type of the licence:
'Evaluation', 'Developer', 'Basic', 'Standard', 'Business', 'Corporate', 'Enterprise', 'Unlimited', 'Simple'
licensesarray Array to define more than one license for different domain names.
simpleModemixed Ver. 5.3.0+ Load original images instead of image tiles on zoom. Automatically activated when $zoom['config']['licenceType'] is "Simple". Set to true to activate, set to false to deactivate. Exclusive for "Unlimited" version: set to an integer value, e.g. 5000000 to automatically activate simpleMode only, if the image size is less than 5 megapixels (5 million pixels). Please note: if you are using an AJAX-ZOOM plugin / module for e.g. Prestashop or Magento, and simpleMode is activated, you should check that "deny from all" line in .htaccess file from the directory, the plugin saves the 360 images, is removed from .htaccess file. Do not delete the file, only that line please. In this blog post about "simpleMode" option you can see a comparison between multiscale image tiles and direct loading of the original image at different resolutions.
langstring ISO language, e.g. 'en'
memory_limitstring Set memory limit for heavy operations like image tiling, e,g, '4000M';
cropNoObjbool Each time AJAX-ZOOM requests a portion of an image, it passes (along with the parToPass - see above) the query string parameter zoomID to the file zoomLoad.php; zoomID serves as identifier to choose the desired image out of the array with images (see defining the images), whereby zoomID is the numeric key in this image array.

In some cases it could be not preferable to generate the image array for each zoom request. Setting this option to true will skip the generation of the image array and pass the image filename and its absolute path instead of zoomID. The advantage of enabling this option is a slight speed enhancement. The disadvantage is that anyone could see the location of the original image. (The folder with original images can however be easily .htpasswd protected)
autoBackColorbool Automatically set background color, useful if background color is solid e.g. white or black.
cTimeComparemixed Compare the creation time of the original image with the creation time of the various cached 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. Possible values: false, "filectime", "filemtime"
exifAutoRotationbool Autorotate images depending on EXIF information written by the camera. Source images must be writable by PHP.
visualConfbool Appends visual configuration under the zoom for testing purposes, like in example 1. This option is experimental and besides demonstration it is meant to be in the backend of a larger system for dynamic configuration. It should be expanded in the feature versions. As for now it is a quick & dirty solution to demonstrate some options and not more than that.
picDimstring Max dimensions for initial image, e.g. '600x400'. Changing this setting will also change the entire dimensions of the player, if it is inited in none responsive way.
stepPicDimarray Array with additional inital images (picDim), which are loaded depending on viewer size / resolution.
stepPicPreloadbool If stepPicDim is not empty, additional initial images will be predicted and preloaded.
stepPicOnZoombool If stepPicDim is not empty use "more suited" preview images also on zoom
subfolderStructurestring, bool Type of folder, subdolder structure for preview images, tiles and thumbnails. Default: "char", Possible values:
  • "md5" - first 1 char from md5 hashed filename without type / second 1 char from md5 hashed filename without type (max. 16 folders with max. 16 subfolders in each = max. 256)
  • "md5_2" - first 2 chars from md5 hashed filename without type / second 2 chars from md5 hashed filename without type
  • "char" - first 1 char from filename without type / second 1 char from filename without type
  • "char_2" - first 2 chars from filename without type / second 2 chars from filename without type
  • "flat" or false - no subfolders
subfolderStructureChmodoctal Chmod for subfolderStructure
enlargeSmallImagebool Enlarge image if width and height of the source image is smaller than picDim.
firstImageDialogbool Display a dialog after initial images have been generated.
gravitystring The viewpoint (viewport) when the user clicks on the the image to zoom in or out. Possible values:
  • 'viewPoint' - clicked point stays where it is
  • 'center' - clicked point gravitates to center
Scrolling with the mouse wheel always takes the current viewport.
traveseGravitystring Behavior of panning, when the image is zoomed to 100% (max zoom) and the user clicks on the image. Possible values:
  • 'center' clicked point gravitates to center.
  • 'adverse' will flip the clicked point to the other side of the middle Point of the stage.
  • 'none' Nothing happens.
zoomOutClickbool Being at 100% zoom one more click will restore the zoom so the whole image is visible.
disableZoombool Disable zoom function completly.
disableZoomExceptarray Exception events when Zoom function is disbled. Possible (multiple) values: zoomInClick, zoomOutClick, areaSelect, onSliderZoom, onZoomInButton, onZoomOutButton, onButtonClickMove_N, onButtonClickMove_E, onButtonClickMove_S, onButtonClickMove_W, onMouseWheelZoomIn, onMouseWheelZoomOut
disableClickZoombool Disable zooming for click or double click.
pinchZoomOnlyDragbool Zooming with pinch zoom is disabled, instead the user will be only able to drag / pan.
iMagickbool Use ImageMagick for all image processing. Overrides all other options regarding the choice between GD and ImageMagick.
imbool Use Imagemagick to crop images, make initial images and thumbs. If set to false, GD will be used. See also:
$zoom['config']['pyrProg']
(make tiles prog) $zoom['config']['pyrStitchProg'](stitch tiles prog)
imKeepProfilesbool Keep color and other profiles for all operations processed with ImageMagick.
imQuotesmixed Only for ImageMagick: remove or replace single quotes in exec string. Possible values: 'remove', 'replace' oder false. 'replace' will replace them to double quotes.
imLimitarray Only for ImageMagick: limit memory and other settings. By default they are set to a very high value and automatically adjusted to available system resources.
imPathstring Root path to imagemagick convert Ver. 6+, if You have one, e.g. '/usr/bin/convert'. On some installations it is sufficient to write 'convert' without the full root path.
qualint Output JPG quality for zoomed images, max. 100. See also pyrQual
qualPngarray Output PNG quality for zoomed images.
qualRangearray Alternatively to the above You can set a quality range depending on users internet connection speed. This speed is measured on the fly with images, which are downloaded anyway, therefore being possibly inaccurate. In the array You can set the low and upper ranges for JPG quality, e.g. between 40 and 90, and low and upper ranges for internet connection speed in kbit/s, e.g. between 128 and 768
initPicQualint Output JPG quality for initial images.
initPicQualPngarray Output PNG quality for initial images.
initPicInterlacestring, bool Ver. 5.1.0+ Interlace initial images, possible values "Plane", "Line" or false
pngModebool Generate PNG images, tiles etc. instead of JPG. Possible values: false, true, 'auto'; 'auto' will create png images only if source image is also PNG.
pngKeepTranspbool 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. We recommended to use ImageMagick instead.
pngBackgroundColorstring Background color for transparent areas of the png image
notTouchUAarray "Not touch device", array with possible strings within user agent string, e.g. array("webkit viewer", "somthing_else"); Enforces mouse events even if browser wrongly claims to have touch events.
postModebool Use POST instead of GET for all AJAX requests. Can be overwritten by passing arguments to jQuery.fn.axZm, jQuery.fn.axZm.load oder jQuery.fn.axZm.openFullScreen
regexFilenamestring Regex for checking filename.
regexPathstring Regex for checking paths.
fileTypeArraystring Array which lists accepted image file types. Imagemagick could possibly process many other file types than the default settings.

Major Directories and Filenames

Option Type Description
fpPPstring Server root path to www directory, e.g. '/srv/www/htdocs/web123' or '/home/yourdomain/public_html'. Usually it is $_SERVER['DOCUMENT_ROOT']; without slash at the end. Set this option manually if it does not produce correct results! This option is very important!
installPathstring "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!
urlPathstring "frontend" path which should be adjusted in some cases. On default "installPath" and "urlPath" have same values.
rewriteBasestring Remove a part of the string (path) passed to AJAX-ZOOM from an application. Usefull if e.g. rewriteBase in htaccess is set the way that AJAX-ZOOM gets wrong paths for images e.g. Bitnami Magento and XAMPP on localhost, the path in the browser is http://192.168.178.27/magento, then the setup for making AJAX-ZOOM extension work would be: $zoom['config']['fpPP'] = 'C:/xampp/apps/magento/htdocs'; $zoom['config']['urlPath'] = '/magento/js/axzoom'; $zoom['config']['rewriteBase'] = '/magento';
zoomLoadFilestring Absolute path for the file zoomSess.php, e.g. '/axZm/zoomSess.php'
iconstring Folder where icons are located, absolute path with a slash at the end! This folder should not be password protected! e.g. '/axZm/icons/'
jsstring Folder where JavaScript files are located, e.g. '/axZm/'
jsDynLoadbool Dynamic load of all necessary jquery plugins and CSS files. After a check weather plugins have already been loaded, the JavaScript and CSS files are loaded (injected into the HEAD section of HTML) automatically on start. If true, there is no need to use the PHP class methods drawZoomStyle() and drawZoomJs() in HEAD of your HTML.
jsMinbool If jsMin is true the minified versions of the JavaScript files will be loaded.
jsUiAllbool Load all jQuery UI moduls. Otherwise only modules needed by AJAX-ZOOM are loaded. Activate this option if you experience version conflicts or any other errors regarding the jQuery UI.
jsUiVerstring jQuery UI version used by AJAX-ZOOM.
jsUiThemestring Easily switch between jQuery UI themes by changing the value of this option. The UI theme loaded is located under /axZm/plugins/jquery.ui/themes/[jsUiTheme]; You can create your own or import already existing.
jsUiSuppressJSbool Suppress loading jQuery UI JavaScript files. May result in JavaScript error if certain jQuery UI elements are not loaded otherwise.
jsUiSuppressCSSbool Suppress loading jQuery UI CSS files. Enable this option if all css classes are loaded otherwise by e.g. a template theme.
fontPathstring Fonts directory path e.g. '/axZm/fonts/'. All font files (.ttf) have to be in the same directory.
picstring Base folder where original images are located, e.g. '/pic/zoom/'. This value can be overriden by passing full image path to AJAX-ZOOM. Please make sure, that PHP is allowed to open the files (chmod). The folder can be protected by e.g. .htaccess (deny from all)
thumbsstring Folder, where initial images will be written into, e.g. '/pic/zoomthumb/'. Please make sure PHP can write to this directory (chmod)!
tempstring Folder where to write temporary zoomed images, e.g. '/pic/temp/'. Please make sure PHP can write to this directory (chmod)!
tempCachestring Folder where thumbnails generated with the API method $axZm->rawThumb() can be optionally cached, e.g. '/pic/cache/'. Please make sure PHP can write to this directory (chmod)!
sortBystring Sort images by some file information returned from php stat(), e.g. ctime, mtime; As per default settings images are sorted by their file names.
sortReversebool Reverse sorting order of the images;
speedOptSetbool Makes AJAX-ZOOM to switch faster between images. With this setting several other options will be overridden at the end of zoomConfig.inc.php
jsonPathstring 5.0.9+ Path for json files, see also $zoom['config']['jsonInfo']

Image Map


"Image map" is a small image, where the user can see the zoomed location and quickly pan the zoomed image. It can be positioned in all corners of the player, sized in accordiance to the player size and it can be placed even outside of the player.

Option Type Description
useMapbool Enable image map.
mapParentmixed Parent DIV id (string) of the image map if you want to place it outside of AJAX-ZOOM. See example16.php
mapParCenterbool Center within parent container.
dragMapbool If activated, image map is draggable.
mapHolderHeightint If dragMap is activated, the holder height in px. CSS: .axZm_zoomMapHandle
mapHolderTextstring If dragMap is activated, the text string inside the holder.
zoomMapDragOpacityfloat If dragMap is activated, opacity while dragging, e.g. 0.7 (70%)
zoomMapSelOpacityfloat Opacity of the selector inside the image map, e.g. 0.25 (25%), CSS: .axZm_zoomMapSelArea
zoomMapSelBorderint Border width of the selector.
zoomMapContainmentstring, bool If dragMap is true, constrain draging image map within a certain div or other element, e.g. window or "#zoomAll". Use false to disable containment.
zoomMapAnimatebool Animate map while switching to a different image.
zoomMapVisbool Automatically hide image map if image is not zoomed. Map will appear after the user zoomes into the image. Use false for auto hide, true for map visible from the beginning.
mapFractfloat Image map size in percentage of picDim width, e.g. 0.25 (25%).
mapWidthint, bool Fixed map width in pixels. Overrides mapFract.
mapHeightint, bool Fixed map Height in pixels. Overrides mapFract.
mapButtonbool Show the button for turning image map on and off.
mapBorderarray Outer border width of the image map. You can set top, right, bottom and left border width separately. Please do not set this values in the css file.
zoomMapSwitchSpeedint Restore speed of the image (and image map) if the image is zoomed and the image is switched over gallery in ms, e.g 1000 (1 second); overrides restoreSpeed
zoomMapRestbool Restore position of the map on window resize.
mapPosstring Position of the map! Possible values: 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'; Map must be not dragable - dragMap set to false;
mapSelSmoothDragbool Smooth flow of zoomed image while dragging the selector rectangle inside the image map.
mapSelSmoothDragSpeedint Smoothness speed in ms of map selector dragging, e.g. 1000 (1 second)
mapSelSmoothDragMotionstring Smoothness motion of map selector dragging, e.g. 'easeOutSine'
mapSelZoomSpeedint Time in ms, after which the image loads automatically if the user stucks at one point while dragging the map selector, e.g. 400 (0.4 seconds)
mapSelClickZoomOutbool Ver. 5.1.0+ Click on selection area inside the map to zoom out
mapMouseOverbool Move selector inside zoom map by mouseover and not by dragging the selector. You can see it in example20.php. Does also work for touch devices.
mapMouseWheelbool If mapMouseOver is enabled, allow to zoom in and out using mousewheel.
mapHorzMarginint Horizontal margin from the edge of the Players.
mapVertMarginint Vertical margin from the edge of the player.
mapOpacityfloat Opacity of the map when mouse is not over it.
mapClickZoombool On none zoomed state clicking at a point on the map will result into zoom to 100%. You can see it in example16.php.
mapOwnImagebool, string Define physical image dimensions for the map image e.g. "200x200" or false;
mapPathstring Path where map images are stored when "mapOwnImage" is set to some size.
mapFilterIMarray Some image filters like sharp or grayscale applied to the map image when using Imagemagick 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: .axZm_zoomDescr or it can be done with JavaScript and AJAX-ZOOM JavaScript API. See also example25.php.

Option Type Description
zoomShowButtonDescrbool, string Enable description for navigation buttons on mouseover. If true the next options apply equally for buttons mouseover. Possible values: left, right, true or false;
descrAreaTranspfloat Description area opacity, e.g. 0.5
descrAreaShowTimeint Showing animation time in ms, e.g. 200
descrAreaHideTimeint Hiding animation time in ms, e.g. 200
descrAreaShowTimeOutint The delay in ms after which the description shows up, e.g. 500
descrAreaHideTimeOutint The delay in ms after which the description automatically hides, if mouse is not over an object any more, e.g. 750
descrAreaHeightint Description area minimal height in px. Setting this value to a small integer like 0, 2, or 5 will additionally produce nice animation. The final height depends on text length and is determined automatically.
descrAreaMotionstring Description motion type, e.g. "swing"

Galleries

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 automatically generates the thumbnails, which you can use for other purposes, like in this examples. Following are only shared setting for all gallery types.

Option Type Description
galleryPicQualint JPG quality for gallery thumbs, e.g. 90 (max. 100)
galleryPicQualPngarray Quality for gallery thumbs under pngMode
galleryFillbool Fit gallery size with the image. Depending on ratios image is croped to fill entire area.
galleryFilterIMarray Some image filters like sharp, unsharp or grayscale applied to the gallery thumbs when using Imagemagick for processing.
galleryFilterGDarray Some image filters like sharp, sepia-tone or grayscale applied to the gallery thumbs when using GD for processing.
galleryDialogbool Display modal dialog (only once) when thumbs have been made by the server.
galleryFadeOutSpeedint Fadeout speed in ms for previous image in the gallery, e.g. 300
galleryFadeInSpeedint Fadein speed of new image, e.g. 300
galleryFadeInMotionstring Fadein animation motion, e.g. 'easeOutCirc'
galleryFadeInOpacityfloat Fadein starting opacity, e.g. 0.1 or 0
galleryFadeInSizefloat Fadein starting size multiplier, e.g. 1.0 - no change, 0.5 - twice as small as original, 2.0 - twice as big as original. This option gives a nice zoom in or zoom out effect during switching between images in the gallery.
galleryFadeInAnmstring Fadein starting animation position, possible values: 'Center', 'Top', 'Right', 'Bottom', 'Left', 'StretchVert', 'StretchHorz', 'SwipeHorz', 'SwipeVert', 'Vert', 'Horz'
galleryInnerFadeint, bool "Innerfade" between pictures during switching. Overrides galleryFadeOutSpeed and galleryFadeInSpeed during switching. $zoom['config']['galleryFadeInSpeed'] still valid for first loading image in the gallery. For disabling this option set it to false.
galleryInnerFadeCutint, bool Applies only if galleryInnerFade is true: "Innerfade" or "Crossfade" between images looks nice, if images are equal in size or have the same background matching with the stage color. Fading a smaller image over a bigger one with different backgrounds does not look nice at all. Enabling this option will "crop" the previous image to the size of the fading new image, so it looks nice :-) This option sets the speed in ms of the "shutter" that will be pushed from the sides or top and bottom of the image. For disabling this option set it to false.
galleryInnerFadeMotionstring Motion type of the above animation (galleryInnerFadeCut), e.g. 'swing'
gallerySwipemixed Enable swiping gesture on mobile touch devices to swipe to next or previous image. Possible values: 'Horz', 'Vert' or false to disable.
gallerySlideNavibool Enable prev / next buttons above the picture of the player. In 360/3D mode these buttons turn the object.
gallerySlideNaviMouseOverbool Arrows for prev / next over the image appear only when mouse is over the player. Disabled for touch devices.
gallerySlideNaviOnlyFullScreenbool Show arrows for prev / next over the image only at fullscreen mode.
gallerySlideNaviMarginint Margin of the prev / next buttons from the edge of the player.
gallerySlideNaviAnmstring Transition type when clicked on the prev / next button, possible values 'Center', 'Top', 'Right', 'Bottom', 'Left', 'StretchVert', 'StretchHorz', 'SwipeHorz', 'SwipeVert', 'Vert', 'Horz'
gallerySlideSwipeSpeedint Duration for gallerySlideNavi in ms if gallerySlideNaviAnm is set to 'SwipeHorz' or 'SwipeVert'.
gallerySlideTouchSwipearray Settings for touch swipe which depends on real swipe speed gesture
gallerySwitchQuickbool Enable "quick switching" for the gallery items. See also zoomSwitchQuick API
thumbSliderThemestring Theme for axZmThumbSlider galleries located in /axZm/extensions/axZmThumbSlider/skins
galleryNoThumbsbool Do not generate gallery thumbs. If any gallery is shown and galleryNoThumbs is enabled, AJAX-ZOOM will not try to load the thumbs and show only description of the thumb. Useful if you have many images in the gallery, e.g. from IP camera and only want to show the time.
galleryThumbDescfunction Create an anonymous function for thumb description in the gallery. $k is the number of the image in the gallery. $pic_list_data is an array containing following information: $pic_list_data[$k]["fileName"], $pic_list_data[$k]["fileSize"], $pic_list_data[$k]["imgSize"], $pic_list_data[$k]["thisImagePath"]

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

You can also create a named function right here and define $zoom['config']['galleryThumbDesc'] = "yourFunctionNameForThumbDescription"; e.g. function yourFunctionNameForThumbDescription($pic_list_data, $k){return $pic_list_data[$k]["imgSize"][0];} The above approach however can not be overwritten in zoomConfigCustom.inc.php, so we use create_function at this place.
galleryThumbFullDescfunction Create an anonymous function for longer thumb description, which will be shown on mouseover the thumb in a gallery.
Option Type Description
useHorGallerybool Enable horizontal gallery.
galleryHorPicDimstring Thumb size in horizontal gallery, e.g. '70x70'
galleryHorHideMaxWidthint, bool Ver. 5.0.8+ below this value (player width) horizontal gallery will be hidden in responsive layouts.
galleryHorHideMaxHeightint, bool Ver. 5.0.8+ below this value (player height) horizontal gallery will be hidden in responsive layouts
galHorPositionstring Position of the horizontal gallery, possible values:
  • top1 - above the image, above navigation bar
  • top2 - above the image, under navigation bar
  • bottom1 - under the image, above navigation bar
  • bottom2 - under the image, under navigation bar
galHorHeightint, string Height of the gallery container in px or "auto" as string.
galHorPaddingarray Padding of the horizontal gallery within it's parent container
galHorImgMarginarray Margin of the li elements.
galHorThumbDescrbool Show title within thumbs.
galHorOptarray Settings for the horizontal gallery, full documentation can be found at: www.ajax-zoom.com/axZm/extensions/axZmThumbSlider/
Option Type Description
useGallerybool Enable vertical gallery.
galleryPicDimstring Vertical gallery thumbs size, e.g. '100x100'
galleryPosstring Gallery Position, possible values: 'left', 'right'
galleryLinesint Number of columns in the vertical gallery, limited by users resolution and your layout.
galleryScrollToCurrentbool Scroll to the loaded image thumb on the beginning.
galleryWidthmixed Width of the gallery container, integer (px) e.g. 144 or "auto" as string.
galleryImgMarginarray Margin of the li elements.
galleryThumbDescrbool Show title element within thumbs.
galleryHideMaxWidthint Below this value (player width) vertical gallery will be hidden in responsive layouts. Set to false to disable.
galleryHideMaxHeightint Below this value (player height) vertical gallery will be hidden in responsive layouts. Set to false to disable.
galleryOptarray Settings for the vertical gallery, full documentation can be found at: www.ajax-zoom.com/axZm/extensions/axZmThumbSlider/

"Inline gallery" is displayed over the image and activated by clicking on a button in the navigation or via the JavaScript API.

Option Type Description
useFullGallerybool Enable inline gallery.
galleryFullPicDimstring Size of the thumbs, e.g. '70x70'
galFullImgMarginarray Margin between the LI elements.
galFullButtonbool If true, the "Inline Gallery" Button is enabled. Sometimes it makes sense to enable inline gallery and disable the button, e.g. as in example 7
galFullScrollCurrentbool If set to true it will be scrolled to the current selected image.
galFullAutoStartbool Autostart and autoshow "Inline Gallery" after initialization of AJAX-ZOOM.
galFullTooltipbool Enable description tooltip for "Inline Gallery".
galFullTooltipOffsetint Tooltip offset from the thumb in px, e.g. 5
galFullTooltipSpeedint Tooltip fadein speed in ms.
galFullTooltipTranspfloat Tooltip opacity, e.g. 0.93
galFullThumbDescrbool Show description element within thumbs.
galFullOptarray Settings for the Inline / Full gallery, full documentation can be found at: www.ajax-zoom.com/axZm/extensions/axZmThumbSlider/

Prev, Next, Play buttons for the gallery. Is suitable for vertical and horizontal galleries.

Option Type Description
Option Type Description
galleryNavibool Enable gallery navigation buttons.
galleryNaviPosstring Gallery navigation position. Possible values: 'top', 'bottom' or 'navi'. Top and bottom refere to position above or under the vertical gallery container.
galleryNaviHeightint Height of the parent container if positioned not inside navigation bar (galleryNaviPos option is not 'navi')
galleryNaviCircbool Circular gallery navigation - carousel (after reaching the last image the first image is next).
galleryNaviMarginarray Gallery navigation container margin in px, array(top, right, bottom, left), e.g. array(2, 25, 5, 0);
galleryButtonSpaceint Space between buttons in px.
galleryPlayButtonbool Enable Play, Pause button.
galleryAutoPlaybool Enable autoplay (diashow) on start. Will be stopped on zoom.
galleryPlayIntervalint Interval for diashow in ms, e.g. 3500 (3,5 seconds)
galleryKeyboardKeysarray Options subset to switch between images by using keys on the keyboard

3D (VR Object) / 360 Spin & Zoom

In this section you will find many options especially for the 360 degree / 3D views. Please note that there are also many JavaScript API functions with which the functionality can be adapted.
Option Type Description
spinModbool Enable 360 spin / 3D spin & zoom. Inline Gallery (useFullGallery) must be enabled too.
spinBouncemixed Enable bounce for 360 views. Spinning will stop at last frame and go backwards to the first. This allows to use AJAX-ZOOM with objects where "back side" is not interesting or it is simply not possible to take images from the back, e.g. when they are mounted at the wall. HD "jpeg movies", time lapse photography are also fields of application with this option. Possible values: "bounce", "stop" and false
spinKeysarray Configuration of the keyboard keys to perform spinning in 360 and 3D;
spinMaxRowsint Maximal number of levels for 3D spin, default: 15
spinMaxFramesint The highest number of frames per row, default: 360
dragToSpinarray Add an image or a div with text telling that the user can "drag and this way spin the 360"; this option is an array with different settings, e.g. you can set to display this message after certain about of seconds and automatically hide it later.
spinNoInitarray If activated, the 360 spin will be preloaded upon a click or you can start preloading with $.fn.axZm.spinPreload() JavaScript API. The user will get a configurable message, which can be defined as configurable png image or a div with text in it.
spinSmoothingarray If if activated, inertia force for 360 will be emulated when the user spins an object with the mouse or finger.
spinKeepRotatearray Keep rotate after inertia force smoothing. There are several adjustments, which can be set in this configuration array.
spinSnapKeysarray Snap to specific 360 keyframes after spinning with inertia force.
spinSnapNextKeybool Snap to nearest key specified in "spinSnapKeys" options also without velocity spinning.
spinAndDragbool Pan view vertically while spinning horizontally. This allows the user to view a different section of the zoomed image in the 360 degree view without switching into pan mode.
spinAndDragTouchbool Enable "spinAndDrag" option also for touch devices.
spinDragOnlybool Only drag vertically without spinning, can be also enabled and disabled by changing the JS value of jQuery.axZm.spinDragOnly
spinPanRightMouseBtnbool If in spin mode, right click with the mouse and drag will pan instead of spin.
spinSensitivityfloat Spin sensitivity to mouse movement. Greater number means faster spinning.
spinSensitivityZfloat Spin sensitivity to mouse movement of the Z axis. Greater number means faster spinning.
spinReversebool Activate reversed direction of the spin to mouse movement. In fact the direction depends on the order of the images in the sequence.
spinContrabool Reverse direction of the spin in general.
spinReverseZbool Activate reversed direction of the spin to mouse movement of the Z axis (multirow). In fact the direction depends on the order of the images in the sequence.
spinReverseBtnbool, int Activate reversed direction for all kind of spin control buttons. Normally the spin direction of the buttons is changed automatically when "spinReverse" option is changed. With this option enabled it will be ignored for the control buttons.
spinFlipbool Spin or mouse movements in bottom-down directions instead of left-right. This would be useful if you shoot e.g. a guitar in a vertical position and then turn the images by 90 degrees.
firstAxismixed First Z axis (multirow) to be displayed. Can be overridden by passing $_GET['firstAxis'] in query string. Possible values: auto (middle), number of subdir, name of subdir.
spinDemobool Start spin after it first loads.
spinDemoTimeint Time in ms for autospin which is needed to make one turn.
spinDemoRoundsint, bool Number of rounds after which the spin stops automatically. Use false for endless loop. The spinning will also end when the user moves the mouse over the object.
spinDemoEasingstring Easing of the demo spin across the rounds defined in spinDemoRounds option. The default is "linear".
spinOnSwitchbool Demo spin each time the User switches to routate tool.
spinWhilePreloadbool Spin while preloading.
spinMouseOverStopbool Stops automatic spinning if mouse over the object.
spinEffectarray Spin effect settings:
spinEffect['enabled']bool Enable spin effect.
spinEffect['zoomed']bool Enable spin effect while zoomed.
spinEffect['opacity']float Opacity of the blur effect.
spinEffect['time']int Time in ms of the blur effect.
spinPreloaderSettingsarray Preloader settings, CSS: .axZm_spinPreloaderHolder, .axZm_spinPreloaderBar, .axZm_spinPreloadContainer
spinPreloaderSettings['width']int, string Width of the preloader container. Could be also a percentage value, e.g. "30%".
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 Position of the preloader, default: "Center"
spinPreloaderSettings['gravityMargin']int Margin of the preloader to the edges of the player.
spinPreloaderSettings['margin']int Margin of the preloader content to its edge.
spinPreloaderSettings['countMsg']bool Show preloader counting message.
spinPreloaderSettings['statusMsg']int Show status message.
spinPreloaderSettings['Lx']string Several localization strings.
spinCirclePreloaderarray Array with settings for the 360 circle spin preloader indicator, IE < 9 defaults to horizontal progress bar. The settings include the diameter of the preloader, width of the stroke, counter messages, localization and other suboptions.
spinFilesExcludeFilterarray Define, which files should be not selected from a folder with 360 images. If a string from the array contains in the filename of a 360 image, then it will be not included into 360 images set. Particularly this is useful if you have e.g. low resolution images and high resolution images in the same folder. AJAX-ZOOM does not need low resolution images and for example if your low resolution images contain "ld" in the filename, then you can set $zoom['config']['spinFilesExcludeFilter'] = array('ld');. Please note however, that if you already have such a structure coming from a different 360 script, then your "high resolution images" might be not of the best quality and resolution available which will lead to not optimal results within AJAX-ZOOM.
cueFramescsv, bool CSV (comma-separated values) of frames numbers, which are loaded into a gallery if it is activated. Clicking on a thumb will result into spinning to this particular frame.
spinToMotionstring Motion type of the spinning to a specific frame, see also cueFrames
spinOnClickbool If activated and spin tool is selected clicking on the image will result into spinning the object, otherwise it will zoom in.
spinAreaDisablebool Disable spinning for the zoom area, see this example
gallerySlideNavibool 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
360 degree spin slider
spinSliderbool Enable UI slider as additional control for spinning.
spinSliderHeightint Height or thikeness of the slider in px.
spinSliderHandleSizeint Height or thikeness of the slider handle in px.
spinSliderWidthstring Width of the slider. Percent or pixel;
spinSliderParentstring Ver. 5.0.5+ ID of the parent container for spin slider if not fullscreen, e.g. axZm_spinSliderParent; set false to disable
spinSliderPlayButtonbool Play / pause button left to the spin slider.
spinSliderReversebool Reverse direction of the slider.
spinSliderClassstring Css class name for spin slider.
spinSliderMouseOverbool Hide spin slider, when mouse is not over the player.

Navigation bar / Toolbar

The oldschool navigation bar can be displayed below, above the player or disabled. The buttons can be switched on and off. There are several presets / skins and you can also create your own skins. The order of the buttons in this navigation bar can not be changed. Another option is the mNavi Toolbar. There you can freely determine the order and positions of each button. Also you can define your own buttons and the click event for them.


List mit all buttons, also from other topics:
naviPanButSwitch, naviSpinButSwitch, naviCropButSwitch, naviZoomBut, naviPanBut, naviRestoreBut, mapButton, galFullButton, fullScreenNaviButton, help, downloadButton, galleryNavi, galleryPlayButton
Option Type Description
displayNavibool Eneable (display) regular navigation bar. For disabling / enabling in the fullscreen mode please set fullScreenNaviBar option.
firstModstring First switched tool on load. Poosible values: "crop", "pan", "spin"
keyPressModarray Quickly switch between crop, pan or spin using keyboard keys (experimental).
forceToPanbool Automatically switch to pan when reached 100% zoom level.
forceToPanClickDisablebool Disable "forceToPan", when the user chooses a different tool in case "forceToPan" is enabled.
zoomLogInfoDisabledbool Completely disable zoom level.
zoomLogInfobool Along with zoom level the time needed to generate the zoomed picture and the overall image traffic will be shown. CSS: .axZm_zoomLogHolder, .axZm_zoomLog
zoomLogJustLevelbool Diplay only the zoom level. If true - disable zoomLogInfo above. CSS: .axZm_zoomLogHolder, .axZm_zoomLogJustLevel
deaktTranspfloat Opacity for deactivated bottons, [0-1], e.g. 0.5
disabledTranspfloat Opacity for disabled buttons, when image is smaller than stage dimensions, [0-1], e.g. 0.2
Zoom slider
zoomSliderbool Enable vertical or horizontal UI slider for zoom in and out
zoomSliderHorizontalbool Enable horizontal slider.
zoomSliderHeightint Height of the vertical slider in px.
zoomSliderHandleSizeint Height or thikeness of the slider handle in px.
zoomSliderWidthint Width or thikeness of the slider in px.
zoomSliderPositionstring Position of the slider. Possible values: topRight, topLeft, bottomRight, bottomLeft, top, bottom, left, right;
zoomSliderMarginVint Vertical margin of the slider in px.
zoomSliderMarginHint Horizontal margin of the slider in px.
zoomSliderOpacityfloat Opacity of the slider [0.0 - 1.0], diabled for MSIE.
zoomSliderContainerPaddingint Padding of the parent container, which can be styled with CSS - #zoomSliderZoomContainer
zoomSliderMouseOverbool Show zoom slider only when mouse is over the player. Disabled for touch devices.
zoomSliderClassstring CSS class name for zoom slider
Language vars log
zoomLogLevelstring Zoom level text string, e.g. 'Zoom Level:'
zoomLogTimestring Time needed to generate the zoomed picture, e.g. 'Zoom Time:'
zoomLogTrafficstring Traffic, e.g. 'Zoom Traffic:'
zoomLogSecondsstring Seconds, e.g. 'sec.'
zoomLogLoadingstring Loading message, e.g. 'Loading...'
Help (Info) button
helpbool Enable help (Info) button.
helpTranspfloat Opacity of Help (Info) container, e.g. 0.95
helpTimeint Help (Info) container transition time in ms, e.g. 300
helpMarginint Margin in px of help container within the stage, e.g. 20
helpTxtstring String HTML of what is displayed in help / info container. Write whatever You want in it. Feel free to generate this var dynamically with:
JavaScript (jQuery): jQuery('#zoomedHelp').html('your content goes hier'); PHP: $zoom['config']['helpTxt'] = $yourContentVar;
helpUrlstring Instead of the option helpTxt load an external url into the help / info container as iframe.
Button icons
buttonSetstring Subfolder in the icons directory, where the images for the buttons are located, e.g. 'default'. You can create a different button set, place it in some folder and set this option in order to changes take place.
themeCssstring Theme file located in /axZm/themes/, possible values (extendable) - "black", "grey", "white"
iconsarray Multidimensional array with icons parameter for each button in the navigation. See the source code in
mapButTitlearray Multidimensional array with icons language vars.

Mobile Buttons (mNavi)

This navigation is an alternative to the regular navigation bar in version previous to 4.0; It is better suited for mobile devices but can be used for desktops as well.

Option Type Description
mNavi['enabled']mixed Enable mNavi, possible values: true, false or "auto" - only for touch devices. Disables regular navigation (displayNavi, fullScreenNaviBar).
mNavi['gravity']string Positioning gravity, possible values: topLeft, topRight, bottomRight, bottomLeft, bottom, top, right, left
mNavi['offsetHorz']int Horizontal offset from the edge of the player.
mNavi['offsetVert']int Vertical offset from the edge of the player.
mNavi['offsetHorzFS']int Horizontal offset from the edge of the player at fullscreen.
mNavi['offsetVertFS']int Vertical offset from the edge of the player at fullscreen.
mNavi['parentID']string ID of the container to place mNavi in none fullscreen mode outside of the player.
mNavi['setParentWidth']bool Sets width of the parent container same as navi container.
mNavi['setParentHeight']bool Sets height of the parent container same as navi container.
mNavi['fullScreenShow']bool Append mNavi to the player in fullscreen mode; you can also enable "fullScreenNaviBar" option instead.
mNavi['onlyFullScreen']bool Display only at fullscreen mode.
mNavi['hover']bool Enables mouse over state of the button, e.g. if $zoom['config']['icons']['mHotspots'] = array('file'=>'button_iPad_hotspots', 'ext'=>'png', 'w'=>50, 'h'=>50); the hover state button is 'button_iPad_hotspots_over.png'
mNavi['down']bool Enables mouse down state of the button, e.g. if $zoom['config']['icons']['mHotspots'] = array('file'=>'button_iPad_hotspots', 'ext'=>'png', 'w'=>50, 'h'=>50); the hover state button is 'button_iPad_hotspots_down.png'
mNavi['dis']bool Disables certain buttons like zoom in and out if they can not be used.
mNavi['alignment']string Buttons alignment, possible values: 'horz' and 'vert'; if gravity is set to 'right' or 'left', this option defaults to 'vert'
mNavi['mouseOver']bool Hides, when mouse is not over the player on not touch devices.
mNavi['firstEllMargin']int Left margin of first button in mNavi.orderDefault / mNavi.order
mNavi['ellementRows']int Number rows of elements. If > 1 "alignment" defaults to 'horz'.
mNavi['rowMargin']int If ellementRows > 1 - margin between the rows.
mNavi['containerFixedWidth']int, bool If this value is an integer, the container width is not calculated automatically but set to this value.
mNavi['containerFixedHeight']int, bool If this value is integer, the container height is not calculated automatically but set to this value.
mNavi['buttonDescr']bool If set to true, the 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 placed 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. 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 a 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...}'. The simplest way is to reference a JavaScript function defined elsewhere: 'mCustomBtn3' => 'window.doSomethingFunction'

Motion (Animation, Transition)

Option Type Description
pMoveint By clicking on a pan button in the navigation bar the image will be paned by this percentage of visible area, e.g. 75
pZoomint By clicking on the image with the left mouse button or clicking on the plus button (zoom in) in the navigation bar, the image will be zoomed by this percentage, e.g. 100 (x2)
stepZoombool By clicking on the image with the left mouse button or clicking on the plus button (zoom in) in the navigation bar, the image will be zoomed to the next pyramid step, e.g. to 100%, 50%, 25%, 12.5% ...
autoZoomarray Multidimansional array with parameters for autozoom after the image is loaded.
autoZoom['enabled']bool Enable autozoom.
autoZoom['onlyFirst']bool Apply autozoom only on first loaded image in the gallery.
autoZoom['speed']int Motion speed for autoZoom in ms, e.g. 300
autoZoom['motion']string Motion type for autoZoom, e.g. 'swing'
autoZoom['pZoom']mixed Can be an integer, e.g. 150 (enlarge x2,5), string: 'fill', 'max' or percentage as a string, e.g. '50%'. 'fill' means to enlarge or expand the image to the extend, that there will be no background of the stage visible if image has different proportions. 'max' means to enlarge image to full size and the persentage like '35%' would zoom exactly to this specific value, whereby '100%' is equal to 'max'.
pZoomOutint By clicking on the image with the right mouse button (not aktivated by default in opera browser) or clicking on the minus button (zoom out) in the navigation bar, the image will be zoomed out by this percentage, e.g. 100 (/2).
zoomSpeedGlobalint Default speed for motions in ms, e.g. 500
moveSpeedint Motion speed in ms by clicking on arrows in navigation bar , e.g. 750
zoomSpeedint Motion speed by clicking on plus in navigation or left clicking the image in ms, e.g. 750
zoomOutSpeedint Motion speed by clicking on minus in navigation or right clicking the image, e.g. 750
cropSpeedint Motion spped for zoom in by selecting an image area in ms, e.g. 750
restoreSpeedint Motion speed by clicking on restore button in ms, e.g. 750; can be overridden by zoomMapSwitchSpeed
traverseSpeedint Sidewords motion speed in ms when reached 100% zoom and left clicked on image, e.g. 300
zoomFadeint Fade in time in ms of zoomed image after it has been loaded, e.g. 200 (0 for disabling fade in effect)
zoomFadeInint Fade in time of the first image loaded in ms, e.g. 300
buttonAjaxint Time in ms after which the zoomed image is starting to load when the user clicks on any button in navigation bar. Setting this to 0 will not allow to click twice on a button, e.g. 750
zoomEaseGlobalstring Default motion type, e.g. 'easeOutCirc'
zoomEaseInstring Motion for zoom in by clicking the plus button or the image, e.g. 'easeOutCirc'
zoomEaseOutstring Motion zoom out on clicking minus or right click the image, e.g. 'easeOutCirc'
zoomEaseCropstring Motion for zoom in by selecting an image area, e.g. 'easeOutCirc'
zoomEaseMovestring Sideward motion on clicking the arrow buttons in navigation, e.g. 'easeOutCirc'
zoomEaseRestorestring Motion on clicking the restore button, e.g. 'swing'
zoomEaseTraversestring Motion when reached 100% zoom and clicking the image, e.g. 'easeOutCirc'
gpuAccelarray Enable GPU rendering (translateZ) for desktop browsers.

Mousewheel Zoom In and Out

Option Type Description
scrollbool Enable mousewheel zooming. Can be switched on runtime with JavaScript: jQuery.axZm.scroll = false; // or true
mouseScrollEnablebool Enabling this option will not prevent scrolling the browser window with the mousewheel. Can be switched on runtime with javascript: $.axZm.mouseScrollEnable = false; // or true
mouseScrollEnableFSbool Separate switch for the above at fullscreen mode.
mouseScrollMsgarray Ver. 5.0.11+ if "mouseScrollEnable" is set to true, show a message that zoom with mouse wheel can be performed by pressing "Alt" or "Ctrl" button on the keybord. CSS: .axZm_ctrlZoomTxt, .axZm_ctrlZoomTxtInner
scrollAnmbool Enables / disables animation during mousewheel zoom in and out. If disabled the options scrollSpeed, scrollMotion and scrollPause have no effect!
scrollZoomint Percentage of zoom in / out on each mousewheel scroll. 16 is a good value, if scrollAnm is deactivated and 35 if scrollAnm is activated.
scrollAjaxint Time after the last wheel action or click on the image the ajax call is triggered. 750 is a good value, if scrollAnm is false and 1250 if scrollAnm is true.
scrollSpeedint If scrollAnm is true the duration of animation effect, e.g. 1500
scrollMotionstring If scrollAnm is true the animation motion type. 'easeOutQuad' is a good one.
scrollPauseint Disables scroll tick for this time period in ms. Helps to prevent to fast scrolling, e.g. 100
scrollPanRint When reached max zoom level (100) scroll has the same effect as "click - pan". However the mousewheel is real fast, so the user will get away from the desired crop to fast. You can reduce the normal click distance by this factor. 1 - means no effect in comparison to "click - pan"
false - means no "scroll - pan" at all
any number > 1 will "soften" this problem, whereas a bigger number means less pan each scroll
scrollOutReversedbool Behaivior during zoom out with the mouse wheel. The viewport is disabled. Instead coordinates of the oposit part of the image are passed to the zoom out function.
scrollOutCenterbool 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
zoomDragPhysicsfloat, bool Enables acceleration of the mouse while dragging resulting in a "throw" effect. Can be float value, max. 1.5 for now. Default: 0.75
zoomDragAnmbool Animate images while dragging (smooth motion). Not recommended for old browsers, if image tiles are loaded directly.
zoomDragSpeedint Time im ms the image needs to fully reach the mouse position on drag if zoomDragAnm is activated, e.g. 1000
zoomDragMotionstring Type of drag motion, e.g. 'easeOutCirc'.
zoomDragAjaxint Time im ms after the last drag action the ajax request is triggered, e.g. 750

Image Area Selector

Option Type Description
zoomOuterColorstring Color outside the selector, false to disable - makes image area selector a bit faster.
zoomOuterOpacityfloat Opacity outside the selector, [0-1], e.g. 0.4
zoomBorderColorstring Selector border color, e.g. '#006600' or 'green',
zoomBorderWidthint Selector border width in px, e.g. 1
zoomSelectionAnmbool Expand effect after the selection of imagearea.
zoomSelectionCrossbool Add cross in the middle of selection area, CSS: .axZm_zoomCropCross; In fact this could be not just a cross, but any other image as a background of the css class.
zoomSelectionCrossOpfloat Cross opacity, see zoomSelectionCross, e.g. 0.75
zoomSelectionModstring Zoom selector mod, possible values 'min' or 'max'.
zoomSelectionPropstring, float or false 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 corresponding to 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

Ajax Loader


Option Type Description
zoomLoaderEnablebool Enable ajax loader (animated icon or css3 animation) on top of the image during loading process.
zoomLoaderClassint CSS class name of the loader with an animated gif as a background, e.g. 'zoomLoader3' or css3 animation class. As background icon animation, it can also be a PNG "Filmstripe". In this case zoomLoaderFrames must be set to the amount of the frames in this Filmstripe.
zoomLoaderTransptype Loader opacity, [0-1], e.g. 0.9
zoomLoaderFadeInint Fade in speed of the loader in ms, e.g. 500
zoomLoaderFadeOutint Fade out speed of the loader in ms, e.g. 500
zoomLoaderPosstring Position or gravity of the loader, possible values: 'Center', 'TopLeft', 'TopRight', 'BottomLeft' or 'BottomRight'
zoomLoaderMarginint Margin in px for loader position. Does not apply, if zoomLoaderPos (loader position) value is 'center'.
zoomLoaderFramesint or false Instead of using a gif animation You can use any png image like a film stripe playing in endless loop. This option defines the number of frames, e.g. 12. All frames have to be equal in size and located under each other in one png image. Set this option to false if zoomLoaderClass contains a CSS class with an animated gif image as the background.
zoomLoaderCycleint Loop time (cycle time) in ms, 1000

Mixed Options

Option Type Description
cursorWaitbool Enable system wait cursor on image load.
cursorbool Cursor icons for different states located in /axZm/icon directory
disableAllMsgbool Disable all error and notification messages.
fullZoomBorderfloat Expends the zoom to max size (100%) if only a bit left to prevent zoom like 99,2%, [>1], e.g. 1.1 would expand to 100% if only 10% difference left. To disable set this option to 1.0
fullZoomOutBorderfloat Expends the zoom to min size (initial image size) if only a small fraction left , [>1], e.g. 1.1 would expand to initial image size (full image visible) if only 10% difference left. To disable set this option to 1.0
zoomTimeOutint Timeout for ajax zoom request in ms, e.g. 10000 or false for disabling.
errorsbool Display errors.
licenseErrorsbool Display license errors. Before version 4.0 license errors did not display if errors options was not set.
warningsbool Display warnings.
useSessbool Use session cookies for storing some imformation. Not necessary.
cachebool Use cached image files for user zooming session. If set to true, the script will not generate a zooming image, if it is alredy generated. This is only relevant if image tiles are not loaded directly or simpleMode is activated. It is only for /examples/example1.php
cacheTimetype Cache time in seconds - how long zoomed images should stay in cache folder. The script will automatically delete all cache files if they are older than this value. Should be at least 30 seconds, e.g. 300
picChmodarray Array with octal values for file permissions (chmod) setting for created images, e.g. 0644 or false.
cornerRadiusint Build in rounded corners in px. For deaktivating set this option to 0.
cornerRadiusNotRoundbool "cornerRadius" option builds a border around the player. If this value is set to true, then the border has no rounded corners.
innerMarginint Margin around the picture in px. Builds a solid border around it the image. If build in rounded corners (cornerRadius) are used set it to the same value, e.g. 5. If no build in counded corners are required, set this value to build solid border around the zoom picture. For deactivating set this option to 0.
zoomStatbool Append a div under navigation to display some information, mainly framerate during zoom for testing purposes. Switch it off after testing.
zoomStatHeightint Height in px of the appended div (zoomStat).
allowDynamicThumbsbool Allow to generate image thumbs dynamically by passing the values to "/axZm/zoomLoad.php"
allowDynamicThumbsMaxSizeint Max. thumbsnail size (width and height) that can be achieved by resizing an image, when allowDynamicThumbs is enabled.
dynamicThumbsMaxCacheTimeint Sets Cache-Control: maxage header for the dynamically generated images.
dynamicThumbsCachebool Cache thumbs to disk.
dynamicThumbsCacheByGETbool Allow change cache settings by GET parameter
dynamicThumbsAllowCropbool Allow to pass parameters, which will crop certain areas out of image and make the thumb.
dynamicThumbsCropMaxSizeint Max size for the thumbnails, when cropping parameters are passed
dynamicThumbsCropOnlyFromCachebool Return croped images only if they are already cached to disk. If this setting is true and cached version of the crop does not exist, then crop values will be ignored.
dynamicThumbsQualRangearray Quality range, which can be passed over query string ($_GET)
dynamicThumbsCtimebool Compare creation time of source image and thumb. If source image is newer, recreate the cached thumb.
dynamicThumbsInterlacestring, bool Ver. 5.1.0+ Interlace dynamically created thumbnails, possible values "Plane", "Line" or false
dynamicThumbsQualint Default JPG quality.
dynamicThumbsQualPngarray Default PNG quality.
dynamicThumbsStructurestring Please see subfolderStructure option.
dynamicThumbsStructChmodoctal Chmod for the created folders.
dynamicThumbsWtrmrkarray A bunch of settings to watermark thumbnails, which are created this way.
allowAjaxQueryarray Permission settings for querying images by the applications.
tapHideAllbool Hide / show all UI elements including zoom map and any other user injected elements by taping at the player. Works also on not touch devices, however zoomDoubleClickTap has to be set to some ms number.
tapHideExclarray Array with a list of CSS classes or IDs to exclude from hiding, when "tapHideAll" is enabled.
zoomDoubleClickTapint Double ckick or double tap in order to zoom in (out, when completely zoomed in). The integer value indicates the max double click speed in ms.
touchDragPageScrollmixed Scoll page on vertical touch motions, when pan mode is activated and the image is not zoomed. Can be float - width of the player compared to window width.
touchPageScollDisablebool Disable page scroll for touch devices.
touchDragPageScrollZoomedbool Scroll vertically if image is zoomed and pan mode is activated.
touchSpinPageScrollbool Scroll page on vertical touch motions, when spin mode is activated. Can be float - width of the player compared to window width.
touchPageScrollExclstring Automatically deactivate vertical page scroll if this value is contained in the string of parent ID of AJAX-ZOOM. You can also deaktivate vertical scroll by setting window.az_touchPageNoScroll to true.
disableMultitouchbool Disable multitouch events (ignore not primary events), should be set conditionally with JS by changing the value of jQuery.axZm.disableMultitouch.
autoHideEllDelayint Elements like "mNavi" or zoom slider can be configured to hide if mouse is not over the player. This option determins the delay for hiding.
touchSettingsarray 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 similar to jQuery.extend();
polyfillbool Use window.requestAnimationFrame for jQuery animations. Requires jQuery ver. 1.8+
lockAllbool Ver. 5.1.0+ blend out all page elements, when AJAX-ZOOM is in fullscreen mode. Do not enable if there are any troubles because of that.
zCbool In the "unlimited" version check for tiles being in zoomify format.
jsonInfobool Store information about source image and (cache, tiles...) images, which are generated by AJAX-ZOOM for this image in a json file, located under $zoom['config']['jsonPath'] / $zoom['config']['jsonDir'] in subdirectories All files are generated and updated dynamically even if cached images are already present before this option were enabled The advantage of it is that when source images and AJAX-ZOOM - generated images are stored on network or external hard drives, the image size and existence of AJAX-ZOOM - generated images are stored in json file and are not needed to be read from filesystem.

Watermark

with PNG image, text or both

Option Type Description
watermarkbool Enable watermark with an PNG image.
wtrmrkarray Multidimensional array with watermark options and settings:
wtrmrk['gravity']string Position or gravity of the watermark image. Possible values: NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast
wtrmrk['file']string PNG 24 Bit image with transparancy, located in icon directory, e.g. 'copyright.png'; The PNG image can now be anyware, just define the absolute path to the image, e.g. '/pic/watermarks/watermark.png';
wtrmrk['watermarkTiles']bool When image tiles are loaded directly (pyrLoadTiles is set to true) enable this option to put watermark directly on all created image tiles.
wtrmrk['watermarkTilesFill']bool Watermark all over the image with $zoom['config']['wtrmrk']['file']
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.
wtrmrk['initPicFill']bool Watermark all over the preview image with $zoom['config']['wtrmrk']['file']
wtrmrk['initPicStretch']bool Adjust watermark size to target size (picDim)
Watermark with text
textbool This is a general switch for puting text on the zoomed image. This setting works only if $zoom['config']['pyrLoadTiles'] is set to false, which is not intended in most cases! If you want to add protection to your hq images use $zoom['config']['watermark'] and $zoom['config']['wtrmrk']['watermarkTiles'] instead.
txtarray Multidimensional array with text watermark options and settings. This options can be repeated allowing more text blocks at different positions,
txt['fontFile']string Font ttf file, e.g. 'arial.ttf'
txt['fontSize']int Font size pt, e.g. 12
txt['fontColor']array Font color array R (Red), G (Green), B (Blue), e.g. array('R' => 255, 'G' => 255, 'B' => 255);
txt['fontTransp']int Text opacity [0-100], e.g. 100 (no opacity)
txt['fontGravity']string Array of multiple positions of the same text. Possible values: 'NorthWest', 'North', 'NorthEast', 'West', 'Center', 'East', 'SouthWest', 'South', 'SouthEast'
txt['fontMargin']int Font margin from the edges of the image in px.
txt['fontAngle']int Font angle deg.
txt['fontBox']bool Enable background box.
txt['fontBoxColor']array Background color of the box - R (Red), G (Green), B (Blue), e.g array('R' => 0, 'G' => 0, 'B' => 0);
txt['fontBoxTransp']int Background box opacity [0-100].
txt['fontBoxPadding']int Background box padding in px.
Virtual Watermark
vWtrmrkstring, bool Virtual watermark as a layer over the image. Does not provide any real protection to the images! CSS class with a png background image, e.g. 'zoomWtrmrk' or false to disable.

Image Pyramid with Tiles


Option Type Description
pyrTilesbool Enable image pyramid with tiles.
pyrInterlacestring, bool 5.1.0+ Interlace tiles, possible values "Plane", "Line" or false
pyrDialogbool Display info dialog after tiles have been made on the fly. Happens only once for each image.
pyrQualint JPG quality of the generated tiles. 100 is recommended when image tiles are stitched server-side. In this case the JPG compression level of the final output image is defined by qual. If pyrLoadTiles is aktivated and image tiles are loaded directly, the recomended JPG quality is 80.
pyrQualPngarray Quality for tiles under pngMode.
tileSizeint Size of the tiles in px, [128-768], e.g. 256 or 384
tileOverlapint Ver. 5.1.2+ Tiles overlap value. If you change the value after any tiles were already generated previously, then all tiles need to be regenerated. So delete all present tiles after the value has been changed!
tileRetryTimeint Delete make.txt file indicating that tiles are being generated and retry after this seconds value.
pyrAutoDetectbool This option should only be set to true if there are different tileSizes in the image collection with zoom functionality. Different tilesizes arise out of changing the tileSize option after some image tiles pyramids have already been generated. So in case tileSize values are going to be changed afterwards, consider rebuilding all tiles too and disable this option.
pyrTilesPathstring Folder where image tiles will be saved, e.g. '/pic/zoomtiles/'. Can be a http password protected direcotry (.htaccess, .htpasswd) only if pyrLoadTiles is set to false, which means, that image tiles are stitched server side before sending them as one image to the browser. Otherwise, if pyrLoadTiles is set to true this directory can not be http password protected. In this case image tiles are loaded directly by the client. A subfolder with the name of the picture without .jpg containing the image tiles will be created in this folder. PHP should in any case be able to write to and read from this directory!
pyrChmodint Chmod for the new created subfolders, where the tiles will be stored separately for each image, e.g. 0755
pyrProgstring With which imaging library make image tiles, possible values: 'GD' or 'IM'. GD stands for with PHP bundled GD2 and IM for ImageMagick. For stitching tiles see pyrStitchProg option.
pyrProgImLimitarray Only for ImageMagick: limit memory and other settings for making tiles. www.imagemagick.org/script/command-line-options.php#limit
pyrImMethodint Ver. 5.1.2+ Possible values: 1 or 2. Method 1 will cut the image "old way", which works also with older ImageMagick versions and proved to be stable Method 2 is an optimized way, which will spped up the process by 30-50% depending on image size If the image is very large and exceeds the resolution stated in $zoom['config']['pyrIMcacheLimit'], then method 1 will be applied automatically. When you have troubles with the faster method, apply method number 1.
pyrProgErrorRemovebool In case, when ImageMagick or GD can not allocate sufficient RAM (especially on very large images), not all tiles for an image might be generated. If pyrProgErrorRemove is set to true the program will delete the tiles and the created folder for this unsuccessful attempt.

If You use GD make sure, that memory_limit ( e.g. ini_set ('memory_limit', '512M') in zoomConfig.inc.php ) or even more is possible! If You have imageMagick installed please notice $zoom['config']['pyrIMcacheLimit'] and $zoom['config']['pyrProgImLimit'] options.
pyrIMcacheLimitfloat With ImageMagick ($zoom['config']['pyrProg'] = 'IM';) it is possible to proceed very large images (100 Mio Pixel e.g. 20.000px x 5.000) with relative low RAM. This setting will force to cache the image to disk (and not RAM) if image dimensions (width x height) exceed this settings value in mio. pixel, e.g. imagesize: 5.200 x 3.700 = 19.24 mio. pixel. However this procedure is much slower, so be patient! With 512mb RAM we found a limit from around 50 Mio Pixel (Will override any $zoom['config']['pyrProgImLimit']['memory'] and ['map'] settings) Set $zoom['config']['pyrDialog'] = true for testing purposes.
pyrStitchProgstring With which imaging library stitch tiles, possible values: 'GD' or 'IM'. GD stands for native PHP GD2 and IM for ImageMagick. For making tiles refere to pyrProg option. If pyrLoadTiles is activated there is no need to stitch image tiles on the server.
pyrStitchImLimitarray Only for imagemagick: limit memory and other settings for stitching tiles. www.imagemagick.org/script/command-line-options.php#limit
pyrStitchSelfloat Which level to select during zoom. Value equal or bigger than 1.0; 1.2 means that the stitched image has to be at least 20% larger or equal, than outputted cropped size. If not, the next bigger level will be chosen and scaled down to the needed output size.
pyrLoadTilesbool Load tiles directly without stitching them server side. Increases speed and user experience, reduces operational demands to server hardware.
pyrTilesExtendint Ver. 5.3.11+ Load some tiles while panning that are not visible in viewport. The value defines the pixel offset that should be covered by tiles outside of the viewport;
pyrTilesFadeInSpeedint If pyrLoadTiles is activated, the image tiles fadein speed in ms.
pyrTilesFadeLoadint If pyrLoadTiles is activated, the image tiles fadein speed while dragging (panning) in ms.
pyrTilesForcebool Byload image tiles even if it is not needed.

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


pyrLoadTiles must be enabled.

Option Type Description
fullScreenEnablebool Enable fullscreen mode.
fullScreenNaviButtonbool Enable fullscreen button in the navibar.
fullScreenCornerButtonbool Enable fullscreen button at the top right corner.
fullScreenCornerButtonPosstring Position of the fullscreen button image, possible values: topLeft, topRight, bottomLeft, bottomRight
fullScreenCornerButtonMarginXint Horizontal distance of the fullscreen button to the edge of the player.
fullScreenCornerButtonMarginYint Vertical distance of the fullscreen button to the edge of the player.
fullScreenCornerButtonMouseOverbool Enable fullscreen button on mouseover.
fullScreenNaviBarbool Enable navi bar at fullscreen mode.
fullScreenVertGallerybool Show vertical gallery in fullscreen mode. Both - vertical and horizontal are not possible any more (does make more problems than sense). You can however enable e.g. horizontal gallery in regular mode and enable vertical in fullscreen mode or disable gallery at one of the mods at all!
fullScreenHorzGallerybool Show horizontal gallery in fullscreen mode. Both - vertical and horizontal are not possible any more (does make more problems than sense). You can however enable e.g. horizontal gallery in regular mode and enable vertical in fullscreen mode or disable gallery at one of the mods at all!
fullScreenExitTextarray Show text about using ESC to exit the fullscreen mode on entering (flash like option). If false, disabled.
fullScreenExitTimeoutint Time in ms after which the ESC message disappears.
fullScreenExitOncebool 5.3.11+ Show ESC text message only once.
fullScreenRelstring The size of fullscreen with Javascript is only possible relative to the inner width and height of the current window. The default setting is 'window'. You can however set the ID of any other element on your page instead.
fullScreenMapFractfloat, bool Relative size of the Zoom Map in fullscreen mode. Float < 1.0; At false the setting defaults to that of the not fullscreen mode.
fullScreenMapWidthint, bool Fixed width of the Zoom Map in px. at fullscreen mode. See also mapWidth
fullScreenMapHeightint, bool Fixed height of the Zoom Map in px. at fullscreen mode. Siehe auch mapHeight
fullScreenKeepZoomarray Try to keep zoom level (visible part of the zoomed image), when changing to fullscreen mode, back or resizing the player / browser window size.
fullScreenApibool Enable native fullscreen JavaScript API if supported by the browser.
fullScreenSpacearray Add containers / divs for custom content around the player at fullscreen mode. You can access the divs best over onFullScreenSpaceAdded callback and append your content to these divs with IDs #axZmFsSpaceTop, #axZmFsSpaceRight, #axZmFsSpaceBottom and #axZmFsSpaceLeft

Download

Download full sized image

Option Type Description
allowDownloadbool Allow to download full sized / original image or full image in certain resolution.
downloadButtonbool Enable download button in the navi bar.
downloadResmixed Download resolution of the image. Possible values:
  • false - download the original image in its original format.
  • string - e.g. '1024x768' - download the image in certain resolution as jpg file.
  • array - e.g. array('1024x768', '1280x1024', '1600x1050') - download the image in this resolution depending on second argument 'res' passed by the API function jQuery.fn.axZm.downloadImg(id, res);
downloadQualint Output quality of the jpg image if $zoom['config']['downloadRes'] is not false.
downloadQualPngarray Output quality of the PNG image if $zoom['config']['downloadRes'] is not false.
downloadCachebool Cache files in $zoom['config']['downloadRes'] resolution once they have been downloaded by a user.

Defining the images

Introduction, please read

There are three ways of how to tell AJAX-ZOOM which images to load. The first two are very easy to use and do not require programming skills.

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 (starting with ./ or ../) may lead to not showing them under certain conditions which depends on users Browser settings. A simple workaround is to always use absolute paths. Please avoid using relative paths on productive environments.

A very good example to see all these methods is example example27.php

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:

	<div id="test">This text will be replaced after AJAX-ZOOM is loaded</div>

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

	<div id="test">This text will be replaced after AJAX-ZOOM is loaded</div>

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


	<div id="test">This text will be replaced after AJAX-ZOOM is loaded</div>

	<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

Please see the examples. The easiest way is the integration via IFRAME. For an IFRAME example, please have a look at example13.php .

Batch process

zoomBatch.php is the file where you can pre-process a large amount of images with couple clicks and get visual feedback.

Since the processing of the images can be also 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 if you plan to to make public a larger amount of images at once, we would recommend to pre-proceed them with zoomBatch.php

From Ver. 4.2.1+ you can process folders and their subfolders instantly with one click.

Before using zoomBatch.php you must open it with an editor and setup some variables including the password for accessing the file over the browser.

API

On demand, API can be extended.

JavaScript Vars

There are many other useful variables. If you are developing a sophisticated application and require something - please ask.

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

JavaScript Callbacks / Hooks

AJAX-ZOOM has many callbacks which can be used to develop custom applications.

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

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

If you are working with AJAX-ZOOM JavaScript API functions, some of which are also used in the examples, then check if the arguments of the API functions are also created as callbacks for an action.

Callback Description
onBeforeStart Triggers just after jQuery.fn.axZm starts initializing.
onStart Triggers while initialization after passing some tests.
onImageLoad Triggers after any new image (for 360 the first image) is loaded. onImageLoad is triggerend before onLoad.
onLoad Triggers after first image is loaded.
onZoom Triggers alsways on any zoom in or out.
onZoomStart Triggers only at the beginning of any zoom in or out.
onZoomTo Triggers only when using API jQuery.fn.axZm.zoomTo()
onSpinChange Triggers when frames of a 360/3D spin changes.
onSpinStart Triggers when the user starts spinning with the mouse or finger
onSpinMove Triggers when the user spins with the mouse or finger
onSpinEnd Triggers when the user ends spinning with the mouse or finger
onSpinEndRotate Triggers when because of mouse acceleration or swipe farther rotation is triggered. When this callback returns true, then the default internal action does not take place. So you can override and do something different. The first parameter return object with useful information.
onSpinAnmStart Triggers when spinSmoothing is activated and instant rotation starts or jQuery.fn.axZm.spinRotate API is used.
onSpinAnmEnd Triggers when spinSmoothing is activated and instant rotation ends or jQuery.fn.axZm.spinRotate API is used.
onStartPlay Triggers when autoPlay starts.
onStopPlay Triggers when autoPlay stops.
onDragStart Triggers when user starts dragging.
onDragDrag Triggers when user drags zoomed image.
onDragEnd Triggers when user stops dragging.
onDragEndAcc If zoomDragPhysics is activated this callback will be triggered after the animation is done.
onMapDragStart Triggers when user starts dragging the zoomMap.
onMapDragDrag Triggers when user drags zoomed image over zoomMap.
onMapDragEnd Triggers when user stops dragging image over zoomMap.
onZoomInClickStart Triggers after the user clicks on the image to zoom in. If your function returns false the zooming action does not take place! Useful if you want to inspect the coordinates of the click and e.g. open a popup for this position...
onZoomInClickEnd Triggers after the user clicks on the image to zoom in and the zoom animation is completed.
onZoomOutClickStart Triggers after the user clicks on the image to zoom out (right click or SHIFT + left click).
onZoomOutClickEnd Triggers after the user clicks on the image to zoom out and the zoom animation is completed.
onSelection Triggers during the selection of the image area.
onSelectionEnd Triggers after the image area is selected (mouseup).
onImageChange Triggers on changing the image from gallery.
onImageChangeEnd Triggers when changing the image from gallery is done.
onCropEnd Triggers after the zoomed image portion is croped and loaded / image tiles are loaded.
onRestoreStart Triggers at the beginning when the user hits restore button or restoring is triggered by the API. The speed till the image zooms back to it's initial stage is controlled by zoomMapSwitchSpeed and restoreSpeed.
onRestoreEnd Triggers when the image zooms back to initial stage (full image visible). The speed till the image zooms back to it's initial stage is controlled by zoomMapSwitchSpeed and restoreSpeed.
onFullScreenStart Triggers when initializing the fullscreen.
onFullScreenStartFromRel Triggers when starting initializing the fullscreen from relative sized AJAX-ZOOM.
onFullScreenStartEndFromRel Triggers when initializing the fullscreen from relative sized AJAX-ZOOM is done.
onFullScreenReady Triggers after fullscreen view is ready.
onFullScreenResizeEnd Triggers after window resize at fullscreen mode.
onFullScreenClose Triggers at the beginning of restore process from fullscreen to notmal mode.
onFullScreenCloseFromRel Triggers at the beginning of restore process from fullscreen to relative sized mode.
onFullScreenCloseEndFromRel Triggers at the end of restore process from fullscreen to relative sized mode.
onFullScreenCloseEnd Triggers at the end of restore process from fullscreen to normal mode.
onFullScreenSpaceAdded Triggers when extra space in fullscreen mode is created. See also fullScreenSpace
onFullScreenSpaceAddedFirst Triggers when extra space in fullscreen mode is created for the first time.
onFullScreenSpaceRemove Triggers before extra space in fullscreen mode is removed.
onFullGalShow Triggers when inline gallery is shows.
onFullGalShow Triggers when inline gallery is hidden.
onStartSpin Triggers when 360 spinning starts by some option or API like jQuery.fn.axZm.spinTo.
onStopSpin Triggers when 360 spinning stops after beeing triggered by some option or API like jQuery.fn.axZm.spinTo.
onSliderZoom Triggers while zooming with the slider.
onZoomOutButtonStart Triggers when hitting the button for zoom out or using API method for this.
onZoomOutButtonEnd Triggers when hitting the button for zoom out or using API method for this.
onZoomInButtonStart Triggers when hitting the button for zoom in or using API method for this.
onZoomInButtonEnd Triggers when hitting the button for zoom in or using API method for this.
onMouseWheelZoomIn Triggers on zooming with the mouse(wheel).
onMouseWheelZoomOut Triggers on zooming with the mouse(wheel).
onButtonClickMove_N Triggers when panning (Top) with the buttons or using API method for this.
onButtonClickMove_E Triggers when panning (Right) with the buttons or using API method for this.
onButtonClickMove_S Triggers when panning (Bottom) with the buttons or using API method for this.
onButtonClickMove_W Triggers when panning (Left) with the buttons or using API method for this.
onSpinPreload Triggers after each image of the spin is preloaded.
onSpinPreloadEnd Triggers when all initial images for 360 or 3D are preloaded. This callback is not triggered, when using the jQuery.fn.axZm.loadAjax360Type API. Instead, please use the arguments of this API function to trigger callbacks you need.
onMapMouseOverClick Triggers on click when zoom map selector is dragged by mouseover.
onMapMouseOverDbClick Triggers on double click when zoom map selector is dragged by mouseover .
onVertGalLoaded Triggers when vertical gallery is loaded.
onHorGalLoaded Triggers when horizontal gallery is loaded.
onFullGalLoaded Triggers when full gallery is loaded.
onHotspotsDragStart Triggers after a hotspot starts dragging.
onHotspotsDragDrag Triggers while a hotspot is dragging.
onHotspotsDragEnd Triggers after a hotspot has been dragged.
onHotspotDelete Triggers after a hotspot is deleted.
onHotspotToggle Triggers when a hotspot changes its visibility state.
onImageProcessStart Triggers when image tiles || initial image || map image are starting to be generated on the fly.
onImageProcessEnd Triggers when image tiles || initial image || map image are done with generation on the fly.
onBeforePrevNext Triggers when any action for loading "next" or "prev" image from gallery is executed. This callback receives an array as argument defining if it is "next" or "prev" action, also the next gallery ID (from jQuery.axZm.zoomGA) which is going to be loaded without your intervention. If your custom function will return a different valid gallery ID or image name, then this image will be loaded!
onSwipe Triggers after swiping with the finger and sliding to next image. First argument is the direction, e.g. 'right' or 'left'; of the function returns false sliding to next image does not occure. Implemented e.g. in this example
onSwipeEnd Triggers when swiping with the finger and sliding to next image successfully ended.
onSwipeEnd Triggers when swiping with the finger and sliding to next image is aborted.

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)

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

Parameter:

Example:

See this example.
jQuery.fn.removeAZ()

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

jQuery.fn.axZm.addCallback(name, obj)

Add callback function

Parameter:

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

Example:

See example14.php

jQuery.fn.axZm.areaResize (event, area)

Sets a visible image area selection

Parameter:

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

Example:


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

Removes a visible image area selection

Parameter:

  • @param bool effect - adds a nice effect

Example:


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

Restarts image area for tool selection

jQuery.fn.axZm.changeTheme (theme)

Change theme css file, see also themeCss

jQuery.fn.axZm.citeAllInitialPic (opt)

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

Parameter:

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

Example:


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

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

Close fullscreen mode

jQuery.fn.axZm.fullScreenRelChange (id, clb)

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

Parameter:

  • @param id: id of the new container
  • @param clb: callback function
jQuery.fn.axZm.fullScreenRelRestore (clb)

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

Parameter:

  • @param clb: callback function
jQuery.fn.axZm.downloadImg (id, res)

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

Parameter:

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

Example:


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

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

Parameter:

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

Example:


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

Hide "Inline Gallery"

jQuery.fn.axZm.fullGalShow ()

Show "Inline Gallery"

jQuery.fn.axZm.fullGalToggle ()

Toggle "Inline Gallery"

jQuery.fn.axZm.getAllCallBackNames ()

Returns an array with all possible callbacks.

Example:


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

Experimental: retrieve background color of the image

Parameter:

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

Example:


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

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

jQuery.fn.axZm.getCurrentZoom ()

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

jQuery.fn.axZm.getCurrentZoomLevel ()

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

jQuery.fn.axZm.getLastZoomInfo ()

Returns js object with coordinates of last zooms

jQuery.fn.axZm.getLiveZoom ()

Returns js object with coordinates of zoom

jQuery.fn.axZm.getImagePath (id, key)

Returns image path of a thumb defined by key.

Parameter:

  • @param int id: id of the image.
  • @param string key: possible values are 'full', 'vert', 'horz' and 'init'.
jQuery.fn.axZm.getImgPath ()

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

jQuery.fn.axZm.helpToggle (content)

Toggle help layer.

Parameter:

  • @param string content: any html or text
jQuery.fn.axZm.helpShow (content)

Show help layer.

Parameter:

  • @param string content: any html or text
jQuery.fn.axZm.helpHide ()

Close help layer.

jQuery.fn.axZm.initFullScreen ()

Start fullscreen mode

jQuery.fn.axZm.installPath ()

Tries to return the path of /axZm directory.

jQuery.fn.axZm.killInternalGalleries ()

Stop running all internal galleries, see also axZmThumbSlider.

jQuery.fn.axZm.mNaviRebuild ()

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

jQuery.fn.axZm.openFullScreen (path, parameter, callbacks, relCont, apiFullscreen, disableEsc, postMode)

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

Parameter:

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

Example:


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

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

Related:

If you want to initialize AJAX-ZOOM in non responsive layout you can use jQuery.fn.axZm.load
jQuery.fn.axZm.openResponsive (path, parameter, callbacks, relCont, apiFullscreen, disableEsc, postMode)

alias jQuery.fn.axZm.openFullScreen

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

Loads a different set of images into AJAX-ZOOM instance

Parameter:

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

Example:


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

For implemention also see example8.php

Related:

jQuery.fn.axZm.zoomSwitch
jQuery.fn.axZm.loadAjax360Type (query_string, clbLoad360Data, clbLoad360Imge, clbAfter360Preload)

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

Parameter:

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

Example:


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

For implemention also see example36.php

Related:

jQuery.fn.axZm.loadAjaxSet
jQuery.fn.axZm.load (options)

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

Parameter:

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

Example:


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

Related:

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

jQuery.fn.axZm.moveDir (dir)

Move in certain direction

Parameter:

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

Example:


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

Pan to x, y coordinates

Parameter:

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

Example:


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

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

jQuery.fn.axZm.preloadAllGalleryThumbs ()

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

jQuery.fn.axZm.removeDragToSpinMsg (fadeout)

Reload thumbs in horizontal gallery

Parameter:

  • @param bool fadeout: if true the message will be faded out
jQuery.fn.axZm.resizeStart (endTime)

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

Parameter:

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

Example:


		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.resizeStart(1);">Redraw</a>
	
jQuery.fn.axZm.resetMap (w1, h1, w2, h2)

Resize and reset map.

Parameter:

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

Example:


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

Completely removes AJAX-ZOOM

Example:


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

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

Parameter:

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

Example:


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

Spin to any direction by a number of frames.

Parameter:

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

Example:


		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.spinBy(-2, 0, false);">Spin by -2</a>
	
jQuery.fn.axZm.spinBySmooth (x, z, duration, easing, callback, zoomTo)

Spin to any direction by a number of frames.

Parameter:

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

Example:


	    <a href="javascript:void(0)" onClick="jQuery.fn.axZm.spinBySmooth(-5);">Spin by -5 frames smooth </a>
    
jQuery.fn.axZm.spinStart (rounds, roundTime, mouseOverStop, opposite, callback)

Start spinning 360 object.

Parameter:

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

Example:


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

Stop spinning 360 object.

Example:


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

Toggles spin / pause.

Example:


		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.spinPlayToggle();">Play / Pause</a>
	
jQuery.fn.axZm.spinTo (frameNumber, speed, easing, callback, zoomTo)

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

Parameter:

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

Example with callback:


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

Example with spin and zoom simultaneously:


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

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

Parameter:

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

Example:


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

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

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

Start slideshow

jQuery.fn.axZm.switchCrop ()

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

Example:


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

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

Example:


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

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

Example:


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

Returns current state

Example:


		console.log($.fn.axZm.getCurrentMod());
	
jQuery.fn.axZm.tapHide (excludeArray)

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

Parameter:

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

Example:


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

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

Example:


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

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

Parameter:

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

Example:


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

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

Parameter:

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

Example:


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

Triggers zoom in

Parameter:

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

Example:


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

Triggers zoom out

Parameter:

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

Example:


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

Reset the view to initial state

Parameter:

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

Example:


		<a href="javascript: void(0)" onClick="jQuery.fn.axZm.zoomReset();">Reset</a>
	
jQuery.fn.axZm.zoomPrevNext (dir, galleryFadeInAnm, once, callback)

Switch to next or previous image in the gallery

Parameter:

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

Example:


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

For implemention see also this example

jQuery.fn.axZm.zoomSwitch (zoomID, galleryFadeInAnm, once, callback, callback1)

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

Parameter:

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

Example:


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

For implemention see alsothis example

jQuery.fn.axZm.zoomSwitchQuick (zoomID, callback)

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

Parameter:

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

Example:


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

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

Parameter:

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

Example:


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

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

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

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

For implemention see example10.php extensive example.

Related vars:

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

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

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

JavaScript hotspots methods

Some methods to handle hotspots on 2D, 360 and 3D

jQuery.fn.axZm.createNewHotspot (param)

Create new hotspot on the fly.

Parameter:

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

Example:


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

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

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

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

Notes:

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


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

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

			// Then see above jQuery.fn.axZm.createNewHotspot
			return false; // important!!!
		}
	
jQuery.fn.axZm.convertHotspotPositionToPx (pos)

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

Parameter:

  • @param object pos: position object

Example:


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

Delete / remove hotspot

Parameter:

  • @param string name: name of the hotspot

Example:


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

Hide one or more loaded hotspots

Parameter:

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

Example:


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

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

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

Parameter:

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

Example:


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

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

Hide all hotspots

Parameter:

  • @param function callback: optional callback function

Example:


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

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

Parameter:

  • @param function callback: optional callback function

Example:


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

Init / rebuild hotspots

Parameter:

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

Example:


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

Returns all hotstpot configuration options as js object

Example:


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

"manually" remove all tooltips from the hotspots

Example:


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

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

Parameter:

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

Example:


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

Returns hotstpot object that can be saved as JSON

Parameter:

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

Example:


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

Returns only positions object of a specific hotspot

Parameter:

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

Example:


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

Returns position object of a specific hotspot and frame

Parameter:

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

Example:


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

Hide hotspots

Example:


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

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

Parameter:

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

Example:


		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.hotspotsDraggable()">Dragable hotspots</a>
	
jQuery.fn.axZm.modifyHotspotPosition (name, frame, pos, set)

Modifies position and or dimensions of the already present hotspot

Parameter:

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

Example:


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

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

Parameter:

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

Example:


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

Simply remove and delete all hotspots.

Parameter:

  • @param function callback: optional callback function

Example:


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

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

Parameter:

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

Example:


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

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

Parameter:

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

Example:


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

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

Parameter:

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

Example:


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

Show hotspots

Example:


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

Toggle hotspots

Example:


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

JavaScript hotspots options

Create 2D/ 360°/ 3D product presentations with clickable hotspots. The following parameters describe $.axZm.hotspots javascript object and are loaded over separate file, see e.g. /examples/example33.php or over $.fn.axZm.createNewHotspot API

Key Default Description
shape 'point' Shape of the hotspot. Possible values "point" or "rect". Type: bool
enabled true State of defined hotspot. Possible values true and false. 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". For landmarks set to "top"! 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. Type: string
zIndex 1 zIndex of the hotspot. Type: integer
borderWidth 0 CSS border width. Type: integer
borderColor 'red' CSS border color. Type: string
borderStyle 'solid' CSS border style, e.g. 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset' or combinations of them. Type: string
cursor 'pointer' Mouse cursor. Type: string
zoomRangeMin 0 Min zoom level for hotspot to be shown. Type: 0 <= integer <= 100
zoomRangeMax 100 Max zoom level for hotspot to be shown. 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". 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". Image can be any absolute path with and without http. Type: string
hotspotClass false Instead of using png icons for hotspots you could also use CSS class, e.g. "axZm_cssHotspot" as an example. You could also use two CSS classes, e.g. "axZm_cssHotspot axZm_pulse" will result in a pulsing css hotspot. Type: string
hotspotClassOnHover false Additional CSS class(es) added onmouseover. 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. Type: bool
hotspotTextClass false Additionally to CSS class ".axZmHotspotText" add on ther CSS class to hotspotText layer. Type: false or string
hotspotTextCss {} Additionally to CSS class ".axZmHotspotText" CSS which is added to hotspotText layer. Type: object
hotspotObjects {} Any number of absolutely positioned layers directly inside the hotspot if shape value is "rect". 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. Type: false or string
altTitleAdjustX 20 Horizontal offset of the altTitle. Type: integer
altTitleAdjustY 20 Vertical offset of the altTitle. Type: integer
labelTitle false Sticky label (or tooltip) at any position near a hotspot, accepts HTML. 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'. Type: string
labelBaseOffset 5 Auto offset in all directions. Type: integer
labelOffsetX 0 Horizontal offset. Type: integer
labelOffsetY 0 Vertical offset. Type: integer
labelClass false CSS class instead of axZmHotspotLabel. Type: false or integer
labelOpacity 1 Opacity level. Type: float <= 1.0
toolTipTitle false Title shown in the tooltip; value can be also a function which returns a string or HTML; in case the value is a function the first parameter passed to it is an object with all configs of this hotspot including name. Type: false, string or function
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> value can be also a function which returns a string or HTML; in case the value is a function the first parameter passed to it is an object with all configs of this hotspot including name. Type: false, string or function
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', '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. 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
toolTipClickClose true When clicked on the hotspot with already opened toolTip from the same hotspot, the toolTip will be closed. Type: bool
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. 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'. 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. 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. Type: bool
toolTipOverlayOpacity 0.75 Overlay opacity. Type: float <= 1.0
toolTipOverlayColor '#000000' Overlay color. Type: string
toolTipOverlayClickClose false Close tooltip by clicking on the overlay. Type: bool
expTitle false Title for the expandable overlay. Type: string
expHtml false Besides HTML or your text you could also load external content in iframe! The prefix for the source is "iframe:" e.g. to load an external page simply put something like this in the descripion: "iframe://www.some-domain.com/123.html" To load a YouTube video you could put this (replace eLvvPr6WPdg with your video code): "iframe://www.youtube.com/embed/eLvvPr6WPdg?feature=player_detailpage" To load some dynamic content over AJAX use "ajax:" as prefix, e.g. "ajax:/test/some_content_data.php?req=123". Type: string
expFullscreen false If true, the overlay will open at fullscreen (window). Type: bool
href false Simple link for the hotspot. Type: string
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:
jQuery.fancybox(
[{
	'href': '/path/some/image1.jpg',
	'title': 'Description 1 image'
},{
	'href': '/path/other/image2.jpg',
	'title': 'Description 2 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. Type: function
onRender null Your custom function when a particlar hotspot is added to the DOM; receives name of the hotspot as argument. Type: function
mouseover null Your custom mouseover event function. Type: function
mouseout null Your custom mouseout event function. Type: function
mouseenter null Your custom mouseenter event function. Type: function
mouseleave null Your custom mouseleave event function. Type: function
mousedown null Your custom mousedown event function. Type: function
mouseup null Your custom mouseup event function. Type: function
position {} position is a JS object with the positions of a particular hotspot, e.g.
position: {
	1: {left: 1500,
		top: 720
	},
	3: {left: 660,
		top: 710
	},
	4: {left: 760,
		top: 510
	}
}
The keys (1,2,3 ...) can be numbers (starting from 1, not 0) or filenames of particular frames. In case a key is omited the hotspot will not be shown in that particular frame.

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

PHP Class Methods: axZm.class.php

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

Usage: $axZm->methodName(param)

Under construction. This section needs update!
$axZm -> makeFirstImage($zoom, $skipInitialImage)

Generate initial image

Parameter:

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

Make all gallery thumbs

Parameter:

  • @param array $zoom - Array with all configuration parameters.
$axZm -> makeThumb($zoom, $pic_list_array, $zoomID)

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, $options)

Make thumbnails and crops on-the-fly

Parameter:

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

Create image pyramid with tiles from source image

Parameter:

  • @param array $zoom - Array with all configuration parameters.
$axZm -> zoomReturnCrop($zoom)

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

Parameter:

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

PHP Class Methods: axZmH.class.php

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

Usage: $axZmH->methodName(param)

Under construction. This section needs update!
$axZmH -> removeAxZm($zoom, $pic, $arrDel, $self)

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

Parameter:

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

Example:


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

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

Version History

Date Release notes
Ver. 5.4.25
Date: 2023-11-08
  • Added support for PHP 8.2.x
Ver. 5.4.24
Date: 2022-12-11
  • A small change for when a user opens and closes AJAX-ZOOM repeatedly very quickly.
Ver. 5.4.23
Date: 2022-11-22
  • Fixed host's port issue for development.
  • Removed PHPExcel from the package due to lack of use and obsolescence of the PHPExcel classes.
Ver. 5.4.22
Date: 2022-09-27
  • Fixed an error in the compiled code that caused not to create image tiles when using ImageMagick and 2 for the value of the "pyrImMethod" option.
Ver. 5.4.21
Date: 2022-09-21
  • A few bugfixes for PHP 8
Ver. 5.4.20
Date: 2022-08-16
  • Added support for PHP 8.1
  • The minimal PHP version is 5.4, and the minimal Ioncube loader version is 5.0 now.
Ver. 5.4.19
Date: 2022-06-01
  • More corrections for IOS 15
  • A small bugfix for when using jQuery 3.6
Ver. 5.4.18
Date: 2022-05-27
  • Repeated fixes for IOS 15 on iPhone issues at fullscreen mode regarding the iPhone's taskbar appearing and disappearing on diverse gestures, especially scrolling down that should only pan a zoomed view. The taskbar and the address bar are always visible now. That is something that you cannot prevent any longer via pure JavaScript.
Ver. 5.4.17
Date: 2022-02-09
  • A few improvements of the AJAX-ZOOM core's "mNavi" option.
  • Added an option to the mouseover extension..
Ver. 5.4.16
Date: 2021-11-11
  • Fixed IOS 15 on iPhone issues at fullscreen mode regarding the iPhone's taskbars appearing and disappearing on diverse gestures. This is an important update for IOS 15 users on iPhone!
Ver. 5.4.15
Date: 2021-10-29
  • Added options for swiping sensetivity.
Ver. 5.4.14
Date: 2021-08-18
  • Fixed an issue with the postMode option when it is enabled.
Ver. 5.4.13
Date: 2021-05-03
  • Fixed a few inconsistencies that arose with the last update.
Ver. 5.4.12
Date: 2021-04-20
Ver. 5.4.11
Date: 2021-04-11
  • Fixed a possible JavaScript error of the demo version.
Ver. 5.4.10
Date: 2021-03-27
  • Code cleaning.
Ver. 5.4.9
Date: 2021-02-24
  • A small correction to the spin slider.
Ver. 5.4.8
Date: 2021-01-27
  • Removed some unneeded code.
Ver. 5.4.7
Date: 2020-11-25
  • Improved JavaScript performance on HTML-rich pages when interacting with the viewer.
Ver. 5.4.6
Date: 2020-10-22
  • Changed the code for swiping the images due to Safari on IOS 14 randomly ignoring CSS transitions for no apparent reason.
Ver. 5.4.5
Date: 2020-08-26
  • Fixed a bug for the simpleMode option or the Simple license, which may have caused a wrong image to load in the gallery under certain circumstances.
Ver. 5.4.4
Date: 2020-04-25
  • Implemented further important fixes for IOS 13 Safari, which heretically suppresses or blocks the second click when quickly double-tapping to zoom in.
  • A few other minor improvements.
Ver. 5.4.3
Date: 2019-12-28
  • Fixed a few actions such as the double-tap on iPad with IOS 13.
Ver. 5.4.2
Date: 2019-12-05
  • Fixed the size of the viewer in Chrome and Safari when AJAX-ZOOM opens at fullscreen (fullscreen API applies, and AJAX-ZOOM takes the entire screen), while the browsers zoom level is not 100%. The changes only affect desktop browsers.
Ver. 5.4.1
Date: 2019-08-08
  • Added the possibility to load 360 images from different paths. Now, you can define images for a 360 product view the same way as you would do it with the zoomData parameter for an images gallery, but instead of zoomData, the name of the query string parameter is 360Data. For reference, please see example27. Of course, you can still use the 3dDir parameter as before to let AJAX-ZOOM automatically retrieve and load images from a specific folder/path and display as a 360-object view.
Ver. 5.4.0
Date: 2019-06-01
  • A larger update with some improvements and enhancements.
  • Warning: the default values of the preview images located in /pic/zoomthumb have been modified and unified across all examples. If you did not adjust the values for picDim and stepPicDim in the zoomConfigCustomAZ.inc.php file, which is located outside of the /axZm folder, updating causes those preview images to recreate in the frontend on-the-fly. To prevent this regeneration at the frontend, you can copy the current values from /axZm/zoomConfigCustom.inc.php for the example set that are you using into the zoomConfigCustomAZ.inc.php. If you would like to stick with the new values, please use the batch tool to regenerate those preview images and delete the old ones. The batch tool has a new checkbox that allows you to delete the old cache types right before it creates the new cache images for an image.
Ver. 5.3.13
Date: 2019-04-12
  • A regular update with few improvements.
Ver. 5.3.12
Date: 2019-03-24
  • Fixed a bug where images may load not correctly if simpleMode option is enabled or Simple license used
  • Diverse small bugfixes for rare use cases
  • New option to switch between images by using arrow keys on the keyboard
  • New API to create a toggleable area within the viewer, which can be used to place galleries or any other content
  • New example and corresponding extension to open the product tour at fullscreen by click
Ver. 5.3.11
Date: 2019-02-28
  • Fixed a bug where not all cache images might be created on the fly if settings have been changed after some cache was already generated
  • Removed support for IE less than 9
  • Updated the thumbnails slider extension
  • A few new options
Ver. 5.3.10
Date: 2019-02-07
  • A regular update with few improvements.
Ver. 5.3.9
Date: 2018-11-02
  • Fixed pinch zoom and touch events generally on windows devices, which have a touch screen, for latest Chrome M70 and Edge browsers.
  • Added back the Sourceguardian support.
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/extensions/axZmThumbSlider/*.*
Ver. 5.3.8
Date: 2018-10-01
  • Small bugfix while swiping the images.
  • Updated example31*.php
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/extensions/jquery.axZm.imageSlider.css
    • /axZm/extensions/jquery.axZm.imageSlider.js
    • /axZm/extensions/jquery.axZm.imageSliderEditor.js
    • /examples/example31.php
    • /examples/example31_responsive.php
Ver. 5.3.7
Date: 2018-09-07
  • Regular update.
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZm.class.*.php
    • /axZm/axZmH.class.php
Ver. 5.3.6
Date: 2018-08-30
  • Further improvements and new features for the batch tool.
  • Updated files:
    • /axZm/axZmH.class.php
    • /axZm/zoomBatch.php
    • /axZm/extensions/jquery.axZm.batch.css
    • /axZm/extensions/jquery.axZm.batch.js
    • /axZm/classes/axZmF.class.php
Ver. 5.3.5
Date: 2018-08-19
  • Fixed PHP warning coded into version 5.3.4.
  • Updated batch tool to be able to integrate it into modules / plugins.
  • Updated files:
    • /axZm/axZmH.class.php
    • /axZm/axZm.class.*.php
    • /axZm/zoomBatch.php
    • /axZm/classes/axZmF.class.php
Ver. 5.3.4
Date: 2018-08-10
  • Complete rebuilt of the AJAX-ZOOM batch tool.
  • Imporovements for mobile devices.
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/axZm.class.*.php
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/zoomBatch.php
  • New files:
    • /axZm/plugins/bootstrap/*.*
    • /axZm/classes/axZmF.class.php
    • /axZm/extensions/jquery.axZm.batch.js
    • /axZm/extensions/jquery.axZm.batch.css
Ver. 5.3.3
Date: 2018-07-19
  • Minor corrections and few improvements.
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/axZm.class.*.php
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
Ver. 5.3.2
Date: 2018-07-09
  • Minor corrections for the new "simpleMode" option.
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
Ver. 5.3.1
Date: 2018-07-05
  • Minor corrections
  • Added default localization strings for several languages
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/axZmH.class.php
    • /axZm/axZm.css
    • /axZm/themes/*.*
Ver. 5.3.0
Date: 2018-06-29
  • New option "simpleMode"
  • New licensing model
  • Removed Sourceguardian version
  • Updated files:
    • *.*
Ver. 5.2.2
Date: 2018-06-12
  • Fixed a small bug regarding "galleryHorHideMaxHeight" option
  • Updated files:
    • /axZm/jquery.axZm.js
Ver. 5.2.1
Date: 2018-06-08
  • Changed the dependence and the name of an internal query string parameter, as it could be stripped by some server settings.
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomLoad.php
Ver. 5.2.0
Date: 2018-06-02
  • More fixes for IOS 11.3.x
  • Few preparation improvement for plugin / modules
  • License update
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfig.inc.php
    • /axZm/axZmH.class.php
    • /axZm/zoomInc.inc.php
Ver. 5.1.5
Date: 2018-05-11
  • Added a quick fix for IOS 11.3.x (page scrolling issue)
  • Updated files:
    • /axZm/jquery.axZm.js
Ver. 5.1.4
Date: 2018-04-30
  • Improvements in license error handling
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZm.class.*.php
Ver. 5.1.3
Date: 2018-04-27
  • Fixed a possible PHP warning in /axZm/zoomInc.inc.php
  • Updated files:
    • /axZm/zoomInc.inc.php
Ver. 5.1.1
Date: 2018-03-25
  • Few fixes
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/axZmH.class.php
Ver. 5.1.2
Date: 2018-04-16
  • Fixed demo version on Mozilla and IE
  • Added tiles overlap option
  • Increased speed of creating images tiles with ImageMagick by 30 - 50%
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/axZmH.class.php
    • /axZm/axZm.class.*.php
Ver. 5.1.1
Date: 2018-03-25
  • Few fixes
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/axZmH.class.php
Ver. 5.1.0
Date: 2018-03-23
  • Many internal changes to make AJAX-ZOOM quicker.
  • Big update of thumb gallery extension.
  • New options.

Plugins & Modules

This section is moved to AJAX-ZOOM modules / plugins section

Appendix

Possible motion (transition) types

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

To use live-support-chat, you need to have Skype installed on your device. In case live support over Skype is not available immediately, please leave us a message or send an email by using the contact form.

We answer every inquiry or question that relates to the AJAX-ZOOM software!

Live-Support-Chat