AJAX-ZOOM Demo Installation

PHP: 7.4.20
OS: WINNT
Safe mode: false
Sapi: apache2handler
Ioncube loader version: 10.4.5

Readme.txt



Congratulations

AJAX-ZOOM should run on this server. In case you get an error stating, that images could not be found or broken layout, please open /axZm/zoomConfig.inc.php and set these options manually:

  • $zoom['config']['installPath']

    Replace:
    $zoom['config']['installPath'] = $axZmH->installPath();

    with:
    $zoom['config']['installPath'] = '';
    or if the path to your application is '/shop', then set: $zoom['config']['installPath'] = '/shop';

  • $zoom['config']['fpPP']

    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!

  • $zoom['config']['rewriteBase']

    Ver. 4.2.11+ 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 AZ extension work would be:
    $zoom['config']['fpPP'] = 'C:/xampp/apps/magento/htdocs';
    $zoom['config']['urlPath'] = '/magento/js/axzoom';
    $zoom['config']['rewriteBase'] = '/magento';

Reading this will save your time and protect your nerves

Each example in the download package uses a special configuration options set. Default options in "/axZm/zoomConfig.inc.php" are overridden in "/axZm/zoomConfigCustom.inc.php" which is included at the bottom of "zoomConfig.inc.php". That happens by passing an extra parameter "example=[some value]" to AJAX-ZOOM directly from examples or plugins over the query string. To find out which "example" value is used see the source code of the implementation in question or inspect an ajax call to "/axZm/zoomLoad.php" with Firebug or another ther 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]) { . Of course, 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 at the beginning of zoomConfigCustom.inc.php before the if statement to serve all examples) you will be able to update your customized implementation by simply overwriting all files except "zoomConfigCustom.inc.php" and custom CSS file.

Ver. 4.3.1+ 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 whole /axZm directiry during future updates.

You can read more and in greater detail about the AJAX-ZOOM configuration system at this page:
https://www.ajax-zoom.com/index.php?cid=blog&article=options_config&lang=en

Skinning

In order to change the button template into your own (skin AJAX-ZOOM) simply set $zoom['config']['buttonSet'] option, create a subfolder under /axZm/icons/[yourTemplate] and put your buttons into it (copy them from /axZm/icons/default at first). Also create a new CSS file in /axZm/styles/[yourTemplate]/style.css; if needed adjust the width and height of the buttons (w and h keys) by editing corresponding $zoom['config']['icons'] array,
e.g. $zoom['config']['icons']['pan'] = array('file'=>'zoombutton_pan', 'ext'=>'jpg', 'w' => 31, 'h'=>31);

For CSS colors an so on you can change $zoom['config']['themeCss'] option; If you want to create your own, e.g. "green", create subdirectory /axZm/themes/green and place axZm_green.css into this folder. You could copy / rename CSS file from e.g. /axZm/themes/white and then change the colors of your axZm_green.css; Do not forget to set $zoom['config']['themeCss'] = 'green'; then...

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! Since/axZm/axZm.css is updated from time to time as well, you can override CSS classes in /axZm/axZmCustom.css (add !important if needed) and / or in /axZm/styles/default/style.css; The default style is "default".

360 & 3D info

VERY IMPORTANT THINGS TO TAKE ACCOUNT OF WITH 360 OR 3D

Every image must have a unique filename!!! This is also the case if images are prepared for completely different 360s or 3D; If all your source images happen to have the same filenames (e.g. spin001.jpg, spin002.jpg, [...], spin036.jpg), you could then prefix each image of a spin e.g. with the product ID or something else logical to ensure this uniqueness, e.g.

/360_source_images/123/123_spin001.jpg,
/360_source_images/123/123_spin002.jpg,
/360_source_images/123/123_spin003.jpg,
[...],
/360_source_images/123/123_spin036.jpg

3D (MULTIROW / SPHECICAL)

The only difference between regular 360 spin and multirow is that original images are placed in subfolders of the target folder. E.g. the path along with the example parameter passed to AJAX-ZOOM is "example=spinIpad&3dDir=/pic/zoomVR/nike"; Now if it is 3D (multirow) and not 360, then images of each row are placed in subfolders of the target 3dDir parameter, e.g. /pic/zoomVR/nike/0, /pic/zoomVR/nike/15, /pic/zoomVR/nike/30, /pic/zoomVR/nike/45, /pic/zoomVR/nike/60, /pic/zoomVR/nike/75, /pic/zoomVR/nike/90; It is not important how these subfolders are named (e.g. it could be row1, row2 ...) and you also do not need to define these subfolder names anywhere. AJAX-ZOOM will instantly detect them and process all the images in them. For more info and visualization of the file structure see example28.php

Batch processing images

AJAX-ZOOM is designed to create all needed images like thumbs and tiles on-the-fly. However, if you have thousands of images, it is a good idea to batch process all existing images planned to be shown over AJAX-ZOOM before launching it. You can do it in /axZm/zoomBatch.php; To access this file, you will need to open it with an editor and set your personal password in it.

Have fun with AJAX-ZOOM