Die deutschsprachige Dokumentation ist nicht vollständig übersetzt, Fehler sind nicht auszuschließen. Bitte um Rücksicht, danke.

Anforderungen

Server Software PHP Version
PHP 5+ PHP 5.2+ empfohlen, memory_limit mindestens 128M und safe_mode = off*
GD 2+ library, optional ImageMagick

Üblicherweise ist die GD-Bibliothek mit jeder PHP Installation gebündelt. Sie wird vorausgesetzt. Bei ImageMagick ist es nicht der Fall. AJAX-ZOOM unterstützt beide Bibliotheken für die Erstellung der Bilder. GD-Bibliothek wird aber in jedem Fall benötigt. Die Installation des ImageMagick setzt zumeist Root-Rechte voraus. Wenden Sie sich deshalb an Ihren Systemadministrator oder den Provider, wenn Sie ImageMagick verwenden wollen. Die Verwendung von ImageMagick ist optional!

IonCube loader or

SourceGuardian loader or

Zend Guard Loader / Optimizer

Um mit IonCube oder SourceGuardian kodierte PHP Scripte ausführen zu können werden kostenlose "Loader" benötigt. Diese Loader sind für sehr viele Server Systeme verfügbar. AJAX-ZOOM kann wahlweise mit einem der drei Loader betrieben werden. Standardmässig ist IonCube Version voreingestellt.

Laden Sie diesen Installations-Assistenten für IonCube oder dieses PHP Script für SourceGuardian Loader. Beide Scripte testen das System und geben ggf. genaue Anweisungen, wie die Loader zu installieren sind, falls sie es noch nicht sind. (Bei der Server-weiten Konfiguration müssen Sie Apache neu starten...). Für Zend Guard Loader bzw. Optimizer sehen Sie bitte die Installationsanweisungen auf der Homepage des Herstellers: http://www.zend.com/products/guard/downloads

Bitte beachten: Sie brauchen nicht alle Loader, sondern nur eins davon! Um zwischen den Codierten Versionen zu schalten muss der entsprechende Include Pfad in der Datei /axZm/zoomInc.inc.php geändert werden.

Server Software ASP.NET Version
Ajax-Zoom PHP-Komponente kann effizient auf ASP.NET 4.0 als native voll gemanagte 64-Bit .NET-Anwendung und als Teil der ASP.NET-Website betrieben werden. Dies wird mit Hilfe von Phalanger PHP-Compiler erreicht.
Microsoft .NET 4.0 (full) PHP muss nicht installiert werden!
IIS 7+ IIS 7 (or later) with ASP.NET 4.0 Web Site configured or Visual Studio 2010 for development.
Phalanger 3.0 The PHP language compiler für .NET Framework. Patch: 2012-06-19 Phalanger muss nicht mehr installiert werden. Es ist im download Packet enthalten und wird nun dynamisch geladen.
The basic installation is fairly easy:
  • Extract the download package somewhere into ASP.NET site.
  • Ensure folder \Bin\Dynamic is writable for your IIS user account
  • Ensure folders \pic\{cache|temp|zoomthumb|zoomgallery|zoomtiles|zoommap|zoomtiles_80|*} are writable
  • Merge provided "web.config" into your "web.config"
  • Example project: You can extract the archive into the root of your ASP.NET server, or open it as an existing web site from Visual Studio 2010 from any location (note you must set empty "Virtual Path" in "Properties" of the web site). Also you might need to set "Enable 32-Bit Applications" under Advanced Settings -> General if you have 64bit operating system.
  • If you experince any troubles try to adjust: in /axZm/zoomConfig.inc.php manually.
Server Hardware

Die Anforderungen an die Hardware werden im Wesentlichen durch die Qualität der zu verarbeitender Bilder, deren Größe, sowie Server Auslastung bestimmt. Um Bildkacheln für ein 15 MP und 6 MB großes Bild in akzeptabler Zeit (3 - 10 Sekunden) zu erstellen sollte der Server mindestens 128 MB freies RAM haben.

Für die Verarbeitung von ultra hoch auflösenden Bildern werden viel mehr CPU-Leistung und ein paar GB freien RAM vorausgesetzt, ist aber möglich. So dauerte es ca. 2 Minuten um für ein 420 MP und 200 MB großes Bild mit 4 GB RAM ca. 4.000 Bildkacheln (384x384px) mit der Gesamtgröße von 350 MB zu erstellen. Diese Prozedur muss natürlich nur einmal für jedes Bild durchlaufen werden. Um aus den generierten Bildkacheln ein Bildausschnitt zu erzeugen werden regelmäßig 0.04 - 0.1 Sekunden benötigt, mit eingebrannten Wasserzeichen etwas länger.

Die oben genannten Bezugswerte fallen abhängig von den verfügbaren Hardware-Ressourcen auf jedem Server unterschiedlich aus und sollten daher als Näherungswerte betrachtet werden.

Wenn Bildkacheln direkt geladen werden - pyrLoadTiles, wie etwa in diesem Beispiel, dann werden beim Zoomen so gut wie keine Ressourcen außer Traffic verbraucht!

Mit der "Unlimited" Lizenz ist es möglich AJAX-ZOOM mit Zoomify Bildkacheln Format zu nutzen und selbst auf Shared Servern Gigapix Bilder anzeigen. Hier finden Sie die Anleitung.
JavaScripte
Alle notwendigen JavaScript Dateien sind im Download Paket enthalten!
jQuery 1.5.0+ Es ist empfehlenswert, die neueste stabile Version von jQuery zu nutzen. Versionen wie 1.5.0 oder 1.6.0 sollten nicht genutzt werden. AJAX-ZOOM Ver. <= 3.3 unterstüzt keine jQuery 1.8+; Ab AJAX-ZOOM Ver. 4.0+ wird jQuery 1.8 und 1.9 unterstützt;
jQuery UI 1.8 ui.core.js, ui.draggable.js, ui.mouse.js, ui.slider.js, ui.widjet.js, effects.core.js
jQuery plugin's
Browser Jeder Browser verhält sich anders und hat seine eigenen Fehler. Manchmal ist es sehr praktisch, den genauen Namen und die Version zu kennen, wenn auch nicht immer absolut zuverlässig.
MouseWheel Notwendig, wenn die mausrad scroll in and out Option aktiviert ist.
jScrollPane Dieses Plugin ist optional und wird bei der vertikalen und "Inline" Galerie verwendet.
Kenntnisse
Grundlegende Kenntnisse in HTML, CSS, PHP und JavaScript sind notwendig, um AJAX-ZOOM ans Laufen zu bringen. Es ist empfehlenswert zunächst mit den mitgelieferten Beispielen anzufangen und deren Quellcode allmählich Ihren Bedürfnissen anzupassen.

Installation

Übersicht
Bitte finden Sie detailierte Beschreibungen der Schritte 4-6 weiter unten. Die Magento Commerce & xt:Commerce Installationsanleitungen finden Sie hier.

1. Laden und enpacken Sie die zip-Datei in ein öffentliches Verzeichnis auf Ihrem Server.

2. Stellen Sie sicher, dass IonCube oder SourceGuardian Loader ordnungsgemäß installiert und ausgeführt werden.

3. Passen Sie die Datei '/axZm/zoomConfig.inc.php' bzw. '/axZm/zoomConfigCustom.inc.php' Ihren Bedürfnissen an. Alle Optionen werden im Quelltext von '/axZm/zoomConfig.inc.php', sowie auf dieser Seite erläutert.

Um sofort loszulegen müssen für folgende Ordner die Schreibberechtigungen gesetzt werden, damit AJAX-ZOOM (PHP User) darin Thumbnails, temporäre Dateien und die Bildkacheln schreiben kann (z.B. chmod 0775 oder 0777). Die Ordner werden in der Datei '/axZm/zoomConfig.inc.php' unter diesen Variablen definiert:

Das Download-Paket enthält eine Ordner-Struktur mit einigen Testbildern darin. Sie können Ihre eigene Bilder darein setzen um die Beispiele schnell ans Laufen zu bekommen (z.B. '/pic/zoom/animals').

Bevor Ver. 2.1.4 (Patch: 2010-09-14) mussten alle Pfade manuell eingestellt werden. Für schnelles Testen des Scripts ist dies in der Regel nicht mehr notwendig. Natürlich können alle Pfade weiterhin manuell gesetzt werden. Sollten Sie jedoch in den Beispielen Javascript Fehler oder gebrochenes Layout erhalten, müssen höchstwahrscheinlich diese zwei Pfadangaben manuell eingestellt werden:

4. Photos definieren. Es gibt mehrere Möglichkeiten dem AJAX-ZOOM mitzuteilen, welche Bilder geladen werden sollen. Jedes Beispiel kann modifiziert werden andere Bilder zu laden.

5. Integration der JavaScript und PHP Dateien in Ihre Anwendung. Schauen Sie sich auch die zahlreichen Beispiele an.

6. Optional können Sie die Bilder mit '/axZm/zoomObjects.inc.php' stapel-bearbeiten. Dieser Schritt ist optional, denn wenn ein Bild zum ersten Mal in AJAX-ZOOM lädt, werden alle notwendigen Schritte wie die Erzeugung der Bildkacheln on-the-fly ausgeführt. Für eine große Anzahl der Bilder empfiehlt sich dieser Schritt dennoch, damit die Server Ressourcen gleichmäßig abgerufen und der laufende Betrieb nicht beeinträchtigt wird.

7. Wenn Sie AJAX-ZOOM nicht als Erweiterung für Magento oder xt:Commerce nutzen, sollte das Verzeichnis /axZm/mods entfernt werden.

Checkliste für Bildschutz.

1. Wenn Sie verhindern wollen, dass Ihre hochauflösenden Bilder heruntergeladen werden können, sollten Sie den Zugang über http zu den folgenden Verzeichnissen sperren:

Den Verzeichnisschutz können Sie beispielsweise mittels .htaccess and .htpasswd erreichen.

2. Setzen Sie ein Wasserzeichen für das erste Bild und zoom Ansichten.

3. Wenn Sie auch den Pfad zu dem Bild verbergen möchten, schauen Sie sich diese Option an: $zoom['config']['cropNoObj'].

Options & Settings

Anders, als bei den meisten jQuery Plugins, werden die Optionen in der Datei zoomConfig.inc.php gesetzt. Dies ist so, weil die Optionen von JavaScript und PHP gleichermaßen gebraucht werden.

In der Datei /axZm/zoomConfigCustom.inc.php können einige Optionen abhängig von dem Parameter $_GET['example'], welches in den Beispielen benutzt wird, überschrieben werden!

Alle Optionen sind in einem PHP Array gespeichert - $zoom['config'], z.B. $zoom['config']['picDim'] = '600x400'; Außer auf dieser Seite sind die Optionen auch im Quelltext der Datei zoomConfig.inc.php beschrieben, wobei die Dokumentation im Internet regelmäßig aktualisiert wird.

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

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

Wichtig: fügen Sie keine Werte für width, height, margin oder andere Attribute mit 'px' in die CSS Datei (/axZm/axZm.css) hinzu, außer wenn Sie dort bereits vorhanden sind und Sie möchten diese nur anpassen!
Generelle Einstellungen
Option Type Description
licenceKeystring Der Lizenzschlüssel oder 'demo'. Die Auflösung des Bildes ist im Demo Modus auf 3.2 Megapixel eingeschränkt, z.B. (2048 x 1536 px). Zum Testen ohne Auflösungsbeschränkung fordern Sie kostenlos den "Evaluation" Lizenzschlüssel für Ihre Domain beim Support an.
licenceTypestring Lizenz Typ: Ver. <= 3.3 'Basic', 'Standard', 'Business', 'Corporate' or 'Unlimited', belassen Sie 'Basic' für demo / free Modus.

Ver. >= 4.0 - 'Evaluation', 'Developer', 'Basic', 'Standard', 'Business', 'Corporate', 'Enterprise' und 'Unlimited'
memory_limitstring Ver. 4.0+ Set memory limit for heavy operations like image tiling. Before Ver. 4.0 there was always ini_set ('memory_limit', 'HIGH VALUE'); at the beginning of the config file. In Ver. 4.0+ you can use php.ini defaults and set higher value, e.g. '4000M' in this option.
domainstring Der Domain Name, z.B. 'http://www.ajax-zoom.com'. In der aktuellen Version wird diese Variable nicht benötigt und sollte nicht gesetzt werden!
quirksbool Behebt einige, jedoch nicht alle Probleme mit Internet Explorer im "Quirks Modus". Benutzen Sie true, wenn das Dokumenttyp (DOCTYPE - die Zeile über HTML Tag) ungültig ist oder fehlt.
parToPassstring Bitte Standartwerte belassen wenn '/axZm/zoomObjects.inc.php' nicht von Ihnen modifiziert wurde. "parToPass" ist eine Zeichenkette, die über Anfragestring übermittelt wird und die Auswahl der Bilder bestimmt. Sehen Sie dazu auch den Bilder festlegen Bereich. Diese Zeichenkette (z.B. productID=12345&imageSet=2) muss alle notwenigen Parameter enthalten, um das Bild-Set (PHP Array) rekonstruieren zu können. Um diese Option dynamisch zu definieren könnte sie in etwa so aussehen:
$zoom['config']['parToPass'] = 
'productID='.(int)$_GET['productID'].'&
imageSet='.(int)$_GET['imageSet'];
Zur Erleichterung dieses Prozesses ist es jedoch empfehlenswert, die Zeichenkette mit der Methode zoomServerPar zu erzeugen. Der Ausdruck würde dann so aussehen, wobei dies die Standardeinstellung ist und für die meisten Anwendungen in unveränderter Form ausreichend ist:
$zoom['config']['parToPass'] = 
$axZmH -> zoomServerPar('str', array('zoomID', 
'zoomFile', 'zoomLoadAjax', 'loadZoomAjaxSet'), 
false, $_GET);
Mit Hilfe der oberen Methode wird eine Zeichenkette aus allen $_GET Parameter erzeugt, wobei einige, explizit genannte wie zoomID, zoomFile, zoomLoadAjax und loadZoomAjaxSet ausgeschlossen werden. Diese speziell ausgeschlossenen Parameter werden intern von AJAX-ZOOM hinzugefügt, wenn nötig. Sie müssen ausgeschlossen werden, weil AJAX-ZOOM sonst nicht richtig funktionieren könnte. Das korrekte Setzen dieser Option ist also sehr wichtig!
cropNoObjbool Jedes Mal, wenn AJAX-ZOOM Teil eines Bildes abfragt, wird zusammen mit der Zeichenkette aus der Option parToPass der Parameter zoomID and die Datei zoomLoad.php übermittelt. zoomID dient als Kennung für das gewünschte Bild aus dem Array mit allen Bildern (sehen Sie dazu Bilder festlegen), wobei die zoomID ein numerisches Zeichen ist.

In einigen Fällen ist es nicht wünschenswert, den gesamten Array neu zu erzeugen. Beim Setzen dieser Option auf true werden statt der id des Bildes im Array der Bildname und der Pfad zu dem Bild direkt übermittelt. Der Vorteil bei Aktivierung dieser Option resultiert in geringfügiger Verbesserung der Geschwindigkeit von Abfragen. Der Nachteil ist, dass jemand die Position des ursprünglichen Bildes daraus ableiten könnte. (Das Verzeichnis kann allerdings von direkten http Zugriffen mittels .htpasswd leicht geschützt werden.)
cTimeComparebool Bei Aktivierung dieser Option wird überprüft, ob die von AJAX-ZOOM generierten Bilder noch aktuell sind. Dazu werden die Zeitstempel verglichen und bei Bedarf alle notwendigen Bilder neu generiert. Dies könnte notwendig sein, wenn das ursprüngliche Bild mit einem völlig anderen Bild mit dem gleichen Namen überschrieben wird, nachdem AJAX-ZOOM die Bildkacheln und andere Thumbnails bereits erstellt hat. Oder das Bild mit einem höher auflösenden überschrieben wurde.
exifAutoRotationbool Autorotate images depending on EXIF information written by the camera. If you want to keep EXIF information of the original file you will need the PEL EXIF library. Pel is not part of the destribution package. Download at http://lsolesen.github.com/pel and put the files from "/src" directory into "/axZm/classes/pel/"
visualConfbool Zeigen des visuellen Konfigurators unter dem zoom Bild, wie in dem Beispiel 1. Diese Option ist experimentell und außer für Demonstrationszwecke ist sie zur dynamischen Konfiguration von AJAX-ZOOM im Backend eines Systems gedacht. In der Zukunft wird sie erweitert. Zurzeit ist eine "quick & dirty" Lösung für Demozwecke und nicht mehr.
pic_ext_allowarray Ein Array mit den unterstützten Bild-Typen wie jpg. Zurzeit wird nur jpg unterstütz.
picDimstring Maximale Abmessungen des ersten Bildes, z.B. '600x400'. Damit ändern sich auch die gesamten Masse des Zoom Players. Um die Gesamtmasse zu erhalten müssen eventuell die Breite der Galerie und des Rahmens hinzugerechnet werden.
enlargeSmallImagebool Ver. 2.1.1+ Bei Aktivierung wird das erste Bild serverseitig vergrößert, wenn die Breite und Höhe des Quellbildes kleiner sind, als picDim.
firstImageDialogbool Anzeigen von Dialogfenster, wenn das erste Bild erstellt wurde.
keepBoxWbool Die Breite der zoom Arbeitsfläche auf die Breite in picDim unabhängig von Bildproportionen festsetzen. Beim einschalten der Galeriefunktion sollte diese Option ebenfalls aktiviert werden.
keepBoxHbool Die Höhe der Zoom Arbeitsfläche auf die Breite in picDim unabhängig von Bildproportionen festsetzen. Beim einschalten der Galeriefunktion sollte diese Option ebenfalls aktiviert werden.
gravitystring Der Sichtpunkt, wenn der Benutzer auf das Bild klickt um heran oder hraus zu zommen. Mögliche Werte:
  • 'viewPoint' - die angeklickte Stelle bleibt wo sie war
  • 'center' - die angeklickte Stelle tendiert zur Mitte der Arbeitsfläche
Beim Scrollen mit dem Mausrad wird immer der Wert 'viewPoint' gewählt.
traveseGravitystring Das Verhalten der Schwenkbewegung, wenn bei maximaler Zoomstufe (100%) der User auf das Bild klickt. Mögliche Werte:
  • 'center' die angeklickte Stelle tendiert zur Mitte der Arbeitsfläche.
  • 'adverse' die angeklickte Stelle wandert gespiegelt vom Mittelpunkt der Arbeitsfläche auf die andere Seite.
  • 'none' Keine Aktion.
disableZoombool Zoom Funktion deaktivieren.
disableZoomExceptarray Ausgenommene Events, wenn Zoom Funktion vollstädig deaktiviert ist. Mögliche Werte (mehrere sind möglich): zoomInClick, zoomOutClick, areaSelect, onSliderZoom, onZoomInButton, onZoomOutButton, onButtonClickMove_N, onButtonClickMove_E, onButtonClickMove_S, onButtonClickMove_W, onMouseWheelZoomIn, onMouseWheelZoomOut
iMagickbool Ver. 2.1.5+ ImageMagick für alle Bildoperationen verwenden. Alle anderen Optionen bezüglich der Wahl zwischen GD und ImageMagick werden durch diese Einstellung überschrieben.
imbool Wenn aktiviert werden die zoom Ausschnitte, anfängliche Bilder und Thumbnails von ImageMagick generiert. Beim false wird dazu GD verwendet. Siehe auch:
$zoom['config']['pyrProg']
$zoom['config']['pyrStitchProg']
imKeepProfilesbool Ver. 4.0+ Keep color and other profiles for all operations processed with ImageMagick.
imQuotesmixed Nur für ImageMagick: entfernen oder ersetzen der Anführungszeichen im exec Sting. Mögliche Werte: 'remove', 'replace' oder false. Bei 'replace' werden doppelte Anführungszeichen gesetzt.
imLimitarray Nur für ImageMagick: Speicher Limit und weitere Einstellungen. Standardmäßig sind hohe Werte von ImageMagick eingestellt, die sich dynamisch an die Hardware Ressourcen anpassen.
imPathstring Der root Pfad zu ImageMagick convert Ver. 6+, z.B. '/usr/bin/convert'. Auf einigen Systemen genügt es einfach convert zu schreiben.
qualint Ausgabequalität der JPG Dateien beim zoomen, max. 100. Siehe auch pyrQual
qualPngarray Ver. 4.0+ Ausgabequalität der PNG Dateien beim zoomen.
qualRangearray Alternativ zu der festen Einstellung von der Ausgabequalität der JPG Dateien beim zoomen können Sie ein Intervall angeben, bei dem die Ausgabequalität dynamisch in Abhängigkeit von der Geschwindigkeit der Internetverbindung sich einstellt. Die Schnelligkeit der Internetverbindung wird beim Herunterladen der Dateien ermittelt, die sowieso geladen werden. In dem Array dieser Option können Sie also ein Intervall für die JPG Qualität, z.B. zwischen 40 und 90, sowie Geschwindigkeit z.B. zwischen 128 und 768 kbit/s einstellen.
initPicQualint Ausgabequalität der JPG Dateien für anfängliche Bilder.
initPicQualPngarray Ver. 4.0+ Ausgabequalität der PNG Dateien für anfängliche Bilder.
pngModebool Ver. 4.0+ Generate PNG images, tiles etc. instead of JPG
pngKeepTranspbool Ver. 4.0+ Keep transparent areas of the images when pngMode is enabled. When using GD2 the results might be not satisfactory (noice) depending on the compiled libs .
notTouchUAarray Not touch device, array with possible strings within user agent string, e.g. array("webkit viewer", "somthing_else"); Enforces mouse events even if browser wrongly claims to have touch events.
postModebool Ver 4.1.5+ Use POST instead of GET for all AJAX requests. Can be overwritten by passing arguments to jQuery.fn.axZm, jQuery.fn.axZm.load or jQuery.fn.axZm.openFullScreen
Wichtige Pfade und Dateinamen
Option Type Description
fpPPstring Root Pfad zum Verzeichnis, wo sich die Internetpräsenz befindet, z.B. '/srv/www/htdocs/web123' oder '/home/yourdomain/public_html'. Normaleweise ist es aus $_SERVER['DOCUMENT_ROOT']; zu ermittelt. Ohne Schrägstrich am ende! Setzen Sie diese Einstellung manuell, wenn $_SERVER['DOCUMENT_ROOT'] keine korrekte Ergebnisse liefert.
installPathstring Ver. 2.1.4+ (Patch: 2010-09-14) - "Installationspfad", z.B. '/test/ajax-zoom-test' (ohne Schrägstrich am ende). Setzen Sie den Wert auf '', wenn Sie die Pfade mit dem Präfix dieser Option manuell einstellen wollen. Voreingestellt wird der Wert mit $axZmH->installPath(); ermittelt, was nicht immer verlässlich ist. Der "Installationspfad" muss dann manuell eingestellt werden.
zoomLoadFilestring Absoluter Pfad zu der Datei zoomLoad.php, z.B. '/axZm/zoomLoad.php'
zoomLoadSessstring Absoluter Pfad zu der Datei zoomSess.php, z.B.. '/axZm/zoomSess.php'
iconstring Absoluter Pfad zum Ordner "icons", mit Schrägstrich am ende, z.B. '/axZm/icons/'.
jsstring Absoluter Pfad zu dem AJAX-ZOOM Hauptverzeichnis, z.B. '/axZm/'
jsDynLoadbool Dynamisches laden von allen notwendigen JavaScript und CSS Dateien. Nach der Initialisierung von AJAX-ZOOM wird geprüft, ob die notwendigen Dateien eingebunden sind und ggf. in HEAD Bereich des HTML injiziert. Wenn also diese Option aktiviert ist, besteht keine Notwendigkeit die Methoden drawZoomStyle() und drawZoomJs() im HEAD auszuführen. Das erste öffnen des Zoom Players z.B. in einer Lightbox dauert jedoch etwas länger, da die Dateien erst geladen werden müssen.
<link rel="stylesheet" href="/axZm/axZm.css" type="text/css">
<script type="text/javascript" src="/axZm/plugins/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/axZm/jquery.axZm.js"></script>
jsMinbool Bei Aktivierung werden minimierte oder gepackte Versionen der JavaScript Dateien geladen.
jsUiAllbool Alle jQuery UI Module laden. Sonst werden nur die von AJAX-ZOOM benötigten geladed. Aktivieren Sie diese Option wenn es mit der jQury UI aufgrund von Versionskonflikten oder sonstige Fehler auftreten.
jsUiVerstring Ver. 4.0+ jQuery UI version used by AJAX-ZOOM
jsUiThemestring Ver. 4.0+ Easily switch between jQuery UI themes by changing the value of this option. The UI theme loaded is located under /axZm/plugins/jquery.ui/themes/[jsUiTheme]; You can create your own or import already existing.
jsUiSuppressJSbool Ver. 4.0.7+ Suppress loading jQuery UI JavaScript files. May result in JavaScript error if certain jQuery UI elements are not loaded otherwise.
jsUiSuppressCSSbool Ver. 4.0.7+ Suppress loading jQuery UI CSS files. Enable this option if all css classes are loaded otherwise by e.g. a template theme.
fontPathstring Das Verzeichnis, wo sich die Schriftdateien befinden, z.B. '/axZm/fonts/'. Alle Schriftdateien (.ttf) müssen sich in einem Verzeichnis befinden.
picstring Absoluter Basispfad zu dem Ordner, wo sich die Originalbilder befinden, z.B. '/pic/zoom/'. Diese Angabe kann dynamisch überschrieben werden, z.B. in zoomObjects.inc.php oder wie in diesem Beispiel. Das Verzeichnis kann mit .htpasswd von äußeren Zugriffen geschützt werden. Stellen Sie aber sicher, dass PHP darauf zugreifen darf (chmod).
thumbsstring Das Verzeichnis, wo anfängliche Bilder abgelegt werden, z.B. '/pic/zoomthumb/'. Stellen Sie sicher, dass PHP darin schreiben darf (chmod)!
tempstring Das Verzeichnis, wo temporäre Bilder abgelegt werden, z.B. '/pic/temp/'. Stellen Sie sicher, dass PHP darin schreiben darf (chmod)!
tempCachestring Das Verzeichnis, wo beliebige Thumbnails, die mittels der API Methode $axZm->rawThumb() erstellt auch als Dateien zwischengespeuchert werden können , z.B. '/pic/cache/'. Stellen Sie sicher, dass PHP darin schreiben darf (chmod)!
Image Map
"Image Map" ist das nicht gezoomte Bild in Kleinformat. Der User kann darauf sehen, wo er sich beim zoomen befindet und schnell zu einer anderen Stelle wechseln.
Option Type Description
useMapbool Image Map aktivieren.
mapParentmixed ID des parent Containers wenn Image Map außerhalb des AJAX-ZOOM Players platziert werden soll. Beispiel example16.php
mapParCenterbool Image Map innerhalb des parent Containers zentrieren.
dragMapbool Wenn aktiviert, Image Map ist verschiebbar.
mapHolderHeightint Wenn dragMap aktiviert (Image Map verschiebbar) ist dies die Höhe des Fensterhalters oberhalb der Image Map. CSS: .zoomMapHandle
mapHolderTextstring Wenn dragMap aktiviert (Image Map verschiebbar), der Text innerhalb des Fensterhalters.
zoomMapDragOpacityfloat Wenn dragMap aktiviert (Image Map verschiebbar), die Transparenz beim Verschieben des Image Map Fensters, z.B. 0.7 (70%)
zoomMapSelOpacityfloat Transparenz des Auswahlrechtecks in der Image Map, z.B. 0.25 (25%), CSS: .zoomMapSelArea
zoomMapSelBorderint Ver. 4.0+ Border width of the selector.
zoomMapContainmentstring, bool Wenn dragMap aktiviert (Image Map verschiebbar), der jQuery Selector eines übergeordneten Elements als Begrenzung, z.B. window oder "#zoomAll". Beim Setzen auf false (deaktivieren) wird jegliche Begrenzung aufgehoben.
zoomMapAnimatebool Animation der Image Map während Bilderwechsels aktivieren.
zoomMapVisbool Automatisches Ausblenden der Image Map, wenn das Bild nicht gezoomt ist. Image Map erscheint dann automatisch, wenn das Bild gezoomt wird. Mit false wird diese Funktion aktiviert, mit true deaktiviert. Bei Deaktivierung wird Image Map sofort angezeigt, sofern sie überhaupt eingeschaltet ist (useMap).
mapFractfloat Die maximale Größe der Zoom Map als Prozentsatz von der picDim Breite, z.B. 0.25 (25%).
mapWidthint, bool Festgesetzte Breite der Zoom Map in px. Überschreibt mapFract.
mapHeightint, bool Festgesetzte Höhe der Zoom Map in px. Überschreibt mapFract.
mapButtonbool Anzeigen des Buttons für ein- / ausschalten der Image Map.
mapBorderarray Die Stärke des Rahmens von Image Map. Man kann top, right, bottom und left separat einstellen. Bitte nicht über CSS Datei definieren.
zoomMapSwitchSpeedint Wenn über Galerie ein anderes Bild gewählt wird und das gegenwärtig ausgewählte Bild gezoomt ist, die Geschwindigkeit, mit der das gegenwärtige Bild und die Image Map zurückgesetzt werden, in ms, z.B. 1000 (1 Sekunde); überschreibt restoreSpeed
zoomMapRestbool Beim einschalten wird die anfängliche Position der Image Map nach Größenänderung des Browserfensters zurückgesetzt.
mapPosstring Position der Image Map! Mögliche Werte: 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'; Image Map darf nicht verschiebbar sein - dragMap auf false gesetzt werden;
mapSelSmoothDragbool Gleitende Bewegung des Bildes beim Schwenken des Auswahlrechtecks in der Image Map.
mapSelSmoothDragSpeedint Die Geschwindigkeit der Animation, wenn mapSelSmoothDrag eingeschaltet, z.B. 1000 (1 Sekunde)
mapSelSmoothDragMotionstring Ver. 2.1.3+ Animationsart beim Schwenken des Auswahlrechtecks, z.B. 'easeOutSine'
mapSelZoomSpeedint Die Zeit in ms, nach der das zoom Bild geladen wird, wenn beim Schwenken des Auswahlrechtecks in der Zoom Map der User auf einem Punkt stehen bleibt. z.B. 400 (0.4 Sekunden)
mapMouseOverbool Move selector inside zoom map by mouseover and not by dragging the selector. Instantly disabled for touch devices.
mapMouseWheelbool If mapMouseOver is enabled, allow to zoom in and out using mousewheel.
mapHorzMarginint Ver. 4.0+ Horizontal margin from the edge of the player.
mapVertMarginint Ver. 4.0+ Vertical margin from the edge of the player.
mapOpacityfloat Ver. 4.0+ Opacity of the map when mouse is not over it.
mapClickZoombool Ver. 4.1.0+ On none zoomed state clicking at a point on the map will result into zoom to 100%
mapOwnImagebool, string Ver. 4.0+ Define physical image dimensions for the map image e.g. "200x200" or false;
mapPathstring Ver. 4.0+ Path where map images are stored when mapOwnImage is set to some size.
mapFilterIMarray Ver. 4.0+ Some image filters like sharp, unsharp or grayscale applied to the map image when using Imagemagick for processing.
imageSlicerarray Ver. 4.1.5+ Settings for external server for all image operations (including on-the-fly generation of tiles and other images). Requires unlimited AJAX-ZOOM license;
sortBystring Ver. 4.1.5+ Sort images by some file information returned from php stat(), e.g. ctime, mtime; on default images are sorted by their file names;
sortReversebool Ver. 4.1.5+ Reverse sorting order of the images;
speedOptSetbool Ver. 4.1.5+ Makes AJAX-ZOOM to switch faster between images. With this setting several other options will be overridden at the end of zoomConfig.inc.php
Beschreibungsbereich
Die Bildbeschreibung, sofern vorhanden, erscheint in einem halbtransparenten Bereich direkt über dem eigentlichen Bild, wenn der User in den horizontalen oder vertikalen Galerien mit der Maus sich über einem Thumb befindet. Definiert werden die Texte in zoomObjects.inc.php ($pic_list_data[$k]['fullDescr']), CSS: .zoomDescr
Option Type Description
zoomShowButtonDescrbool, string Beschreibung für Navi-Buttons beim Mouseover einschalten. Die nachfolgenden Optionen gelten dann auch für die Buttons. Ver. 4.0+ Can be now set to left, right or false;
descrAreaTranspfloat Transparenz des Beschreibungsbereichs, z.B. 0.5
descrAreaShowTimeint Zeit der Animation beim Erscheinen in ms, z.B. 200
descrAreaHideTimeint Zeit der Animation beim Schließen in ms, e.g. 200
descrAreaShowTimeOutint Die Verzögerung in ms für Anzeigen der Beschreibung, e.g. 500
descrAreaHideTimeOutint Die Verzögerung, nach der die Beschreibung automatisch schließt, wenn die Maus nicht mehr über dem auslösenden Mouseover Objekt ist, z.B. 750
descrAreaHeightint Minimale Höhe des Beschreibungsbereichs in px. Wenn dieser Parameter einen sehr geringen Wert aufweist, z.B. 0, 2 oder 5, dann lößt dies zusätzlich eine Animation beim Anzeigen aus. Die entgültige Höhe wird automatisch abhängig von der Länge des Textes ermittelt.
descrAreaMotionstring Animationsart für die Bewegung, z.B. "swing"
Galerien
Es gibt drei verschiedene Galerietypen: vertikale, horizontale and "inline" (innere galerie). Für jeden Typ gelten im Wesentlichen eigene Optionen und Einstellungen. Alle drei Gallerien können gleichzeitig eingeschaltet werden. Manchmal macht es Sinn die "inline" Galerie einzuschalten und den An/Aus Button hierfür zu verstecken, damit die Thumbs automatisch von AJAX-ZOOM erstellt werden. Diese Thumbs können dann extern benutzt werden, siehe dieses Beispiel. Nachfolgend sind die bei allen drei Typen gemeinsam genutzte Einstellungen.
Option Type Description
galleryPicQualint JPG Qualität der Thumbs, z.B. 90 (max. 100)
galleryPicQualPngarray Ver. 4.0+ Qualität der Thumbs in pngMode
galleryFillbool Ver. 4.0+ Fit gallery size with the image. Depending on ratios image is croped to fill entire area.
galleryFilterIMarray Ver. 4.0+ Some image filters like sharp, unsharp or grayscale applied to the gallery thumbs when using Imagemagick for processing.
galleryFilterGDarray Ver. 4.0+ Some image filters like sharp, sepia-tone or grayscale applied to the gallery thumbs when using GD for processing.
galleryDialogbool Anzeigen von Dialogfenster, wenn neue Thumbs erstellt worden sind.
galleryFadeOutSpeedint Ausblendegeschwindigkeit in ms für vorheriges Bild in der Galerie, z.B. 300
galleryFadeInSpeedint Einblendegeschwindigkeit für das einzuschaltende Bild, z.B. 300
galleryFadeInMotionstring Animation beim Einblenden, z.B. 'easeOutCirc'
galleryFadeInOpacityfloat Anfängliche Transparenz des Bildes beim Start der Einblendvorgangs, z.B. 0.1 oder 0
galleryFadeInSizefloat Multiplikator für die Größe des Bildes beim Start des Einblendevorgangs , z.B. 1.0 - keine Veränderung, 0.5 - um die Hälfte verkleinert, 2.0 - doppelt so groß. Abweichung von 1.0 ergibt somit ein nettes vergrößern oder verkleinern Effekt beim Umschalten zwischen den Bildern in der Galerie.
galleryFadeInAnmstring Startposition des Bildes vor einer Animation, mögliche Werte: 'Center', 'Top', 'Right', 'Bottom', 'Left', 'StretchVert', 'StretchHorz'; Ver. 4.0+ hinzugefügt: 'SwipeHorz', 'SwipeVert', 'Vert', 'Horz'
galleryInnerFadeint, bool Ineinander blenden "Innerfade" zwischen beiden Bildern beim Umschalten. Setzt galleryFadeOutSpeed und galleryFadeInSpeed außer Kraft. galleryFadeInSpeed wird dann lediglich beim Einblenden des ersten Bildes berücksichtigt. Zum ausschalten false verwenden.
galleryInnerFadeCutint, bool Gilt nur dann, wenn galleryInnerFade eingeschaltet ist. Wenn die Bilder in der Gallerie unterschiedlich groß sind, wird das vorherige Bild auf die Größe des einzublendenden Bildes abgeschnitten, sofern das vorherige Bild kleiner ist. Diese Option setzt die Zeit des Abschneidvorganges in ms. Für Deaktivierung verwenden Sie false.
galleryInnerFadeMotionstring Art der Animation für galleryInnerFadeCut, z.B. 'swing'
gallerySwipemixed Ver. 4.0+ Enable swiping gesture on mobile touch devices to swipe to next or previous image. Possible values: 'Horz', 'Vert' or false to disable.
gallerySlideNavibool Ver. 4.0+ Enable prev / next buttons above the picture of the player. In 360/3D mode these buttons turn the object.
gallerySlideNaviMouseOverbool Ver. 4.0+ Arrows for prev / next over the image appear only when mouse is over the player. Disabled for touch devices.
gallerySlideNaviOnlyFullScreenbool Ver. 4.0+ Show arrows for prev / next over the image only at fullscreen mode.
gallerySlideNaviMarginint Ver. 4.0+ Margin of the prev / next buttons from the edge of the player.
gallerySlideNaviAnmstring Ver. 4.0+ Transition type when clicked on the prev / next button, possible values 'Center', 'Top', 'Right', 'Bottom', 'Left', 'StretchVert', 'StretchHorz', 'SwipeHorz', 'SwipeVert', 'Vert', 'Horz'
gallerySlideSwipeSpeedint Ver. 4.1.9+ Speed for gallerySlideNavi in ms if gallerySlideNaviAnm is set to SwipeHorz or SwipeVert
scrollPanebool Browser Scrollbalken Ersatz - ScrollPane (jScrollPane.js) für die vertikale und "inline" Galerien.
scrollPaneThemestring jScrollPane Theme Verzeichnis, welches unter "/axZm/plugins/jScrollPane/themes" zu finden ist.
scrollPaneOptionsVertarray jScrollPane Optionen für vertikale Galerie.
scrollPaneOptionsFullarray jScrollPane Optionen für "Inline Gallery".
gallerySwitchQuickbool Ver. 4.1.0+ Enable "quick switching" for the gallery items. See also zoomSwitchQuick API
Animationsparameter bei Thumbs Mouseover zwischen unterschiedlichen Farben in der Galerie, CSS: .zoomGalleryBox to .zoomGalleryBoxOver AND .zoomFullGalleryBox to .zoomFullGalleryBoxOver
galleryThumbFadeOnbool Überblenden bei Thumbs zwischen zwei CSS Klassen bei MouseOver aktivieren.
galleryThumbOverSpeedint Wenn galleryThumbFadeOn aktiviert, die Geschwindigkeit der Animation in ms bei Mouseover, z.B. 150
galleryThumbOutSpeedint Wenn galleryThumbFadeOn aktiviert, die Geschwindigkeit der Animation in ms bei Mouseout, e.g. 1250
galleryThumbOverOpaquefloat Transparenz bei Mouseover, z.B. 1.0 (1.0 -> nicht durchsichtig, 100%)
galleryThumbOutOpaquefloat Transparenz bei Mouseout, e.g 0.8 (0.8 -> 80%)
galleryNoThumbsbool Thumbnails nicht generieren. Patch: 2012-04-21 Changed the way galleryNoThumbs works. If any gallery is shown and galleryNoThumbs is enabled, AJAX-ZOOM will not try to load the thumbs and show only description of the thumb. Useful if you have many images in the gallery, e.g. from IP camera and only want to show the time.
galleryThumbDescfunction  
Ver. 3.3.0 Patch: 2012-04-21 Create an anonymous function for thumb description in the gallery. $k is the number of the image in the gallery. $pic_list_data is an array containing following information: $pic_list_data[$k]["fileName"], $pic_list_data[$k]["fileSize"], $pic_list_data[$k]["imgSize"], $pic_list_data[$k]["thisImagePath"]

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

You can also create a named function right here and define $zoom['config']['galleryThumbDesc'] = "yourFunctionNameForThumbDescription"; e.g. function yourFunctionNameForThumbDescription($pic_list_data, $k){return $pic_list_data[$k]["imgSize"][0];} The above approach however can not be overwritten in zoomConfigCustom.inc.php, so we use create_function at this place.
galleryThumbFullDescfunction Ver. 3.3.0 Patch: 2012-04-21 Create an anonymous function for longer thumb description, which will be shown on mouseover the thumb in a gallery.
Option Type Description
useHorGallerybool Horizontale Galerie aktivieren.
galleryHorPicDimstring Größe der Thumbs in der horizontalen Galerie, z.B. '70x70'
galHorPositionstring Positionierung der horizonralen Galerie, mögliche Werte:
  • top1 - über dem Bild, über der Navigationsleiste
  • top2 - über dem Bild, unter der Navigationsleiste
  • bottom1 - unter dem Bild, über der Navigationsleiste
  • bottom2 - unter dem Bild, unter der Navigationsleiste
galHorHeightint Höhe des Containers für horizontale Galerie in px.
galHorCssMarginTopint Oberer Abstand (margin) der Thumbs in px, CSS: .zoomHorGalleryBox, .zoomHorGalleryBoxSelected, .zoomHorGalleryBoxOver
galHorCssMarginBetweenint Anstand zwischen den Thumbs, CSS: .zoomHorGalleryBox, .zoomHorGalleryBoxSelected, .zoomHorGalleryBoxOver
galHorMarginTopint Oberer Abstand (margin) des Galeriecontainers in px.
galHorMarginBottomint Unterer Abstand (margin) des Galeriecontainers in px.
galHorFlowbool "Flow-Scroll" Option. Das Scrollen geschieht automatisch in abhängigkeit von Mausposition innerhalb des Containers.
galHorArrowsbool Pfeile rechts und links als Scroller für die horizontale Galerie aktivieren. Wenn galHorFlow aktiviert ist braucht man diese Buttons nicht unbedingt.
galHorMousebool Mausrad Scrollen aktivieren.
galHorArrowWidthint Breite des Bildes (Pfeil Icon) für das Scrollen in horizontalen Galerie in px.
galHorCssPaddingint Innere Abstand zwischen dem eigentlichen Thumb und seinem Rahmen in px, CSS: .zoomHorGalleryImg
galHorCssBorderWidthint Randbreite des Thumb Rahmens in px, css: .zoomHorGalleryBox, .zoomHorGalleryBoxSelected, .zoomHorGalleryBoxOver
galHorCssDescrHeightint Höhe des Beschreibungscontainers innerhalb des Thumb Rahmens in px, CSS: .zoomGalleryDescr, bei 0 wird die Beschreibung deaktiviert.
galHorCssDescrPaddingint Innerer Abstand (padding) im Beschreibungscontainer in px, CSS: .zoomHorGalleryDescr
galHorScrollPosstring Den Thumb nach einem Klick in der horizontalen Galerie zentrieren.
galHorScrollToCurrentbool Wenn das erste Foto nach dem Laden nicht das erste in der Galerie ist, wird bis zu dem Foto automatisch gescrollt.
galHorScrollMotionstring Animation für das Scrollen, z.B. 'easeOutSine'
galHorScrollSpeedint Geschwindigkeit des Scrollvorgangs ms, z.B. 1000
galHorScrollByint Beim Scrollen mit den Pfeiltasten wird um diese Anzahl Thambs bei einem Klick gescrollt, z.B. 3
galHorInnerCornerbool Abgerundete Kanten im Inneren des Scrollcontainers.
galHorInnerCornerImagestring Wenn galHorInnerCorner aktiviert, das Hintergrundbild für abgerundete Kanten, z.B. 'inner_corner_black_5.png'.
galHorInnerCornerWidthint Wenn galHorInnerCorner aktiviert und galHorInnerCornerImage definiert, Kurvenradius in px.
Option Type Description
useGallerybool Vertikale Galerie aktivieren.
galleryPicDimstring Größe der Thumbs in der vertikalen Galerie, z.B. '100x100'
galleryPosstring Positionierung der vertikalen Galerie, mögliche Werte: 'left', 'right'
galleryLinesint Anzahl der Spalten in vertikaler Galerie.
galleryScrollbarWidthint Abstand (margin) in px rechts von den Thumbs (Platz für Scrollbalken). Die Breite der vertikalen Galerie kann über diesen Wert adjustiert werden.
galleryScrollTopbool Den Thumb nach einem Klick oder Auswahl oben in der vertikallen galerie anzeigen.
galleryScrollToCurrenttype Beim Start den Thumb in der Galerie suchen und bis dorthin scrollen.
galleryMarginLeftint Abstand (margin) in px zu dem Bild, wenn galleryPos gleich 'right'.
galleryCssPaddingint Innere Abstand zwischen dem eigentlichen Thumb und seinem Rahmen in px, CSS: .zoomGalleryImg
galleryCssBorderWidthint Randbreite des Thumb Rahmens in px,, CSS: .zoomGalleryBox, .zoomGalleryBoxSelected, .zoomGalleryBoxOver
galleryCssDescrHeightint Höhe des Beschreibungscontainers innerhalb des Thumb Rahmens in px, CSS: .zoomGalleryDescr
galleryCssDescrPaddingint Innerer Abstand (padding) im Beschreibungscontainer in px, CSS: .zoomGalleryDescr
galleryCssMarginint Abstand zwischen den Thumbs in px, CSS: .zoomGalleryBox, .zoomGalleryBoxSelected, .zoomGalleryBoxOver
galleryCssFirstTopMarginint Ver. 4.0+ Top Margin für das erste Thumb.
"Inline" Galerie wird über dem ganzen Bild beim Klicken auf ein Button in Navigation angezeigt.
Option Type Description
useFullGallerybool Inline Gallery aktivieren.
galleryFullPicDimstring Größe der Thumbs in "Inline Galerie", e.g. '70x70', CSS: .zoomFullGalleryBox, .zoomFullGalleryBoxOver, .zoomFullGalleryBoxSelected, .zoomFullGalleryDescr
galFullButtonbool Wenn aktiviert, wird der Button zum ein/ausschalten der Inline Galerie in der Navigation angezeigt. Manchmal macht es Sinn den Schalter zu deaktivieren, siehe dieses Beispiel, die Galerie jedoch einzuschalten, damit die Thumbnails auch erstellt werden.
galFullScrollCurrentbool Wenn aktiviert, wird automatisch bis zu dem aktiven Bild gescrollt.
galFullAutoStartbool Wenn aktiviert, öffnet sich die "Inline Galerie" automatisch gleich nach dem Start. Der User muss dann ein Bild auswählen oder die "Inline Galerie" schließen.
galFullTooltipbool Tooltip mit Beschreibung des Bildes in der "Inline Gallery" aktivieren.
galFullTooltipOffsetint Tooltip Abstand von einem Thumb in px, z.B. 5
galFullTooltipSpeedint Tooltip Einblendezeit in ms.
galFullTooltipTranspfloat Tooltip Transparenz, z.B. 0.93
galFullCssPaddingint Innere Abstand zwischen dem eigentlichen Thumb und seinem Rahmen in px, z.B. 5, CSS: .zoomFullGalleryImg
galFullCssBorderWidthint Randbreite des Thumb Rahmens in px.
galFullCssDescrHeightint Höhe des Beschreibungscontainers innerhalb des Thumb Rahmens in px, z.B. 10, CSS: .zoomFullGalleryDescr
galFullCssDescrPaddingint Innerer Abstand (padding) im Beschreibungscontainer in px, CSS: .zoomFullGalleryDescr
galFullCssMarginint Abstand zwischen den Thunbs in px, CSS: .zoomFullGalleryBox, .zoomFullGalleryBoxSelected, .zoomFullGalleryBoxOver
Vor, Zurück und Play Buttons für Galerien.
Option Type Description
galleryNavibool Galerie Navigation aktivieren.
galleryNaviPosstring Position des Galerie Navigation Containers. Mögliche Werte: 'top', 'bottom' or 'navi'. Top und bottom beziehen sich auf die Position oberhalb bzw. unterhalb des vertikalen Galerie Containers.
galleryNaviHeightint Ver. 4.0+ Height of the parent container if positioned not inside navigation bar (galleryNaviPos not 'navi')
galleryNaviCircbool Zirkuläre Galerie Navigation - Karussell aktivieren.
galleryNaviMarginarray Abstand (margin) des Galerie Navigation Containers in px, array(top, right, bottom, left), z.B. array(2, 25, 5, 0);
galleryButtonSpaceint Abstand zwischen den Buttons in px.
galleryPlayButtonbool Play/Pause Button aktivieren.
galleryAutoPlaybool Autoplay (Diashow) nach dem Start aktivieren. Wird beim ersten Zoomen oder einer anderen Aktion abgeschaltet.
galleryPlayIntervalint Intervall für Diashow in ms, z.B. 3500 (3,5 seconds)
3D (VR Object) / 360 Spin & Zoom
Option Type Description
spinModbool 360 spin / 3D mit drehen und zoomen aktivieren. "Inline Gallery" (useFullGallery) muss ebenfalls aktiviert werden.
spinBouncemixed Ver. 4.0+ Enable bounce for 360. Spinning will stop at last frame and go backwards to the first. This allows to use AJAX-ZOOM with objects where "backside" is not interesting or it is simply not possible to take images from the back, e.g. when they are mounted at the wall. HD "jpeg movies", time lapse photography are also fields of application with this option. Possible values: "bounce", "stop" and false
spinKeysarray Ver. 4.0+ Configuration of the keyboard keys to perform spinning in 360 and 3D;
spinSensitivityfloat Empfindlichkeit der Drehung abhängig von der Mausbewegung. Größere Zahl bedeutet schnelleres drehen.
spinSensitivityZfloat Empfindlichkeit der Drehung abhängig von der Mausbewegung in der Z Achse. Größere Zahl bedeutet schnelleres drehen.
spinReversebool Umgekehrte Richtung der Drehung bei Mausbewegung aktivieren. Im Grunde hängt die Richtung von der Reihenfolge der einzelnen Aufnamen.
spinContrabool 4.1.9+ Reverse direction of the spin in general
spinReverseZbool Umgekehrte Richtung der Drehung bei Mausbewegung aktivieren in der Z Achse. Im Grunde hängt die Richtung von der Reihenfolge der einzelnen Aufnamen.
spinReverseBtnbool, int Ver. 4.1.4+ Activate reversed direction for all kind of spin buttons. Normally the spin direction of the buttons is changed instantly when spinReverse option is changed. With this option you can reverse it again...
spinFlipbool Ver. 3.3.0+ Patch: 2010-01-30 Spin or (mouse) movements in bottom-down directions instead of left-right. This would be usefull if You shoot e.g. a guitar on a tuentable in vertical position and then turn the images by 90 degree.
firstAxismixed Ver. 3.3.0+ Patch: 2010-01-30 First Z axis (multirow) to be displayed. Can be overridden by passing $_GET['firstAxis'] in query string. Possible values: auto (middle), number of subdir, name of subdir.
spinDemobool Drehung starten, nachdem alle Bilder vorausgeladen wurden.
spinDemoTimeint Zeit in ms für eine Drehung.
spinDemoRoundsint, bool Anzahl der Runden, nach denen die automatische Drehung abgestellt wird. Bei false wird diese Beschränkung aufgehoben. Die automatische Drehung hört auf, wenn der User die Maus über dem Objekt bewegt.
spinOnSwitchbool Jedes mal automatisch drehen, wenn der User in dieses Modus umschaltet.
spinWhilePreloadbool Ver. 3.2.2+ Drehen während des Ladevorgangs.
spinMouseOverStopbool Automatische Drehung stoppen, wenn Maus über dem Objekt bewegt wird.
spinEffectarray Effekt bei Drehung:
spinEffect['enabled']bool Effekt bei Drehung aktivieren.
spinEffect['zoomed']bool Effekt bei Drehung während das Bild gezoomt ist.
spinEffect['opacity']float Durchsichtigkeit des verwisch Effekts.
spinEffect['time']int Zeit in ms des verwisch Effekts.
spinPreloaderSettingsarray Preloader Einstellungen, CSS: .spinPreloaderHolder, .spinPreloaderBar, .spinPreloadContainer
spinPreloaderSettings['width']int Breite der Preloader Box. Ver. 4.0+ kann prozentueller Wert sein (string)
spinPreloaderSettings['height']int Höhe der Preloader Box.
spinPreloaderSettings['borderW']int Rahmenstärke der Box in px.
spinPreloaderSettings['barH']int Höhe des Fortschrittsbalkens in px.
spinPreloaderSettings['barOpacity']float Transparenz des Fortschrittsbalkens.
spinPreloaderSettings['text']string Sprachvariable, z.B. 'Loading frames'
spinPreloaderSettings['gravity']string Ver. 4.0+ Position des Preloaders, default: "Center"
spinPreloaderSettings['gravityMargin']int Ver. 4.0+ Abstand zum Rand
spinPreloaderSettings['margin']int Ver. 4.0+ Abstand des Inhalts von Preloader zum Rand des Preloades
spinPreloaderSettings['countMsg']bool Ver. 4.0+ Ladefortschritt in Zahlen anzeigen.
spinPreloaderSettings['statusMsg']int Ver. 4.0+ Status text anzeigen.
spinPreloaderSettings['Lx']string Ver. 4.0.6+ Several localization strings.
cueFramescsv, bool Ver. 3.1.0+ CSV (comma-separated values) mit nummern der Frames, welche in die Galerie geladen werden falls eine Galerie aktiviert ist. Beim klicken auf ein Thumb wird automatisch bis zum ausgewählten Frame gedreht.
spinToMotionstring Ver. 3.1.0+ Typ der Animation, wenn zum bestimmten Frame gedreht wird, siehe auch cueFrames
spinOnClickbool Ver. 3.3.0+ If activated and spin tool is selected clicking on the image will result into spinning the object, otherwise it will zoom to 100%.
spinAreaDisablebool Ver. 3.1.0+ Drehfunktion für das Bild / Zoom Bereich deaktivieren, siehe dieses Beispiel
gallerySlideNavibool Ver. 4.0+ Enable turn left / right buttons above the picture of the player. In the 2D mode this option has a different functionality. See also gallerySlideNaviMouseOver, gallerySlideNaviOnlyFullScreen and gallerySlideNaviMargin
Ver. 3.0.2+ 360 Grad Schieberegler (Slider)
spinSliderbool Ver. 3.0.2+ UI Slider als zusätzliches Bedienelement einschalten.
spinSliderHeightint Ver. 3.0.2+ Höhe bzw. Dicke des Sliders in px.
spinSliderHandleSizeint Ver. 3.0.2+ Höhe bzw. Dicke des Schiebers in px.
spinSliderWidthmixed Ver. 3.0.2+ Weite des sliders. false (automatische Weite) oder Integer in px.
spinSliderPositionstring Ver. 3.0.2+ Position des Sliders. Mögliche Werte: naviTop, naviBottom, top, bottom
spinSliderContainerHeightint Ver. 3.0.2+ Höhe des Containers in px.
spinSliderContainerPaddingint Ver. 3.0.2+ Padding of the Slider container in px.
spinSliderTopMarginint Ver. 3.1.0+ Oberer Abstand des Sliders in px.
spinSliderFSoffsetint Ver. 4.0+ Margin from bottom edge at fullscreen mode.
spinSliderPlayButtonbool Ver. 3.1.0+ Play / Pause Button neben dem Slider.
spinSliderReversebool Ver. 4.0+ Reverse direction of the slider.
Navigationsleiste
Liste mit allen Buttons, auch aus anderen Überschriften: naviPanButSwitch, naviSpinButSwitch, naviCropButSwitch, naviZoomBut, naviPanBut, naviRestoreBut, mapButton, galFullButton, fullScreenNaviButton, help, downloadButton, galleryNavi, galleryPlayButton
Option Type Description
displayNavibool Navigationsleiste anzeigen oder ausschalten. Im Vollbildmodus wird sie über fullScreenNaviBar Option gesteuert.
firstModstring Ver. 3.0.1+ Das zuerst aktive Werkzeug nach dem laden, mögliche Werte: crop, pan, spin
keyPressModarray Ver. 4.0+ Quickly switch between crop, pan or spin using keyboard keys (experimental).
forceToPanbool Ver. 3.0.1+ Automatisch aus das Schwenk Werkzeug umschalten, wenn das Bild vollständig gezoomt ist.
zoomLogInfoDisabledbool Ver. 3.0.1+ Zoomstufenanzeige deaktivieren.
zoomLogInfobool Für Testzwecke können neben der Zoomstufe auch die für das Erstellen des Bildausschnittes benötigte Zeit, sowie der Trafficverbrauch angezeigt werden. CSS: .zoomLogHolder, .zoomLog
zoomLogJustLevelbool Nur die Zoomstufe anzeigen. Bei Aktivierung wird zoomLogInfo deaktiviert. CSS: .zoomLogHolder, .zoomLogJustLevel
deaktTranspfloat Transparenz der nicht aktiven Buttons, [0-1], z.B. 0.5
disabledTranspfloat Ver. 2.1.1+ Transparenz der Buttons, wenn das Foto kleiner, als die Arbeistsfläche ist, [0-1], z.B. 0.2
Ver. 3.0.2 Slider für zoom
zoomSliderbool Ver. 3.0.2 UI Slider für zoomen als zusätzliches Bedienelement einschalten.
zoomSliderHorizontalbool Ver. 3.3.0 Patch: 2011-12-27 Horizontaler slider einschalten.
zoomSliderHeightint Ver. 3.0.2 Höhe bzw. Länge des sliders in px.
zoomSliderHandleSizeint Ver. 3.0.2 Höhe bzw. Dicke des Schiebers in px.
zoomSliderWidthint Ver. 3.0.2 Breite bzw. Stärke des Sliders in px.
zoomSliderPositionstring Ver. 3.0.2 Position des sliders. Mögliche Werte: topRight, topLeft, bottomRight, bottomLeft, top, bottom; Ver. 4.0+ hinzugefügt: left, right
zoomSliderMarginVint Ver. 3.0.2 Vertikaler Abstand des Sliders vom Rand in px.
zoomSliderMarginHint Ver. 3.0.2 Horizontaler Abstand des Sliders vom Rand in px.
zoomSliderOpacityfloat Ver. 3.0.2 Durchsichtichkeit des Sliders [0.0 - 1.0], für MSIE ausgeschaltet.
zoomSliderContainerPaddingint Ver. 4.0+ Padding of the parent container which can be styled with css - #zoomSliderZoomContainer
zoomSliderMouseOverbool Ver. 4.0+ Show zoom slider only when mouse is over the player. Disabled for touch devices.
Sprachvariablen
zoomLogLevelstring Zoomstufe, z.B. 'Zoom Level:'
zoomLogTimestring Benötigte Zeit für Generierung des Bildausschnitts, z.B. 'Zoom Time:'
zoomLogTrafficstring Trafficverbrauch, z.B. 'Zoom Traffic:'
zoomLogSecondsstring Sekunden, z.B. 'sec.'
zoomLogLoadingstring Wird geladen Nachricht, z.B. 'Loading...'
Help (Info) button
helpbool Hilfe bzw. Information Button aktivieren.
helpTranspfloat Transparenz des Containers, in dem die Information angezeigt wird, z.B. 0.95
helpTimeint Einblendezeit fürs Info Container in ms, z.B. 300
helpMarginint Abstand des Containers zu Arbeitsfläche in px, z.B. 20
helpTxtstring Html oder Text Inhalt für das Info Container. Mann kann den Inhalt auch dynamisch erzeugen: JavaScript (jQuery): jQuery('#zoomedHelp').html('Inhalt des Containers'); PHP: $zoom['config']['helpTxt'] = $yourContentVar;
helpUrlstring Anstatt des vordefinierten Inhalts kann auch der Inhalt von einer anderen Seite in iframe angezeigt werden.
Button icons
buttonSetstring Unterordner des icons Ordners, in dem sich die Bilder für die Buttons befinden, z.B. 'default'. Auf dieser Weise kann ein anderes Buttonset erstellt werden.
iconsarray Multidimensionaler Array mit individuellen Einstellungen für jeden Button. Schauen Sie im Quelltext der Datei /axZm/zoomConfig.inc.php nach.
mapButTitlearray Multidimensionales Array mit Sprachvariablen für die Bezeichnungen der Buttons.
Ver. 4.0+ Mobile Buttons (Navi)
Dies ist eine alternative zu der starren Navigationsleiste in den Versionen vor 4.0; Sie ist besser geignet für mobile Geräte, kann jedoch auch für Desktops verwendet werden.
Option Type Description
mNavi['enabled']mixed Enable mNavi, possible values: true, false or "auto" - only for touch devices, disables regular navigation (displayNavi, fullScreenNaviBar)
mNavi['gravity']string Positioning gravity, possible values: topLeft, topRight, bottomRight, bottomLeft, bottom, top, right, left
mNavi['offsetHorz']int Horizontal offset from the edge of the player.
mNavi['offsetVert']int Vertical offset from the edge of the player.
mNavi['offsetHorzFS']int Horizontal offset from the edge of the player at fullscreen.
mNavi['offsetVertFS']int Vertical offset from the edge of the player at fullscreen.
mNavi['parentID']string ID of the container to place mNavi in none fullscreen mode outside of the player.
mNavi['setParentWidth']bool Sets width of the parent container same as navi container
mNavi['setParentHeight']bool Sets height of the parent container same as navi container
mNavi['fullScreenShow']bool Append mNavi to the player in fullscreen mode; you can also enable fullScreenNaviBar option instead.
mNavi['hover']bool Enables mouse over state of the button, e.g. if $zoom['config']['icons']['mHotspots'] = array('file'=>'button_iPad_hotspots', 'ext'=>'png', 'w'=>50, 'h'=>50); the hover state button is 'button_iPad_hotspots_over.png'
mNavi['down']bool Enables mouse down state of the button, e.g. if $zoom['config']['icons']['mHotspots'] = array('file'=>'button_iPad_hotspots', 'ext'=>'png', 'w'=>50, 'h'=>50); the hover state button is 'button_iPad_hotspots_down.png'
mNavi['dis']bool Ver. 4.1.9+ disables certain buttons like zoom in and out if they can not be used
mNavi['alignment']string Buttons alignment, possible values: 'horz' and 'vert'; if gravity is set to 'right' or 'left', this option defaults to 'vert'
mNavi['mouseOver']bool Hides when mouse is not over the player on not touch devices.
mNavi['firstEllMargin']int Left margin of first button in mNavi.orderDefault / mNavi.order
mNavi['ellementRows']int Number raws of ellements, if > 1 alignment defaults to 'horz'
mNavi['rowMargin']int If ellementRows > 1 - margin between the rows
mNavi['containerFixedWidth']int, bool If integer the container width is not calculated instantly but set to this value.
mNavi['containerFixedHeight']int, bool If integer the container height is not calculated instantly but set to this value.
mNavi['buttonDescr']bool If set to true button description will be applied the same way as by the old / regular navigation bar.
mNavi['alt']array Array with settings for the custom tooltip. Tooltip shows the description of the button.
mNavi['cssClass']string CSS class for navi container.
mNavi['cssClassFS']string CSS class for navi container at fullscreen mode.
mNavi['cssClassParentID']string CSS class if parentID (position outside of the player) is defined
mNavi['orderDefault']array Default button set if "order" is not defined;
mNavi['order']array In this option you can position any available button and define its margin to the next, e.g. 'orderDefault' => array('mZoomOut' => 5, 'mZoomIn' => 15, 'mReset' => 15, 'mPan' => 5, 'mSpin' => 5, 'mCrop' => 0) The buttons are defined in $zoom['config']['icons']['m*']
mNavi['customPos']array Place any button defined in mNavi['order'] somewhere else on the page. For example: 'customPos' => array( 'mReset' => array('css' => ( array('left' => 5, 'bottom' => 5, 'position' => 'absolute', 'zIndex' => 123) ), 'parentID' => '', 'mouseOver' => true) ) The reset button is places at top left corner of the player as parentID is not defined. parentID could be also some other DIV placed outside of the player. mouseOver means that the button is hidden unless the user puts the mouse over the player (disabled for touch devices).
mNavi['mCustomBtn(n)']string Stringified JavaScript function for the custom button. So images for mCustomBtn1 are defined in $zoom['config']['icons']['mCustomBtn1'], its position in mNavi['order'] and behaviour (click event) in mNavi['mCustomBtn1']; Example: 'mCustomBtn1' => 'function(){jQuery.fn.axZm.fillArea();}' You can add as many custom buttons as you like. In order to place third custom button extend $zoom['config']['icons'] with $zoom['config']['icons']['mCustomBtn3'], place your button into mNavi['order'] (override its position in 'customPos' if needed) and define 'mCustomBtn3' => 'function(){do stuff here...}'
Bewegungseffekte (Animation, Transition)
Option Type Description
pMoveint Beim Klicken auf eines der Schwenkpfeile in der Navigationsleiste wird das Bild um diesen Prozentwert des sichtbaren Bereichs verschoben, z.B. 75
pZoomint Beim Klicken auf das Bild mit der linken Maustaste, bzw. Klicken auf das Plus Button in der Navigationsleiste, wird das Bild um diesen Prozentwert vergrößert, z.B. 100 (x2)
stepZoombool Ver. 4.0+ By clicking on the image with the left mouse button or clicking on the plus button (zoom in) in the navigation bar, the image will be zoomed to the next pyramid step, e.g. to 100%, 50%, 25%, 12.5% ...
autoZoomarray Ver. 2.1.2+, Multidimensionales Array mit Parametern für das Autozoom nach dem das Bild geladen wurde.
autoZoom['enabled']bool Autozoom aktivieren.
autoZoom['onlyFirst']bool Autozoom nur für das erste Bild in der Galerie anwenden.
autoZoom['speed']int Animationszeit für Autozoom in ms, z.B. 300
autoZoom['motion']string Animation für das Autozoom, z.B. 'swing'
autoZoom['pZoom']mixed Kann eine Zahl sein, z.B. 150 (vergrößere x2,5), ein String: 'fill', 'max' oder eine Prozentwert als String, z.B. '50%'.

'fill' bedeutet das Bild soweit zu vergrößern, dass kein Hintergrund auf der Arbeitsfläche mehr zu sehen ist. 'max' bedeutet das Bild auf maximalen Wert zu vergrößern und ein Prozentwert wie '35%' wird das Bild genau auf diesen Wert vergrößern, wobei '100%' und 'max' dieselbe Bedeutung haben.
pZoomOutint Beim Klicken auf das Bild mit der rechten Maustaste (in Opera Browser standardmäßig deaktiviert), bzw. Klicken auf das Minus Button in der Navigationsleiste, wird das Bild um diesen Prozentwert verkleinert, z.B. 100 (/2)
zoomSpeedGlobalint Standard Zeit für Animationen in ms, z.B. 500
moveSpeedint Animationszeit in ms beim Klicken auf die Pfeile (Schwenken) in der Navigationsleiste, z.B. 750
zoomSpeedint Animationszeit in ms beim Klicken auf das Plus Button in der Navigationsleiste oder Klicken mit der linken Maustaste auf das Bild, z.B. 750
zoomOutSpeedint Animationszeit in ms beim Klicken auf das Minus Button in der Navigationsleiste oder Klicken mit der rechten Maustaste auf das Bild, z.B. 750
cropSpeedint Animationszeit in ms nachdem mit den Auswahlrechteck Werkzeug ein Bildbereich fürs Vergrößern ausgewählt wurde, z.B. 750
restoreSpeedint Animationszeit in ms nachdem der Button für Wiederherstellung angeklickt wurde, z.B. 750; wird ggf. von zoomMapSwitchSpeed überschrieben.
traverseSpeedint Zeit in ms für Seitwärtsbewegung, wenn kein zoomen mehr möglich ist und das Bild mit der linken Maustaste angeklickt wurde, z.B. 300
zoomFadeint Die Einblendezeit in ms für den Bildausschnitt nachdem er erzeugt und geladen wurde, z.B. 200 oder 0 fürs Deaktivieren.
zoomFadeInint Die Einblendezeit in ms, nachdem das Bild geladen wurde, e.g. 300
buttonAjaxint Beim Klicken auf ein Button in der Navigationsleiste - die die Zeit, nach der das gezoomte Bild zu laden anfängt, z.B. 750. Das Setzen dieses Parameters auf 0 würde das mehrmalige Klicken verhindern.
zoomEaseGlobalstring Standard Animation, e.g. 'easeOutCirc'
zoomEaseInstring Animation beim Klicken auf das Bild oder das Plus Button in der Navigationsleiste, z.B. 'easeOutCirc'
zoomEaseOutstring Animation beim Klicken auf das Bild mit der rechten Maustaste oder Klicken auf das Minus Button in der Naavigationsleiste, z.B. 'easeOutCirc'
zoomEaseCropstring Animation nachdem mit den Auswahlrechteck Werkzeug ein Bildbereich fürs Vergößern ausgewählt wurde, z.B. 'easeOutCirc'
zoomEaseMovestring Animation während einer Seitwärtsbewegung beim Klicken auf die Pfeile Buttons in der Navigationsleiste, z.B. 'easeOutCirc'
zoomEaseRestorestring Animation beim Klicken auf das Button Wiederherstellung, e.g. 'swing'
zoomEaseTraversestring Animation während einer Seitwärtsbewegung, wenn kein zoomen mehr möglich ist und das Bild mit der linken Maustaste angeklickt wurde, z.B. 'easeOutCirc'
fps1string Ver. 3.2.0+ Frames per second for all animations or false
fps2string Ver. 3.2.0+ Frames per second for all animations at fullscreen mode or false
gpuAccelarray Ver. 4.0.3+ Enable GPU rendering (translateZ) for desktop browsers
Zoom mit Mausrad
Option Type Description
scrollbool Zoom mit Mausrad aktivieren.
mouseScrollEnablebool Ver. 3.0.2+ Bei aktivierung wird das Browserfenser mitgescrollt.
scrollAnmbool Animation beim Zoomen mit dem Mausrad aktivieren. Wenn deaktiviert haben die Optionen scrollSpeed, scrollMotion und scrollPause keine Auswirkung.
scrollZoomint Prozentwert für vergrößern / verkleinern bei jedem Tick des Mausrads. 16 ist ein guter Wert, wenn scrollAnm deaktiviert und 35, wenn scrollAnm deaktiviert ist.
scrollAjaxint Nach Ablauf dieser Zeitangabe in ms seit der letzten Bewegung mit dem Mausrad oder einem Klick auf das Bild wird die Abfrage zu Generierung des Bildausschnittes ausgelöst. 750 ist ein guter Wert, wenn scrollAnm deaktiviert und 1250, wenn scrollAnm deaktiviert ist.
scrollSpeedint Wenn scrollAnm aktiviert, die Länge des Animationseffektes in ms, z.B. 1500
scrollMotionstring Wenn scrollAnm aktiviert, die Art der Animation. 'easeOutQuad' passt gut dafür.
scrollPauseint Um ein zu schnelles Scrollen zu verhindern, kann mit diesem Zeitwert in ms das Scrollen nach jedem Tick mit dem Mausrad temporär blockiert werden, z.B. 100
scrollBrowserExclarray Die Animation beim Scrollen läuft unter Mozilla Firefox oder safari relativ flüssig ab, beim IE bis einschließlich Ver. 8 je nach Bildgröße etwas schlechter. Über diese Option ist es möglich die Animation für frei wählbare Browsertypen und Versionen abzustellen. In Version 4.0+ wurde die struktur des arrays geändert. Browser Abbreviaturen: 'gecko', 'mozilla', 'mosaic', 'webkit', 'opera', 'msie', 'firefox', 'chrome', 'safari'
scrollBrowserExclPararray Über diese Option können separate Einstellungen für die von Animation ausgeschloßene Brower vorgenomen werden. Wenn also scrollAnm aktiviert ist und der Browser das Zoomen mit dem Mausrad nicht animieren soll (siehe scrollBrowserExcl), werden stattdessen die hier eingetragene Parameter (siehe scrollZoom, scrollAjax) angewandt. $zoom['config']['scrollBrowserExclPar']['scrollZoom'] = 16;
$zoom['config']['scrollBrowserExclPar']['scrollAjax'] = 1000;
scrollPanRint Beim Erreichen der maximalen Zoomstufe hat scroll die gleiche Bedeutung wie Klicken und Schwenken. Mausrad ist jedoch viel schneller. Dies hat zufolge, dass der User sehr schnell sich vom Ziel entfernt. Über diese Option kann die Auswirkung auf das Schwenkverhalten bei maximaler Auflösung entschärft werden. Bei 1 gibt es keinen Unterschied zu Klick - Schwenk Vorgang.
Bei false - wird das Verhalten völlig abgeschaltet.
Jede Zahl höher als 1 bewirkt eine Verminderung des Verhaltens in Bezug auf das Mausrad.
scrollOutReversedbool Ver. 3.2.0+ Behaivior during zoom out with the mouse wheel. The vieport is disabled. Instead coordinates of the oposit part of the image are passed to the zoom out function.
scrollOutCenterbool Ver. 3.2.0+ Behaivior during zoom out with the mouse wheel. The vieport is disabled. Instead coordinates of the center of the image are passed to the zoom out function.
Pan / Drag
Option Type Description
zoomDragPhysicsbool Es wird versucht die Mausbeschleunigung zu messen, so dass beim Schwenken ein Wurfeffekt nachempfunden wird.
zoomDragAnmbool Ver. 2+; Beim Schwenken animieren. Nicht empfohlen, wenn Bildkacheln direkt geladen werden.
zoomDragSpeedint Animationszeit in für Schwenkbewegungen, siehe zoomDragAnm, z.B. 1000
zoomDragMotionstring Animationsart beim Schwenken, z.B. 'easeOutCirc'.
zoomDragAjaxint Die Zeit, nach welcher die Ajax Abfrage ausgelöst wird, wenn das der User das Schwenken beendet.
Auswahrechteck
Farben können in HEX oder als HTML angegeben werden, z.B. '#CDD704' oder 'green'
Option Type Description
zoomSelectionColorstring Farbe innerhalb des Auswahrechtecks, z.B. '#006600' or 'green', false zum deaktivieren - dies mach das Werkzeug etwas schneller.
zoomSelectionOpacityfloat Transparenz des Auswahrechtecks, [0-1], z.B. 0.2
zoomOuterColorstring Farbe außerhalb des Auswahrechtecks, false zum deaktivieren.
zoomOuterOpacityfloat Transparenz außerhalb des Auswahrechtecks, [0-1], e.g. 0.4
zoomBorderColorstring Rahmenfarbe des Auswahrechtecks, z.B. '#006600' or 'green',
zoomBorderWidthint Rahmenbreite des Auswahrechtecks in px, z.B. 1
zoomSelectionAnmbool Expandierendes Effekt nach Selektieren des Auswahlbereichs.
zoomSelectionCrossbool Einen Kreuz in der Mitte des Auswahlrechtecks anzeigen, CSS: .zoomCropCross; Könnte auch jedes andere Bild sein.
zoomSelectionCrossOpfloat Transparenz des Kreuzes, siehe zoomSelectionCross, e.g. 0.75
zoomSelectionModstring Ver. 3.3.0+ Zoom selector mod, possible values 'min' or 'max'.
zoomSelectionPropstring, float or false Ver. 3.3.0+ Proportions of the selector. Possible values:
  • false - disabled. User can select whatever. Nevertheless the final zoom result will fit the box size.
  • box - automatic proportions of the zoom player box.
  • float number - always keep the same ratio, e.g. 1.5 means the ratio of 1.5 : 1 and 0.8 means ratio 100 : 125
Progressbar
Option Type Description
pssBarbool Progressbar aktivieren.
pssBarPstring Position der Progressbar. Mögliche Werte: 'bottom', 'top' and 'center'.
pssBarHint Progressbar Höhe in px, CSS: .zoomBar
pssBarMint Progressbar Abstand (margin) in px von oben oder unten, abhängig von pssBarP.
pssBarMSint Progressbar Abstand (margin) in px von links und rechts. Während pssBarM die Progressbar vertikal versetzt, schneidet diese Option die Progressbar von beiden Seiten ab.
pssBarOfloat Progressbar Transparenz, [0-1], z.B. 0.7
Ajax Loader
Option Type Description
zoomLoaderEnablebool Ajax loader (animiertes Icon während Ladeprozesses) aktivieren.
zoomLoaderClassint CSS Class mit einem animierten Gif Bild als Hintergrund, z.B. 'zoomLoader3'. Kann auch ein PNG "Filmstreifen" sein. In dem Fall muss in zoomLoaderFrames die Anzahl der Frames eingestellt werden.
zoomLoaderTransptype Loader Transparenz, [0-1], z.B. 0.9
zoomLoaderFadeInint Einblendezeit des Loaders in ms, z.B. 500
zoomLoaderFadeOutint Ausblendezeit des Loaders in ms in ms, z.B. 500
zoomLoaderPosstring Position des Loaders, mögliche Werte: 'Center', 'TopLeft', 'TopRight', 'BottomLeft' or 'BottomRight'
zoomLoaderMarginint Abstand (Margin) in px des Loaders von allen Seiten. Wenn zoomLoaderPos Wert 'center' ist, wird kein Abstand verwendet.
zoomLoaderFramesint or false Anstatt eines animierten GIFs kann ein PNG Bild wie ein "Film Streifen" verwendet werden. Diese Option definiert die Anzahl der Frames in diesem Striefen, z.B. 12. Alle Frames müßen gleich groß sein und untereinander auf einem PNG Bild angeordnet. Setzen Sie diese Option auf false, wenn in zoomLoaderClass die CSS Klasse ein animiertes GIF als Hintergrund hat.
zoomLoaderCycleint Die Zeit einer Sequenz in ms, 1000
Weitere Optionen
Option Type Description
cursorWaitbool System Zeiger für Hintergrundaktivität beim Laden eines Bildes aktivieren.
disableAllMsgbool Ver. 3.0.2+ Alle Nachrichten und Fehler deaktivieren.
fullZoomBorderfloat Mit dieser Option wird ein Parameter festgelegt, der die Sensitivität beim Vergrößern im oberen Zoombereich regelt. Um zu verhindern, dass Zoomstufen wie 99,2% entstehen, wird automatisch 100% gewählt, wenn der Wert dieser Option größer als 1.0 ist. Bei 1.1 wird beispielsweise automatisch bis zu 100% Ansicht gezoomt, wenn nur 10% bis dorthin übrig bleiben. Zum deaktivieren setzen Sie diese Option auf 1.0
fullZoomOutBorderfloat Mit dieser Option wird ein Parameter festgelegt, der die Sensitivität beim Verkleinern im unteren Zoombereich regelt. Bei 1.1 wird beispielsweise automatisch bis auf die volle Bildansicht verkleinert, wenn nur 10% bis dorthin übrig bleiben. Zum deaktivieren setzen Sie diese Option auf 1.0
zoomTimeOutint Timeout einer AJAX Anfrage in ms, z.B. 10000 oder false zum deaktivieren.
zoomWarningBrowserbool Warnung bei nicht unterstützten Browsern anzeigen. IE 6.0 wird unterstützt!
msInterpbool Bikubische Interpolation für IE bis Ver. 8 einschalten.
errorsbool Fehler anzeigen.
licenseErrorsbool Ver. 4.0+ Display license errors. Before version 4.0 license errors did not display if errors options was not set.
warningsbool Warnungen anzeigen.
useSessbool Session cookies verwenden.
cachebool Generierte Zoom Bilder cachen. Wird nur für eine Session verwendet.
cacheTimetype Cache Zeit für generierte Zoom Bilder in Sekunden. Nach dieser Zeit werden alle älteren Bilder gelöscht. Sollte 30 Sekunden nicht unterschreiten.
picChmodarray Ver. 2.1.6+ Patch: 2010-10-19 - Array mit octalen Werten für Dateiberechtigungen der generierten Bilder, e.g 0644 oder false.
cornerRadiusint Abgerundete Kanten Radius in px, default: 5. Beim verstellen müssen außerdem folgende CSS editiert: .zoom-top-left, .zoom-top-right, .zoom-bottom-left, .zoom-bottom-right, sowie die Hintergrundbilder geändert werden (default: 'black-corner-5.png'). Zum deaktivieren 0 verwenden.
innerMarginint Äußere Abstand des Zoom Bildes in px. Bildet einen durchgehenden Rahmen um das Bild. Wenn Abgerundete Kanten (cornerRadius) verwendet werden, sollte der Wert dieser Option gleich dem Zum deaktivieren 0 verwenden. gesetzt werden. Zum deaktivieren 0 verwenden.
zoomStatbool Einige Informationen, hauptsächlich Framerate für Testzwecke in einem gesonderten Bereich anzeigen.
zoomStatHeightint Höhe des Containers für zoomStat).
layHorCenterbool AJAX-ZOOM innerhalb des übergeorneten (parent) Containers horizontal zentrieren.
layVertCentermixed Bei true wird AJAX-ZOOM innerhalb des übergeorneten (parent) Containers vertikal zentriert. Eine Zahl definiert den oberen Abstand (margin).
layVertBotMrgint Unterer Abstand (margin) des AJAX-ZOOM Containers in px.
allowDynamicThumbsbool Ver. 3.1.0+ Erlauben Thumbnails dynamisch zu generieren, indem die Parameter zu der Datei "/axZm/zoomLoad.php" geschickt werden.
allowDynamicThumbsMaxSizeint Ver. 3.3.0, Patch: 2012-04-19 Max. thumbsnail size (width and height) that can be achieved by resizing an image when allowDynamicThumbs is enabled.
dynamicThumbsMaxCacheTimeint Ver. 4.0+ Sets Cache-Control: maxage header for the dynamically generated images
dynamicThumbsCachebool Ver. 4.1.9+ Cache thumbs to disk
dynamicThumbsCacheByGETbool Ver. 4.1.9+ Allow change cache settings by GET parameter
dynamicThumbsAllowCropbool Ver. 4.1.9+ Allow to pass parameters which will crop certain areas out of image and make the thumb
dynamicThumbsCropMaxSizeint Ver. 4.1.9+ Max size for the thumbnails when cropping parameters are passed
dynamicThumbsCropOnlyFromCachebool Ver. 4.1.9+ Return croped images only if they are already cached to disk. If this setting is true and cached version of the crop does not exist, then crop values will be ignored.
dynamicThumbsQualRangearray Ver. 4.1.9+ Quality range which can be passed over query string ($_GET)
dynamicThumbsCtimebool Ver. 4.1.9+ Compare creation time of image and thumb and if image is newer, recreate the cached thumb
tapHideAllbool Ver. 4.0+ Hide / show all UI elements including zoom map and any other user injected elements by taping at the player on touch devices. Tap zoom is disabled. Ver. 4.0.6+ Works also on not touch devices, however zoomDoubleClickTap has to be set to some ms number.
zoomDoubleClickTapint Ver. 4.0.6+ Double ckick or double tap in order to zoom in (out, when completly zoomed in). The integer value indicates the max double click speed in ms.
touchSettingsarray Ver. 4.0+ By freely setting array elements of this option you can override any other AJAX-ZOOM option which will only be enabled for touch devices. For example you can disable spinSlider and zoomSlider if you think these UI elements do not make much sense on touch screens. $zoom['config'] will be extended for touch devices simmilar to jQuery.extend();
polyfillbool Ver. 4.1.9+ Use window.requestAnimationFrame for jQuery animations; If true /axZm/plugins/jquery.requestAnimationFrame.min.js will be loaded; Requires jQuery Ver. 1.8+
Wasserzeichen
mit einem PNG Bild, Text oder beides
Option Type Description
watermarkbool PNG Bild Wasserzeichen auf dem Zoom Bild aktivieren.
wtrmrkarray Multidimensionales array mit Parametern für das Wasserzeichen:
wtrmrk['gravity']string Position des Wasserzeichens auf dem Zoom Ausschnitt des Fotos. Mögliche Werte: NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast
wtrmrk['file']string PNG 24 Bit Bild mit transparenten Bereichen, welches sich in icon Verzeichnis befindet, z.B. 'copyright.png'; Ver. 3.2.2+ Das PNG Bild mit Wasserzeichen kann sich überall befinden, einfach den absoluten Pfad angeben, z.B. '/pic/watermarks/watermark.png';
wtrmrk['watermarkTiles']bool Ver. 3.2.2+ Wenn Bildkacheln direkt geladen werden (pyrLoadTiles ist eingeschaltet), dann können beim aktivieren dieser Option alle Bildkacheln mit einem Wasserzeichen versehen werden.
wtrmrk['composeStyle']string, bool Stil der Überlagerung, nur für imageMagick! Mögliche Werte: 'screen', 'overlay', 'multiply', 'darken', 'lighten', 'linear-light', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'plus', 'minus', 'subtract', 'difference', 'exclusion'
Wenn Sie lediglich Transparenz benötigen, dann speichern Sie einfach das PNG Bild mit einer beliebigen Transparenzstufe ab.
wtrmrk['fill']bool Flächendeckendes Wasserzeichen. Wenn Sie mit den Ergebnissen oder Performance dieser Option nicht zufrieden sind machen Sie Ihr Wasserzeichen Bild so groß wie picDim (das erste Bild) bzw. noch größer.
wtrmrk['initPic']bool Wasserzeichen auf dem ersten Bild.
Wasserzeichen als Text
textbool Wasserzeichen als Text aktivieren.
txtarray Multidimensionales Array mit Parametern für das Text Wasserzeichen. Diese Option kann wiederholt werden, um mehrere Text Wasserzeichen an verschiedenen Stellen zu platzieren.
$zoom['config']['txt'][0] = array (options, ...);
$zoom['config']['txt'][1] = array (options, ...);
$zoom['config']['txt'][2] = array (options, ...);
txt['fontFile']string Schrift ttf Datei, z.B. 'arial.ttf'
txt['fontSize']int Scriftgröße in pt, z.B. 12
txt['fontColor']array Scrift Farbe - array R (Red), G (Green), B (Blue), z.B. array('R' => 255, 'G' => 255, 'B' => 255);
txt['fontTransp']int Schrift Transparenz [0-100], z.B. 100 (keine Transparenz)
txt['fontGravity']string Ein Array mit multiplen Positionen des gleichen Textes. Mögliche Werte: 'NorthWest', 'North', 'NorthEast', 'West', 'Center', 'East', 'SouthWest', 'South', 'SouthEast'
txt['fontMargin']int Abstand (margin) vom Bildrand in px.
txt['fontAngle']int Text Drehung (grad).
txt['fontBox']bool Hintergrundbox aktivieren.
txt['fontBoxColor']array Farbe der Hintergrundbox - R (Red), G (Green), B (Blue), z.B. array('R' => 0, 'G' => 0, 'B' => 0);
txt['fontBoxTransp']int Transparenz der Hintergrundbox [0-100].
txt['fontBoxPadding']int Innere Abstand (padding) der Hintergrundbox in px.
Virtuelles Wasserzeichen
vWtrmrkstring, bool Das virtuelle Wasserzeichen wird als eine höherliegende Ebene über dem Bild angezeigt. Bitte beachten Sie, dass diese Option keinen wirksamen Schutz Ihres Originalbildes bietet! CSS class mit PNG Bild als Hintergrund, z.B. 'zoomWtrmrk' oder false zum deaktivieren.
Bildpyramide mit Kacheln
Option Type Description
pyrTilesbool Bildpyramide mit Kacheln aktivieren.
pyrDialogbool Benachrichtigung in einem Dialogfenster anzeigen, wenn Bildkacheln generiert worden sind. Dies geschieht nur ein Mal.
pyrQualint JPG Qualität der generierten Bildkacheln. 100 wird empfohlen, wenn Bildkacheln auf dem Server zusammengefügt werden. In diesem Fall ist die Einstellung qual maßgebend. Wenn aber Bildkacheln direkt geladen werden, pyrLoadTiles aktiviert ist, wird 80 als Komprimierungsstufe empfohlen.
pyrQualPngarray Ver. 4.0+ Qualität der Bildkacheln in pngMode
tileSizeint Die Größe der Bildkacheln in px (Breite = Höhe), [128-768], z.B. 256 or 384
pyrAutoDetectbool Diese Option sollte nur dann aktiviert werden, wenn bei unterschiedlichen Fotos unterschiedliche Größen der Bildkacheln vorhanden sind. Verschiedene Größen ergeben sich aus der Änderung der tileSize nachdem einigen Bildkacheln bereits erzeugt worden sind. Bedenken Sie auch die Bildkacheln für Bilder mit abweichender Größe der Bildkacheln neu zu erzeugen und diese Option zu deaktivieren.
pyrTilesPathstring Das Verzeichnis, wo Bildkacheln gespeichert werden, z.B. '/pic/zoomtiles/'. Dieses Verzeichnis kann per (.htaccess, .htpasswd) geschützt werden, aber nur dann, wenn pyrLoadTiles deaktiviert ist! Anderenfalls, wenn Bildkacheln direkt geladen werden, muss das Verzeichnis über http lesbar sein. Für jeden Bildnamen wird ein Unterverzeichnis ohne .jpg erzeugt, wo dann auch die Bildkacheln für einzelne Fotos gespeichert werden. In jedem Fall sollten die Rechte (Chmod) so gesetzt werden, dass PHP darin schreiben kann!
pyrChmodint Chmod für die Ordner, wo Bildkacheln gespeichert werden, z.B. 0755
pyrChmodAllbool Chmod alle existierende Unterordner für Bildkacheln. Dies könnte nützlich sein, wenn die erstellten Unterordner nicht über FTP editiert werden können, weil der FTP User nicht genügend Rechte besitzt. Stellen Sie dann pyrChmod auf 0777 und starten AJAX-ZOOM ein Mal. Danach muss diese Option auf false zurückgestellt werden.
pyrProgstring Mit welcher Imaging Bibliothek sollen die Bildkacheln erstellt werden. Mögliche Werte sind 'GD' oder 'IM'. 'GD' steht für die normaleweise mit PHP gebündelte GDlib und 'IM' für ImageMagick. Siehe auch Anforderungen. Für die Zusammenfügung der Bildkacheln siehe pyrStitchProg.
pyrProgImLimitarray Nur für ImageMagick: Einstellungen für diverse Limits bei der Erstellung von Bildkacheln. Für weitere Information siehe http://www.imagemagick.org/script/command-line-options.php#limit
pyrProgErrorRemovebool Sollten ImageMagick oder GD nicht genügend Speicher für die Erstellung der Bildkacheln zugeteilt bekommen, was bei sehr großen Bildern insbesondere auf shared Hosting durchaus der Fall sein kann, könnten nicht alle Bildkacheln erstellt werden. Bei Aktivierung dieser Option werden in dem Fall alle nicht vollständig generierten Bildkacheln samt Unterordner automatisch gelöscht.

Bei Verwendung der GDLib stellen Sie sicher, dass durch memory_limit (z.B. ini_set ('memory_limit', '512M') ) genügend RAM zur Verfügung steht. Bei ImageMagick beachten Sie in diesem Zusammenhang pyrIMcacheLimit und pyrProgImLimit Optionen. Unabhängig von allen Einstellungen muss natürlich der Server physisch genügend Speicher besitzen und durch die Einstellung den Speicher auch tatsächlich zuteilen (dürfen).
pyrIMcacheLimitfloat Mit ImageMagick ist es möglich auch sehr große Fotos (100 Mio Pixel e.g. 20.000px x 5.000 oder mehr) mit wenig RAM zu verarbeiten. Bei Aktivierung dieser Option wird ImageMagick gezwungen kein RAM, sondern die Festplatte als Zwischenspeicher zu nutzen. Wenn die Bildmasse miteinander multipliziert (Höhe x Breite) die hier angegebene Zahl überschreiten, z.B. 5.200 x 3.700 = 19.24 Mio. Pixel wird automatisch kein RAM verwendet und auf Festplatte geschrieben. Diese Vorgehensweise ermöglicht zwar größere Fotos zu verarbeiten, sie dauert jedoch bis zu x10 länger. Seien Sie deshalb bitte geduldig.
pyrStitchProgstring Mit welcher Imaging Bibliothek sollen die Bildkacheln zusammengefügt werden. Mögliche Werte sind 'GD' oder 'IM'. 'GD' steht für die normaleweise mit PHP gebündelte GDlib und 'IM' für ImageMagick. Siehe auch Anforderungen. Für die Erstellung der Bildkacheln siehe pyrProg. Wenn pyrLoadTiles aktiviert ist werden die Bildkacheln nicht auf dem Server zusammengefügt, sondern direkt geladen.
pyrStitchImLimitarray Nur für ImageMagick: Einstellungen für diverse Limits bei der Zusammenfügung der Bildkacheln. Für weitere Information siehe http://www.imagemagick.org/script/command-line-options.php#limit
pyrStitchSelfloat Wenn Bilder auf dem Server zusammengefügt werden ist es manchmal besser eine höhere Ebene zu nehmen um beste Resultate bzw. Bildqualität zu erzielen. Werte über 1.0 z.B. 1.2 bedeuten, dass die Quellbilder / Bildkacheln zumindest 20% größer oder gleich den Output Massen sein müssen. Wenn nicht, dann wird eine höhere Bildebene gewählt und das Output Bild entsprechend verkleinert.
pyrLoadTilesbool Ver. 2+; Bildkacheln direkt laden, anstatt Sie auf dem Server bei jedem Zoom zusammenzufügen. Diese Einstellung ermöglicht schnelleres zoomen und der Bedarf an Serverleistung wird reduziert.
pyrTilesFadeInSpeedint Ver. 2+; Wenn pyrLoadTiles aktiviert ist, die Einblendezeit der Bildkachlen in ms.
pyrTilesFadeLoadint Ver. 2+; Wenn pyrLoadTiles aktiviert ist, die Einblendezeit der Bildkachlen während verschieben (panning) in ms.
Automatisch Generierte Optionen
Option Type Description
iconDir, picDir, thumbDir, tempDir, galleryDir, fontDir, gPyramidDir, pyrTilesDir string Root Pfade generiert aus of fpPP und anderen Pfad Angaben.
picX, picY, galPicX, galPicY, galFullPicX, galFullPicY, galHorPicX, galHorPicY int Verschiedene Massangaben generiert aus vorherigen optionen.
Vollbild
Ver. 3.2.0+ pyrLoadTiles muss eingeschaltet werden.
Option Type Description
fullScreenEnablebool Vollbild grundsätzlich einschalten.
fullScreenNaviButtonbool Vollbild Button in der Navigationsleiste einschalten.
fullScreenCornerButtonbool Vollbild Button in der rechten oberen Ecke anzeigen.
fullScreenCornerButtonPosstring Next Update: Position of the fullscreen button image, possible values: topLeft, topRight, bottomLeft, bottomRight
fullScreenCornerButtonFileInitstring Next Update: Filename of the fullscreen Init button located in /axZm/icons directory; Depreciated in Ver. 4.0+
fullScreenCornerButtonFileRestorestring Next Update: Filename of the fullscreen Restore button located in /axZm/icons directory; Depreciated in Ver. 4.0+
fullScreenCornerButtonMarginXint Ver. 4.0+ Horizontal distance of the fullscreen button to the edge of the player.
fullScreenCornerButtonMarginYint Ver. 4.0+ Vertical distance of the fullscreen button to the edge of the player.
fullScreenCornerButtonMouseOverbool Ver. 4.0+ Enable mouseover state of the fullscreen button.
fullScreenNaviBarbool Navigationsleiste im Vollbildmodus einschalten.
fullScreenGallerybool Depreciated in Ver. 4.0+ Galerie im Vollbildmodus anzeigen. Muss auch im nicht Vollbildmodus eingeschaltet werden.
fullScreenVertGallerybool Vertikale Galerie im Vollbildmodus anzeigen. Vertikale und horiontale Galerien sind gleichzeitig nicht mehr möglich. Man kann jedoch im nicht Vollbildmodus eine andere Galerie als im Vollbildmodus einschalten bzw. ausblenden.
fullScreenHorzGallerybool Horizontale Galerie im Vollbildmodus anzeigen. Vertikale und horiontale Galerien sind gleichzeitig nicht mehr möglich. Man kann jedoch im nicht Vollbildmodus eine andere Galerie als im Vollbildmodus einschalten bzw. ausblenden.
fullScreenExitTextstring, bool Beim Einschalten des Vollbildmodus die Nachricht anzeigen, dass mit ESC Vollbildmodus beendet werden kann. Wenn false, ausgeschaltet.
fullScreenExitTimeoutint Zeit in ms, nach der die ESC Nachticht verschwindet.
fullScreenRelstring Mit Javascript können für Vollbild nur die inneren Masse des geöffneten Browserfensters benutzt werden. Voreinstellung ist daher 'window'. Mann kann aber stattdessen eine andere ID des Elements auf der Seite verwenden.
fullScreenMapFractfloat, bool Relative Grösse der Zoom Map im Vollbildmodus. Float < 1.0; Beim false wird die Einstellung aus dem Standardmodus gewählt.
fullScreenMapWidthint, bool Feste Breite der Zoom Map in px. während des Vollbildmodus. Siehe auch mapWidth
fullScreenMapHeightint, bool Feste Höhe der Zoom Map in px. während des Vollbildmodus. Siehe auch mapHeight
fullScreenKeepZoomarray Ver. 4.0+ try to keep zoom level (visible part of the zoomed image) when changing to fullscreen mode, back or resizing the player / browser window size.
fullScreenApibool Ver. 4.0+ Enable native fullscreen JavaScript API if supported by the browser.
fullScreenSpacearray Ver. 4.1.9+ Adds divs for custom content around the player at fullscreen mode You can access the divs best over onFullScreenSpaceAdded callback and append your content to these divs with IDs #axZmFsSpaceTop, #axZmFsSpaceRight, #axZmFsSpaceBottom and #axZmFsSpaceLeft
Download
Ver. 3.3.0+ Patch: 2011-10-17 Volles Bild herunterladen.
Option Type Description
allowDownloadbool Generel erlauben volle bilder herunterzuladen.
downloadButtonbool Download Button in Navibar einschalten.
downloadResmixed Download Auflösung des Bildes, mögliche Werte:
  • false - das Originalbild wird heruntergeladen.
  • string - e.g. '1024x768' - das Bild wird nur in dieser Auflösung als JPG heruntergeladen.
  • array - e.g. array('1024x768', '1280x1024', '1600x1050') - download ist in einer der Auflösungen möglich, abhängig von dem zweiten Parameter 'res' der API Funktion jQuery.fn.axZm.downloadImg(id, res);
downloadQualint JPG Ausgabequalität wenn $zoom['config']['downloadRes'] nicht false ist.
downloadQualPngarray Ver. 4.0+ PNG Ausgabequalität wenn $zoom['config']['downloadRes'] nicht false ist.
downloadCachebool Bilder in der Auflösung(en) $zoom['config']['downloadRes'] cachen.

Bilder festlegen

Einführung, bitte lesen.
Es gibt drei Möglichkeiten dem AJAX-ZOOM mitzuteilen welche Bilder zu laden sind. Die ersten zwei sind einfach und man benötigt dazu praktisch keine Programmierkenntnisse.
  • Von der Seite, wo AJAX-ZOOM angezeigt werden soll, wird eine Liste mit Bildern übergeben, wobei jedes Bild und sein Pfad separat definiert werden. Dieser Parameter heißt "zoomData".
  • Alternativ kann man ein Verzeichnis übergeben. AJAX-ZOOM wird alle darin befindende Bilder nehmen und automatisch in die Galerie laden. Dieser Parameter heißt "zoomDir".
  • Sollten die oben genannten Möglichkeiten nicht ausreichen können Sie beliebige Parameter selbst definieren, z.B. productID=123 als Referenz zu irgendetwas, z.B. Datenbankeintrag. Die Datei '/axZm/zoomObjects.inc.php' muss jedoch manuell angepasst werden um die Liste mit Bildern intern zu generieren und weiter zu verarbeiten. Wie die Praxis zeigt ist es relative kompliziert und ist in dem meisten Fällen nicht notwendig. Die Dokumentation und Beispiele wie '/axZm/zoomObjects.inc.php' modifiziert werden kann befinden sich im Anhang.
Bitte beachten Sie, dass alle Pfade relativ zu dem Pfad in der Option $zoom['config']['pic'] als "Basis Pfad" gesetzt werden können., z.B. wenn das Bild '/pictures/sourceImages/123/test.jpg' geladen werden soll und prinzipiell alle Bilder sich unter '/pictures/sourceImages/' befinden, dann kann die Option $zoom['config']['pic'] = '/pictures/sourceImages/'; gesetzt werden.

Um also das Bild '/pictures/sourceImages/123/test.jpg' zu laden bräuchte man lediglich diesen Pfad zu übergeben: '/123/test.jpg', so dass wenn '/pictures/sourceImages/' kein Pfad eines Standardprogramms ist, würde keiner Erfahren wo sich die Originalbilder befinden. Zusätzlich kann das Verzeichnis '/pictures/sourceImages/' mit einem Passwort geschützt werden um ein http Zugriff zu verweigern.

Vollständigkeitshalber wird hiernach bei der Erklärung der "zoomData" und "zoomDir" Parameter eine simple Integration mittels der jquery.axZm.loader.js Datei angezeigt. Diese Loader Datei lädt selbst jQuery Bibliothek, wenn Sie nicht bereits geladen wurde. Mehr Möglichkeiten der Integration sind aus dem nächsten Abschnitt und Beispielen zu entnehmen. Beim Bedarf wenden Sie sich an den Support.

By defining the images to load with relative paths may lead to not showing them under certain conditions. A simple workaround is to always use absolute paths. Please avoid using relative paths on productive environments.
zoomData
zoomData als PHP Array umgewandelt in einen String.
	$zoomData = array();
	
	$zoomData[1]['p'] = '/pic/zoom/animals/'; // Absolute paths
	$zoomData[1]['f'] = 'test_animals1.png'; // Image Name
	
	$zoomData[2]['p'] = '/pic/zoom/animals/';
	$zoomData[2]['f'] = 'test_animals2.png';
	
	$zoomData[3]['p'] = '/pic/zoom/boutique/';
	$zoomData[3]['f'] = 'test_boutique1.png';
	
	$zoomData[4]['p'] = '/pic/zoom/boutique/';
	$zoomData[4]['f'] = 'test_boutique2.png';

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

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

Einbindung in HTML/PHP

Dieses Bereich wird komplett überarbeitet. Orientieren Sie sich bitte solange an den Beispielen...

Stapelverarbeitung

zoomBatch.php
-

zoomBatch.php ist eine Beispieldatei, mit der man eine große Menge an Bildern für die Arbeit mit AJAX-ZOOM vorbereiten kann. Da jedoch alles auch on-the-fly beim ersten Aufruf geschehen kann, ist dieser Schritt nicht notwendig! Einige Operationen, wie die Erstellung von Bildkacheln für sehr große Bilder können je nach System etwas länge dauern. In diesem Fall empfiehlt es sich zumindest die Bildkacheln auf diese Weise vorzubereiten.

zoomBatch.php kann viele Operationen mit einem visuellen Feedback ausführen. Nachdem eine Operation ausgeführt ist, wird etwas JavaScript zurückgegeben und die Datei noch mal über ajax geladen. Dadurch entsteht eigentlich das visuelle Feedback, was für "cron jobs" und Ausführen per Kommandozeile nicht geeignet ist.

Im Head Bereich der Datei zoomBatch.php finden Sie einige kommentierte Optionen, die nur die Stapelverarbeitung betreffen. Sie werden in einem Array, definiert als $zoom['batch'] gespeichert. Auch gibt es ein sehr simples Schutzmechanismus, damit die Datei nicht von jedem geöffnet werden kann. Das voreingestellte Passwort ist eine zufällige Zahl. Sie müssen also es im Quelltext ändern, um die Datei im Browser aufrufen zu können.

On default the base folder is shown first.

In the top dropdown select the desired folder with images.

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

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

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

When everything is ready it will show a diolog.

API

JavaScript Vars
jQuery.axZm.ow Width of the original image.
jQuery.axZm.oh Height of the original image.
jQuery.axZm.iw Width of the initial image.
jQuery.axZm.ih Height of the initial image.
jQuery.axZm.lastZoom Object containing the coordinates (x1, y1, x2, y1) of the zoomed area in the source 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 Objekt mit Informationen über die in einer Galerie geladene Bilder.
jQuery.axZm.userFunc Callback functionen werden hier gespeichert und können nach der Initialisierung verändert werden.
 
Javascript Callbacks
AJAX-ZOOM has many callbacks which can be used to develop custom applications.

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

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

On demand API can be extended.
Callback Description
onBeforeStart Triggers just after jQuery.fn.axZm starts initializing.
onStart Triggers while initialization after passing some tests.
onLoad Triggers after first image is loaded.
onZoom Ver. 4.0+ Triggers alsways on any zoom in or out.
onZoomStart Ver. 4.1.2+ Triggers only at the beginning of any zoom in or out.
onZoomTo Ver. 4.0+ Triggers only when using API jQuery.fn.axZm.zoomTo()
onSpinChange Ver. 4.0+ Triggers when frames of a 360/3D spin changes.
onStartPlay Ver. 4.0+ Triggers when autoPlay starts.
onStopPlay Ver. 4.0+ Triggers when autoPlay stops.
onDragStart Ver. 4.1.0+ Triggers when user starts dragging.
onDragDrag Ver. 4.1.0+ Triggers when user drags zoomed image.
onDragEnd Ver. 4.1.0+ Triggers when user stops dragging.
onMapDragStart Ver. 4.1.0+ Triggers when user starts dragging the zoomMap.
onMapDragDrag Ver. 4.1.0+ Triggers when user drags zoomed image over zoomMap.
onMapDragEnd Ver. 4.1.0+ Triggers when user stops dragging image over zoomMap.
onZoomInClickStart Triggers after the user clicks on the image to zoom in. If your function returns false the zooming action does not take place! Useful if you want to inspect the coordinates of the click and e.g. open a popup for this position...
onZoomInClickEnd Triggers after the user clicks on the image to zoom in and the zoom animation is completed.
onZoomOutClickStart Triggers after the user clicks on the image to zoom out (right click or SHIFT + left click).
onZoomOutClickEnd Triggers after the user clicks on the image to zoom out and the zoom animation is completed.
onSelection Triggers during the selection of the image area.
onSelectionEnd Triggers after the image area is selected (mouseup).
onImageChange Triggers on changing the image from gallery.
onImageChangeEnd Triggers when changing the image from gallery is done.
onCropEnd Triggers after the zoomed image portion is croped and loaded / image tiles are loaded.
onRestoreStart Ver. 4.1.2+ Triggers at the beginning when the user hits restore button or restoring is triggered by the API. The speed till the image zooms back to it's initial stage is controlled by zoomMapSwitchSpeed and restoreSpeed.
onRestoreEnd Triggers when the image zooms back to initial stage (full image visible). The speed till the image zooms back to it's initial stage is controlled by zoomMapSwitchSpeed and restoreSpeed. Ver. 4.1.2+ changed to the time where initial stage is really reached.
onFullScreenStart Ver. 3.2.0+ Triggers when initializing the fullscreen.
onFullScreenStartFromRel Ver. 4.0.4+ Triggers when starting initializing the fullscreen from relative sized AJAX-ZOOM.
onFullScreenStartEndFromRel Ver. 4.1.0+ Triggers when initializing the fullscreen from relative sized AJAX-ZOOM is done.
onFullScreenReady Ver. 3.2.0+ Triggers after fullscreen view is ready.
onFullScreenResizeEnd Ver. 3.2.0+ Triggers after window resize at fullscreen mode.
onFullScreenClose Ver. 3.2.0+ Triggers at the beginning of restore process from fullscreen to notmal mode.
onFullScreenCloseFromRel Ver. 4.0.4+ Triggers at the beginning of restore process from fullscreen to relative sized mode.
onFullScreenCloseEndFromRel Ver. 4.1.0+ Triggers at the end of restore process from fullscreen to relative sized mode.
onFullScreenCloseEnd Ver. 4.0+ Triggers at the end of restore process from fullscreen to normal mode.
onFullScreenSpaceAdded Ver. 4.1.9+ Triggers when extra space in fullscreen mode is created. See also fullScreenSpace
onFullGalShow Ver. 4.0+ Triggers when inline gallery is shows.
onStartSpin Ver. 4.0+ Triggers when 360 spinning starts by some option or API like jQuery.fn.axZm.spinTo.
onStopSpin Ver. 4.0+ Triggers when 360 spinning stops after beeing triggered by some option or API like jQuery.fn.axZm.spinTo.
onSliderZoom Ver. 3.2.0+ Triggers while zooming with the slider.
onZoomOutButtonStart Ver. 3.2.0+ Triggers when hitting the button for zoom out or using API method for this.
onZoomOutButtonEnd Ver. 3.2.0+ Triggers when hitting the button for zoom out or using API method for this.
onZoomInButtonStart Ver. 3.2.0+ Triggers when hitting the button for zoom in or using API method for this.
onZoomInButtonEnd Ver. 3.2.0+ Triggers when hitting the button for zoom in or using API method for this.
onMouseWheelZoomIn Ver. 3.2.0+ Triggers on zooming with the mouse(wheel).
onMouseWheelZoomOut Ver. 3.2.0+ Triggers on zooming with the mouse(wheel).
onButtonClickMove_N Ver. 3.2.0+ Triggers when panning (Top) with the buttons or using API method for this.
onButtonClickMove_E Ver. 3.2.0+ Triggers when panning (Right) with the buttons or using API method for this.
onButtonClickMove_S Ver. 3.2.0+ Triggers when panning (Bottom) with the buttons or using API method for this.
onButtonClickMove_W Ver. 3.2.0+ Triggers when panning (Left) with the buttons or using API method for this.
onSpinPreloadEnd Ver. 3.3.0 Patch: 2012-02-12 Triggers when all initial images for 360 or 3D are preloaded.
onMapMouseOverClick Ver. 3.3.0 Patch: 2012-02-13 Triggers on click when zoom map selector is dragged by mouseover.
onMapMouseOverDbClick Ver. 3.3.0 Patch: 2012-02-13 Triggers on double click when zoom map selector is dragged by mouseover .
onVertGalLoaded Ver. 4.0+ Triggers when vertical gallery is loaded.
onHorGalLoaded Ver. 4.0+ Triggers when horizontal gallery is loaded.
onFullGalLoaded Ver. 4.0.10+ Triggers when full gallery is loaded.
onHotspotsDragEnd Ver. 4.1.0+ Triggers after a hotspot has been dragged.
onImageProcessStart Ver. 4.1.3+ Triggers when image tiles || initial image || map image are starting to be generated on the fly.
onImageProcessEnd Ver. 4.1.3+ Triggers when image tiles || initial image || map image are done with generation on the fly.
onBeforePrevNext Ver. 4.1.3+ Triggers when any action for loading "next" or "prev" image from gallery is executed. This callback receives an array as argument defining if it is "next" or "prev" action, also the next gallery ID (from jQuery.axZm.zoomGA) which is going to be loaded without your intervention. If your custom function will return a different valid gallery ID or image name, then this image will be loaded!
JavaScript Methods
Several API methods are provided to make it easier to extend AJAX-ZOOM and to integrate it with other web application
 
jQuery.fn.axZm (options)
Description: The main initialization function. All other options are set in zoomConfig.inc.php file! Some can be set over the callbacks too.
Parameter: @param object options - custom callback functions
Example: See this example.
jQuery.fn.adjVertGallery(scrollToCurrent)
Description: Ver. 4.1.3+ Adjust the size of the vertical gallery and reinit JS scrolls; usefull if thumbnails are hidden and displayed again.
Parameter: @param bool scrollToCurrent - scroll to the active image thumb
Example: See this example.
jQuery.fn.adjFullGallery(scrollToCurrent)
Description: Ver. 4.1.3+ Adjust the size of the full gallery and reinit JS scrolls; usefull if thumbnails are hidden and displayed again.
Parameter: @param bool scrollToCurrent - scroll to the active image thumb
Example: See this example.
jQuery.fn.axZm.areaResize (event, area)
Description:Sets a visible image area selection.
Parameter: @param object event - Not implemented
@param object area - Selection coordinates, e.g. {x1: 168, y1: 178, x2: 261, y2: 240}
Example:
	<a href="#" onClick="jQuery.fn.axZm.areaResize(false,{x1: 168, y1: 178, x2: 261, y2: 240});">Set area</a>
	
jQuery.fn.axZm.areaDisable (effect)
Description:Removes a visible image area selection.
Parameter: @param bool effect - Adds a nice effect
Example:
	<a href="#" onClick="jQuery.fn.axZm.areaDisable(false);">Remove area</a>
	
jQuery.fn.axZm.areaRestart ()
Description:Restarts image area for tool selection.
jQuery.fn.axZm.citeAllInitialPic (opt)
Description: Ver. 4.1.0+ Preload all initial images (and in case enabled imageMap images) for 2d gallery || 360 || 3D which has not been already loaded but might be loaded by users action or otherwise.. in the current state this function will not trigger the generation of preview images or tiles (except for the first image of returned set). This behavior will be added later.
Parameter: @param object opt: object with parameters:
  • str: query string which would be passed to AJAX-ZOOM
  • step: optional function executed on each image preloading
  • clb: optional callback function
Example:
	jQuery.fn.axZm.citeAllInitialPic({
		str: 'example=spinAnd2D&3dDir=/pic/zoom3d/Uvex_Occhiali',
		clb: function(numImages){
			console.log('AZ has preloaded '+numImages+' images for 360')
		}
	});
	// could be used in /examples/example4.php
	jQuery.fn.axZm.citeAllInitialPic({
		str: 'example=8&zoomDir=/pic/zoom/animals',
		step: function(obj){
			console.log('Preloading: '+obj.file);
		},
		clb: function(obj){
			console.log('AZ has preloaded '+obj.numImages+' images for 2D animals gallery');
			jQuery.fn.axZm.citeAllInitialPic({
				str: 'example=8&zoomDir=/pic/zoom/fashion',
				clb: function(obj){
					console.log('AZ has preloaded '+obj.numImages+' images for 2D fashion gallery')
				}
			});
		}
	});
	
jQuery.fn.axZm.closeFullScreen ()
Description:Ver. 3.2.0+ Close fullscreen mode.
jQuery.fn.axZm.downloadImg (id, res)
Description: Ver. 3.3.0+ Patch: 2011-10-17 Download original image or image as JPG in certain resolution. See also the these config options.
Parameter: @param int|string id: inernal ID of the image or filename.
@param bool|string: certain resolution or false.
Example:
	<a href="#" onClick="jQuery.fn.axZm.downloadImg(test.png, '1024x768');">Download Image</a>
	
jQuery.fn.axZm.fillArea (opt)
Description: Ver. 4.0+ Zoom to fill the entire player area independent of proportions of the image or screen resolution. Could be triggered on some AJAX-ZOOM callback.
Parameter: @param object opt: optional object with some optional configurations:
  • speed: speed of the animation, default 0
  • speedZoomed: speed of the animation if already zoomed, default 0
  • callback: function when finished
Example:
	<a href="#" onClick="jQuery.fn.axZm.fillArea({callback: function(){alert('done')}});">Fill space</a>
	
jQuery.fn.axZm.fullGalHide ()
Description:Ver. 4.0+ Hide "Inline Gallery".
jQuery.fn.axZm.fullGalShow ()
Description:Ver. 4.0+ Show "Inline Gallery".
jQuery.fn.axZm.fullGalToggle ()
Description:Toggle "Inline Gallery".
jQuery.fn.axZm.getAllCallBackNames ()
Description:Ver. 4.1.0 - Returns an array with all possible callbacks
Example:
// Open Firebug (or whatever developer tool) and execute the following code in console
jQuery.ajax({ 
	type: 'GET', 
	dataType: 'script',
	// Make sure jquery.json plugin is loaded
	url: '../axZm/plugins/JSON/jquery.json-2.3.min.js', 
	complete: function(){
		// Assign to each callback console.log function with possibly passed parameter converted to string
		jQuery.each($.fn.axZm.getAllCallBackNames(), function(i, name){
			jQuery.axZm.userFunc[name] = function(info){
				console.log('AZ callback '+name+': '+jQuery.toJSON(info));
			}
		});			
	}, 
	cache: true
});
	
jQuery.fn.axZm.getBackColor (set, id, callback)
Description: Ver. 4.0+ experimental: retirieve background color of the image
Parameter: @param bool set: set the background color of the player according to the retrieved color
@param int id: id of the image, if not defined - current loaded image
@param function callback: callback function
Example:
	<a href="#" onClick="$.fn.axZm.getBackColor (true, false, function(rgbColor){alert(rgbColor)});">Get background color</a>
	
jQuery.fn.axZm.getCropValues (val)
Description: Ver. 4.1.9+ Translates coordinates from the canvas to values in respect to original image size; The firs argument can be an array with the four coordinates on the canvas [x1, y1, x2, y2] or object with the same keys. Returns a multidimensional array:
[0] - [x1, y1, x2, y2] input coordinates adjusted
[1] - [x1, y1, x2, y2] ouput coordinates in respect to original image size
[2] - integer, if 1 the input coordinates were not fully above the image
jQuery.fn.axZm.getCurrentZoom ()
Description:Ver. 4.0+ Returns x1, y1, x2, y2 coordinates of current zoom crop
jQuery.fn.axZm.getCurrentZoomLevel ()
Description:Ver. 4.0+ Returns current zoom level, 100 is when image is zoomed to the max.
jQuery.fn.axZm.getLastZoomInfo ()
Description:Ver. 4.0+ Returns js object with coordinates of last zooms.
jQuery.fn.axZm.getImagePath (id, key)
Description: Ver. 4.0 Returns image path of a thumb defined by key.
Parameter: @param int id: id of the image.
@param string key: possible values are 'full', 'vert', 'horz' and 'init'.
jQuery.fn.axZm.getImgPath ()
Description: Ver. 4.1.9+ returns folder and image name of the source image; (the folder does not need to be accessable by JS (over http) and the access can be restricted)
jQuery.fn.axZm.helpToggle (content)
Description: Ver. 4.1.9+ Toggle help layer.
Parameter: @param string content: any html or text.
jQuery.fn.axZm.helpShow (content)
Description: Ver. 4.1.9 Show help layer.
Parameter: @param string content: any html or text.
jQuery.fn.axZm.helpHide ()
Description: Ver. 4.1.9 Close help layer.
jQuery.fn.axZm.initFullScreen ()
Description:Ver. 3.2.0+ Start fullscreen mode.
jQuery.fn.axZm.installPath ()
Description:Ver. 4.0+ Tries to return the path of /axZm directory.
jQuery.fn.axZm.mNaviRebuild ()
Description:Ver. 4.1.9+ Rebuild "mNavi"; you can change $.axZm.mNavi object before doing this.
jQuery.fn.axZm.openFullScreen (path, parameter, callbacks, target, apiFullscreen, disableEsc)
Description: Open AJAX-ZOOM directly at fullscreen mode or fluid / responsive layout (see "target" parameter). Please note that jQuery core, /axZm/jquery.axZm.js and /axZm/axZm.css need to be in header or above script tag which executes jQuery.fn.axZm.openFullScreen(); if not above, then please trigger jQuery.fn.axZm.openFullScreen() within $(document).ready() or simmilar.
Parameter: @param string path: Absolute path to AJAX-ZOOM directory, e.g. '/axZm/'
@param string parameter: Query string to determin which images to load
@param object callbacks: JS object containing callback functions
@param string target: On default the target is browser window. You can optionally set some other container ID (e.g. "myAzResponsiveContainer") if needed.
@param bool apiFullscreen: Ver. 4.0+ if target is 'window', use browser fullscreen mode if available
@param bool disableEsc: Ver. 4.0.8+ prevent closing with Esc key.
@param bool postMode: Ver. 4.1.5+ set AJAX-ZOOM to use POST instead of GET (overwriting the same option set in zoomConfig.inc.php).
Example:
	<script type="text/javascript">
	var ajaxZoomCallbacks = {
		onFullScreenReady: function(){
			 alert('Fullscreen started');
		},
		onFullScreenClose: function(){
			 alert('Fullscreen closed');
		}
	};
	</script>
	
	<a href="#" onClick="jQuery.fn.axZm.openFullScreen('/axZm/', 'zoomID=1&zoomDir=1&example=2', ajaxZoomCallbacks);">Init AJAX-ZOOM</a>
	
See also: this example
Related: If you want to initialize AJAX-ZOOM in non responsive layout please use jQuery.fn.axZm.load
jQuery.fn.axZm.loadAjaxSet (query_string, callback, callbackEnd)
Description:Loads a different set of images into AJAX-ZOOM instance.
Parameter: @param string query_string: The query string to determin which images to load.
@param function callback: Ver. 4.1.0+ Optional callback function.
@param function callbackEnd: Ver. 4.1.0+ Optional callback function.
Example:
	<a href="#" onClick="jQuery.fn.axZm.loadAjaxSet ('zoomDir=some_dir&some_other_param=some_value');">Remove area</a>
	
For implementation also see this example
Related:jQuery.fn.axZm.zoomSwitch
jQuery.fn.axZm.load (options)
Description:Loads AJAX-ZOOM into a selectable container. Please note that jQuery core, /axZm/jquery.axZm.js and /axZm/axZm.css need to be in header or above script tag which executes jQuery.fn.axZm.load(); if not above, then please trigger jQuery.fn.axZm.load() within $(document).ready() or simmilar.
Parameter: @param object options
@option string options.path: Absolute path of AJAX-ZOOM, e.g. '/axZm/'
@option string options.parameter: Query string to determin which images to load (see jQuery.fn.axZm.loadAjaxSet)
@option string options.divID: Target ID of the container
@option object options.opt: Callback functions
@option bool options.postMode: Use POST mode instead of GET
Example:
	<a href="#" onClick="jQuery.fn.axZm.load({path: '/axZm/', parameter: 'zoomDir=high_res&example=13', opt: {onLoad: function(){alert('123')}}, divID: 'test'});">Load AJAX-ZOOM</a>
	
Related: If you want to initialize AJAX-ZOOM in a responsive layout please use jQuery.fn.axZm.openFullScreen
jQuery.fn.axZm.moveDir (dir)
Description:Ver. 3.2.0+ Move in certain direction
Parameter: @param dir: possible values ('N', 'E', 'S', 'W') - Top, Right, Bottom, Left
Example:
	<a href="#" onClick="jQuery.fn.axZm.moveDir('W')">Move left</a>
	
jQuery.fn.axZm.panTo (opt)
Description: Ver. 4.0+ Pan to x, y coordinates
Parameter: @param object opt: object with parameters:
  • x1: coordinates of x1
  • y1: coordinates of x2
Example:
	<a href="#" onClick="jQuery.fn.axZm.panTo({x1: 600, y1: 900});">Pan to x,y</a>
	
jQuery.fn.axZm.preloadAllInitialPic ()
Description:Ver. 4.0+ Preload all initial images of the gallery currently loaded. Normally initial image loads when it is selected from the gallery, by API function jQuery.fn.axZm.zoomSwitch (zoomID) or when diashow is runnig. For 360 / 3D all initial images are preloaded at the beginning. If you want to preload initial images for the gallery || 360 || 3D which is not loaded but might be loader by users action, you can do so with jQuery.fn.axZm.citeAllInitialPic()
jQuery.fn.axZm.preloadAllGalleryThumbs ()
Description:Ver. 4.0+ Preload all gallery thumbs. Normally thumbs are preloaded when gallery is shown first time.
jQuery.fn.axZm.reloadGallery (notScrollToCurrent)
Description:Ver. 4.0+ Reload thumbs in vertical gallery
jQuery.fn.axZm.reloadHorGallery (notScrollToCurrent)
Description:Ver. 4.0+ Reload thumbs in horizontal gallery
jQuery.fn.axZm.resizeStart (endTime)
Description: Ver. 4.0+ Prepare AJAX-ZOOM in responsive layouts to change it's size and redraw. Triggering this function twice before endTime is reached will result into clearing the previous resizeStart and endTime, which can be usefull to be done e.g. in the callback of an animation.
Parameter: @param int endTime: time after which AJAX-ZOOM redraws depending on the new size of it's parent container.
Example:
	<a href="#" onClick="jQuery.fn.axZm.resizeStart(1);">Redraw</a>
	
jQuery.fn.axZm.remove ()
Description:Completly removes AJAX-ZOOM
Example:
	<a href="#" onClick="jQuery.fn.axZm.remove();">Remove AJAX-ZOOM</a>
	
jQuery.fn.axZm.setDescr (fileName, extensiveDescr, thumbDescr)
Description: Ver. 3.2.2+ Set or remove the description of the thumbs in the gallery and the mouseover description
Parameter: @param string|int fileName: the name of the file (image), e.g. watch.jpg. Can also be the ID of the object containing all images, see $.axZm.zoomGA; if You have only one image the ID is probably 1
@param string|bool extensiveDescr: Long description for mouseover, if 'unset' will remove the description, false leave unchanged
@param string|bool thumbDescr: Description under the thumb, if 'unset' will remove the description, false leave unchanged
Example:
	<a href="#" onClick="jQuery.fn.axZm.setDescr('watch.jpg', 'Long description of the image', 'New Thumb Descr');">Set description 1</a>
	<a href="#" onClick="jQuery.fn.axZm.setDescr('watch.jpg', 'Long description of the image', false);">Set description 2</a>
	<a href="#" onClick="jQuery.fn.axZm.setDescr('watch.jpg', 'unset', 'unset');">Set description 3</a>
	<a href="#" onClick="jQuery.fn.axZm.setDescr(1, false, 'New Thumb Descr');">Set description 4</a>
	
jQuery.fn.axZm.spinBy (x, z, callback)
Description: Ver. 4.0+ Spin to any direction by a number of frames.
Parameter: @param int x: number frames 360 (for 360 and 3D).
@param int z: number frames Z Axis (only for 3D).
@param function callback: Callback function.
Example:
	<a href="#" onClick="jQuery.fn.axZm.spinBy(-2, 0, false);">Spin by -2</a>
	
jQuery.fn.axZm.spinStart (rounds, roundTime, mouseOverStop, opposit, callback)
Description: Start spinning 360 object.
Parameter: @param int rounds: number of rounds the object will be spinning.
@param int roundTime: time in ms for one round.
@param bool mouseOverStop: stop spinning when mouse is over the image.
@param bool oposit: Ver. 4.1.9+ spin in opposit direction as it would turn normally.
@param function callback: Ver. 4.1.9+ optional callback function.
Example:
	<a href="#" onClick="jQuery.fn.axZm.spinStart(2, 1500, false, false, function(){jQuery.fn.axZm.spinStart(1,1500,false, true)});">Start spin</a>
	
jQuery.fn.axZm.spinStop ()
Description: Stop spinning 360 object.
Example:
	<a href="#" onClick="jQuery.fn.axZm.spinStop();">Stop spin</a>
	
jQuery.fn.axZm.spinPlayToggle ()
Description: Ver. 4.1.11+ Toggles spin / pause.
Example:
	<a href="#" onClick="jQuery.fn.axZm.spinPlayToggle();">Play / Pause</a>
	
jQuery.fn.axZm.spinTo (frame_number, speed, easing, callback, zoomTo)
Description:Spin 360 degree object to a particular frame number. Ver. 4.0+ extended to spin within any frame in 3D object.
Parameter: @param int frame_number: frame number (ID) of the sequence. Ver. 4.0+ frame_number can be ID or image name of the frame.
@param int speed: time in ms for the process or 'auto', which will set the speed relative to spinDemoTime and number of frames which need to be spined (recommended); Ver. 4.1.9+ if speed is a number passed as string, this number will override spinDemoTime and speed defaults to 'auto'
@param string easing: easing, e.g. 'swing', default - spinToMotion
@param function callback: Ver. 4.0+ callback function
@param object zoomTo: Ver. 4.1.9+ spin and zoom at the same time; zoomTo is a js object accepting the same key, values as $.fn.axZm.zoomTo whereby some of the values like speed might be overwritten within spinTo;
Example:
	<a href="#" onClick="jQuery.fn.axZm.spinTo(5, 'auto', 'easeOutCubic', function(){jQuery.fn.axZm.zoomTo({zoomLevel: '75%'})});">Spin to 5th frame and zoom to 75% after it </a>
	
jQuery.fn.axZm.spinInit ()
Description:Ver. 3.2.2+ Starts preloading 360 degree images, useful if firstMod is not set to 'spin' where spinInit triggers instantly. Can be triggered with the onLoad callback.
jQuery.fn.axZm.startPlay ()
Description:Ver. 4.0+ Start diashow
jQuery.fn.axZm.switchCrop ()
Description: Select the zooming tool crop, left click triggers zoom in, right click zoom out, mousewheel zoom in / out
Example:
	<a href="#" onClick="jQuery.fn.axZm.switchCrop();">Switch to crop mode</a>
	
jQuery.fn.axZm.switchPan ()
Description: Select the zooming tool pan, left click triggers zoom in, right click zoom out, mousewheel zoom in / out
Example:
	<a href="#" onClick="jQuery.fn.axZm.switchPan();">Switch to pan mode</a>
	
jQuery.fn.axZm.switchSpin ()
Description: Select the spin mode, click triggers spinning some rounds, mousewheel zoom in / out
Example:
	<a href="#" onClick="jQuery.fn.axZm.switchSpin();">Switch to spin mode</a>
	
jQuery.fn.axZm.tapHide (excludeArray)
Description: Ver. 4.0.8+ Hide everything what has been added to the layer with the ID "zoomLayer" like navigation elements, zoomMap or an user defined objects. Returns an array with IDs of the elements which has been hidden.
Parameter: @param array excludeArray - array with IDs of the ellements which should not be hidden
Example:
	<a href="#" onClick="jQuery.fn.axZm.tapHide(['zoomCornerFsc']);">Hide overlays</a>
	
jQuery.fn.axZm.tapShow ()
Description: Ver. 4.0.8+ Show overlay elements which have been hidden by jQuery.fn.axZm.tapHide
Example:
	<a href="#" onClick="jQuery.fn.axZm.tapShow();">Show overlays</a>
	
jQuery.fn.axZm.tapToggle (excludeArray)
Description: Ver. 4.0.8+ Toggle overlay elements, see jQuery.fn.axZm.tapHide and jQuery.fn.axZm.tapShow;
Parameter: @param array excludeArray - array with IDs of the ellements which should not be hidden
Example:
	<a href="#" onClick="jQuery.fn.axZm.tapToggle(['zoomCornerFsc']);">Toggle overlays</a>
	
jQuery.fn.axZm.zoomAlert (text, title, subtitle, autoRemove)
Description: Modal dialog method which is used by AJAX-ZOOM to display errors or other notifications. It uses the jQuery facebox plugin. Defaults to simple alert if facebox is not loaded. Overwrite this method if You do not like facebox.
Parameter: @param string text - Text of the message
@param string title - Title of the message
@param string subtitle - Subtitle of the message
@param bool autoRemove - If set to true, the box will be instantly removed and new one appears. Otherwise text information will be appended to the existing box
Example:
	<a href="javascript: void(0)" onClick="jQuery.fn.axZm.zoomAlert('Text text', 'Attention', '---');">Alert</a>
	
jQuery.fn.axZm.zoomIn (options)
Description:Triggers zoom in.
Parameter: @param object options
@option string motion: Transitiont type, e.g. 'swing'
@option int speed: Duration in ms, e.g. 1000
@option int pZoom: Percentage of zoom in, e.g. 125
@option int ajxTo: Time in ms after which ajax call is triggered, e.g. 750
@option bool stepZoom: Ver. 4.0+ if true, AJAX-ZOOM will zoom to the next "native level", like 12,5%, 25%, 50% or 100%
Example:
	<a href="javascript: void(0)" onClick="jQuery.fn.axZm.zoomIn({motion: 'swing', speed: 1000, pZoom: 125});">Zoom in</a>
	
jQuery.fn.axZm.zoomOut (options)
Description:Triggers zoom out.
Parameter: @param object options
@option string motion: Transitiont type, e.g. 'swing'
@option int speed: Duration in ms, e.g. 1000
@option int pZoom: Percentage of zoom out, e.g. 125
@option int ajxTo: Time in ms after which ajax call is triggered, e.g. 750
@option bool stepZoom: Ver. 4.0+ if true, AJAX-ZOOM will zoom to the next "native level", like 12,5%, 25%, 50% or 100%
Example:
	<a href="javascript: void(0)" onClick="jQuery.fn.axZm.zoomOut({motion: 'swing', speed: 1000, pZoom: 125});">Zoom out</a>
	
jQuery.fn.axZm.zoomReset(options, callback)
Description:Reset the view to initial state.
Parameter: @param object options
@option int speed: Ver. 4.1.7+ animation speed
@option bool enforce: break all animations to enforce restoring

@param function callback: optional callback function
Example:
	<a href="javascript: void(0)" onClick="jQuery.fn.axZm.zoomReset();">Reset</a>
	
jQuery.fn.axZm.zoomPrevNext (dir, galleryFadeInAnm, once, callback)
Description:Switch to next or prev image in the gallery.
Parameter: @param string dir: Direction - 'prev' or 'next'
@param string galleryFadeInAnm: Ver. 4.0+ image switching type, possible values see galleryFadeInAnm
@param bool once: Ver. 4.0+ if true switching will not try to repeat until switching is possible
@param function callback: Ver. 4.0+ callback function
Example:
	<a href="#" onClick="jQuery.fn.axZm.zoomPrevNext('prev', 'SwipeHorz')">Prev</a> 
	<a href="#" onClick="jQuery.fn.axZm.zoomPrevNext('next' 'SwipeHorz')">Next</a>
	
For implementation see also this example
jQuery.fn.axZm.zoomSwitch (zoomID, galleryFadeInAnm, once, callback, callback1)
Description:Switch to a specified image contained in the gallery. If the image is zoomed it will be restored with this duration: zoomMapSwitchSpeed
Parameter: @param mixed zoomID - The ID (key) of the $pic_list_array, see defining the images. zoomID can also be the filename contained in the gallery!
@param string galleryFadeInAnm: Ver. 4.0+ image switching type, possible values see galleryFadeInAnm
@param bool once: Ver. 4.0+ if true switching will not try to repeat until switching is possible
@param function callback: Ver. 4.0+ callback function fired on switching
@param function callback1: Ver. 4.1.0+ callback function fired at the end of switching
Example:
	<a href="#" onClick="jQuery.fn.axZm.zoomSwitch(1234);">Image 123</a>
<a href="#" onClick="jQuery.fn.axZm.zoomSwitch('test.jpg');">Image test.jpg</a>
For implementation see alsothis example
jQuery.fn.axZm.zoomSwitchQuick (zoomID, callback)
Description: Ver. 4.0.10+ switch to a different image in the 2D gallery at zoomed state without reseting to initial view, provided that both images have exactly the same sizes (width and height)
Parameter: @param mixed zoomID - The ID (key) of the $pic_list_array, see defining the images. zoomID can also be the filename contained in the gallery!
@param function callback: any callback function
Example:
	<a href="#" onClick="jQuery.fn.axZm.zoomSwitchQuick(1234);">Image 123</a>
<a href="#" onClick="jQuery.fn.axZm.zoomSwitchQuick('test.jpg');">Image test.jpg</a>
jQuery.fn.axZm.zoomTo (options)
Description:Zoom to a predefined image area or Ver. 4.0+ coordinates, zoomLevel etc. In Ver. 4.0+ this Api method has been completely rewritten and bugfixed!
Parameter: @param object options
@option int|string x1: Top-Left x coordinate or percentage, e.g. '55%'
@option int|string y1: Top-Left y coordinate or percentage, e.g. '75%'
@option int x2: Bottom-Right x coordinate of the area, Ver. 4.0+ not necessary to pass
@option int y2: Bottom-Right y coordinate of the area, Ver. 4.0+ not necessary to pass
@option string zoomLevel: Ver. 4.0+ desired zoom level
@option string motion: Motion type for zoom to the specified area, default: zoomEaseCrop
@option string motionZoomed: Motion type for zoom to the specified area, if the image is already zoomed, default: zoomEaseCrop
@option int speed: Speed of the motion to the specified area, default: cropSpeed
@option int speedZoomed: Speed of the motion to the specified area on already zoomed image, default: cropSpeed
@option bool initial: Instead of passing the real x1, y1, x2 and y2 coordinates, it is possible to pass the coordinates in the initial image. Then set this option to true, default false.
@option function callback: Ver. 4.0+ callback function
Example:
	<a href="#" onClick="jQuery.fn.axZm.zoomTo({x1: 2584, y1: 1650, x2: 3424, y2: 2210, motion: 'easeOutBack', motionZoomed: 'easeOutSine', speed: 1500, speedZoomed: 750}); return false;">Some interesting thing</a>
	
Ver. 4.0+
	<a href="#" onClick="jQuery.fn.axZm.zoomTo({x1: 2584, y1: 1650, zoomLevel: '55%'}); return false;">Some other interesting thing</a>
	
	<a href="#" onClick="jQuery.fn.axZm.zoomTo({zoomLevel: '35%'}); return false;">Zoom to 35%</a>
	
	<a href="#" onClick="jQuery.fn.axZm.zoomTo({x1: '35.7%', y1: '56.5%', zoomLevel: '50%'}); return false;">Show some coordinates and zoom to 55%</a>
	
For implementation see this extensive example.
Related vars: jQuery.axZm.lastZoom - object, containing coordinates (x1..y2) of current zoomed area related to the original image.

jQuery.axZm.lastSel - object, containing coordinates (x1..y2) of current zoomed area related to area selection on initial image.

jQuery.axZm.returnedImage - temporary filename of the cropped image with coordinates of jQuery.axZm.lastZoom, located in temp folder. It can be processed with PHP to generate a small thumb and save it for an application.

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

Custom JavaScript function:
	function getZoomParam(form){
		if (jQuery.axZm){
			var fields = ['x1', 'y1', 'x2', 'y2'];
			if (jQuery.axZm.lastZoom){
				jQuery.each(jQuery.axZm.lastZoom, function(k, v){
					jQuery('#'+form+' input[name=z_'+k+']').val(Math.round(v));
				}); 
			}
			if (jQuery.axZm.lastSel){
				jQuery.each(jQuery.axZm.lastSel, function(k, v){
					jQuery('#'+form+' input[name=s_'+k+']').val(Math.round(v));
				}); 
			}
		}
	}
	
HTML:
	<FORM id='parametersF' onSubmit="return false">
	<table cellspacing='2' cellpadding='2'><tbody>
	<tr>
		<td width='100'>Original image:</td>
		<td width='80'>x1: <input type='text' name='z_x1'></td>
		<td width='80'>y1: <input type='text' name='z_y1'></td>
		<td width='80'>x2: <input type='text' name='z_x2'></td>
		<td width='80'>y2: <input type='text' name='z_y2'></td>
	</tr>
	<tr>
		<td>Initial image:</td>
		<td width='80'>x1: <input type='text' name='s_x1'></td>
		<td width='80'>y1: <input type='text' name='s_y1'></td>
		<td width='80'>x2: <input type='text' name='s_x2'></td>
		<td width='80'>y2: <input type='text' name='s_y2'></td>
	</tr>
	<tr>
		<td colspan='5'>
		<input type='button' value='GET parameters' onClick="getZoomParam(this.form.id);">
		</td>
	</tr>
	</tbody></table>
	</FORM>
	
JavaScript hotspots methods
Ver. 4.0+ some methods to handle hotspots on 2D, 360 and 3D
 
jQuery.fn.axZm.createNewHotspot (param)
Description: Ver. 4.0.9+ Create new hotspot on the fly.
Parameter: @param object param: object containing all needed parameters for new hotspot
@param string param.name: name of the hotspot. Should not contain white spaces, default: random string
@param bool param.draggable: set hotspots to be draggable / resizeable after creation, default: false
@param bool param.noRightClickRemove: Ver. 4.0.10+ if param.draggable is true right click on the hotspot will result in disabling this hotspot. Disabling a particular hotspot at some frame is very useful for the visual hotspot configurator but might be not for some other product configurator applications. Set param.noRightClickRemove to true if you do not want right click removal. @param bool param.autoTitle: will set "altTitle" instantly depending on param.name, default: true
@param bool param.autoPos: autoset positions at all frames / images, default: false
@param function param.callback: Ver. 4.0.10+ any callback funciton applied with 100ms timeout
@param bool param.noInit: by setting this option to true this API function will update the jQuery.axZm.hotspots object but will not render / rerender them; this can be done manually with jQuery.fn.axZm.initHotspots; usefull if you want to create many hotspots on the fly in a loop and render all at once after creation, default: false
@param object param.posObj: object containing coordinates of the hotspot. Because the same hotspot can be present at more than one frame the input of the file name or ID is mandatory, see example below.
@param object param.settings: a hotspot can be configured with a variety of other settings. This list of possible settings can be extended with new releases. You can put any settings into this object except "name" and "position" as they are set in this API by param.name and param.posObj (see above); You can also investigate the defaults of the settings object with this API: jQuery.fn.axZm.getHotspotDefaults;
Example:
	// Create a spot
	var posObject = {};
	posObject['myFileName_1.jpg'] = {left: 500, top: 400};
	posObject['myFileName_3.jpg'] = {left: 400, top: 300};
	
	jQuery.fn.axZm.createNewHotspot({
		name: 'myHotSpotName', // can be whatever
		autoPos: false, // autoset positions at all frames / images
		draggable: false, // set hotspots to be draggable / resizeable
		noInit: false, // init hotspots or not
		autoTitle: true, // set "alt" title for the hotspot instantly
		posObj: posObject, // position object of the hotspot
		settings: {
			shape: 'point',
			altTitle: 'Some interesting Detail',
			click: function(){
				alert('Test')
			}
		}
	});
	
	// Create rectangle area as hotspot
	var posObject = {};
	posObject['myFileName_1.jpg'] = {left: 500, top: 400, width: 200, height: 50};
	
	jQuery.fn.axZm.createNewHotspot({
		name: 'myHotSpotName',  
		autoPos: false,  
		draggable: false, 
		noInit: false, 
		autoTitle: true, 
		posObj: posObject, 
		settings: {
			shape: 'rect'
		}
	});
	
Notes: If you want to create new hotspots by clicking directly on the image, then put this function along with your logic into onZoomInClickStart callback. Important is that onZoomInClickStart callback needs to return false at the end, otherwise zooming will take place and this is not what you want.
	$.axZm.userFunc.onZoomInClickStart = function(info){
		// info.viewport contains coordinates you need for the creation of the hotspot at the position where it has been clicked
		var posObject = {};
		
		posObject[$.axZm.zoomGA[$.axZm.zoomID]['img']] = {
			left: info.viewport.x, 
			top: info.viewport.y
		};
		
		// Then see above jQuery.fn.axZm.createNewHotspot
		
		
		return false; // important!!!
	}
	
jQuery.fn.axZm.deleteHotspot (name)
Description: Ver. 4.0+ Delete / remove hotspot
Parameter: @param string name: name of the hotspot
Example:
	<a href="#" onClick="jQuery.fn.axZm.deleteHotspot('abc')">Remove hotspot</a> 
	
jQuery.fn.axZm.initHotspots (hSpot, callback)
Description: Ver. 4.0+ Init / rebuild hotspots
Parameter: @param object hSpot: optional object replacing jQuery.axZm.hotspots
@param function callback: Ver. 4.0.10+ optional callback function
Example:
	<a href="#" onClick="jQuery.fn.axZm.initHotspots()">Init hotspots</a> 
	
jQuery.fn.axZm.getHotspotDefaults ()
Description: Ver. 4.0+ Returns all hostpot configuration options as js object
Example:
	<a href="#" onClick="console.log(jQuery.fn.axZm.getHotspotDefaults());">Get hotspot defaults</a> 
	
jQuery.fn.axZm.setHotspotDefaults (obj)
Description: Ver. 4.0.6+ Set hotspot default before initializing hotspots. Might be useful if you have many hotspots with settings different from defaults.
Parameter: @param object obj: object with parameter (see jQuery.fn.axZmgetHotspotDefaults).
Example:
	<a href="#" onClick="console.log(jQuery.fn.axZm.setHotspotDefaults({"hotspotImage": "hotspot64_blue.png"}));">Change defaults</a> 
	
jQuery.fn.axZm.getHotspotObj (withDefaults, stringifyFunctions, imgNames)
Description: Ver. 4.0+ Returns hostpot object that can be saved as JSON
Parameter: @param bool withDefaults: if true defaults are returned too. Useful for editing.
@param bool stringifyFunctions: if true functions are stringified. Useful to be saved as JSON.
@param bool imgNames: return positions object with specific image names (and not ID's)
Example:
	<textarea id="axzmhotspotsobj"></textarea>
	<a href="#" onClick="$('#axzmhotspotsobj').html($.toJSON(jQuery.fn.axZm.getHotspotObj(true, true, true)));">Get hotspots</a> 
	
jQuery.fn.axZm.getHotspotPositions (name, imgNames)
Description: Ver. 4.0+ Returns only positions object of a specific hotspot
Parameter: @param bool imgNames: return positions object with specific image names (and not ID's)
Example:
	<textarea id="axzmhotspotsobj"></textarea>
	<a href="#" onClick="$('#axzmhotspotsobj').html($.toJSON(jQuery.fn.axZm.getHotspotPositions('abc', true)));">Get hotspots positions</a> 
	
jQuery.fn.axZm.getHotspotPosition (name, frame)
Description: Ver. 4.0+ Returns position object of a specific hotspot and frame
Parameter: @param string name: hotspot name
@param string frame: optional - id or filename
Example:
	
	<a href="#" onClick="console.log(jQuery.fn.axZm.getHotspotPosition('abc'))">Get hotspot abc position</a> 
	
jQuery.fn.axZm.hideHotspotLayer ()
Description: Ver. 4.0+ Hide hotspots
Example:
	<a href="#" onClick="jQuery.fn.axZm.hideHotspotLayer()">Hide hotspots</a> 
	
jQuery.fn.axZm.hotspotsDraggable (destroy, noRightClickRemove)
Description: Ver. 4.0+ Make hotspots dragable. Please note that the hotspots configuration object ($.axZm.hotspots) is updated with new positions!
Parameter: @param bool destroy: if true - destroy draggable
@param bool noRightClickRemove: Ver. 4.0.10+ if true right click will not disable the hotspot at a particular frame
Example:
	<a href="#" onClick="jQuery.fn.axZm.hotspotsDraggable()">Dragable hotspots</a> 
	
jQuery.fn.axZm.modifyHotspotPosition (name, frame, pos, set)
Description: Ver. 4.1.9+ Modifies position and or dimensions of the already present hotspot.
Parameter: @param string name: name of the hotspot
@param string / integer frame: frame number or file name
@param object pos: new position (left, top, [width, height])
@param bool set: physically set new position if frame number corresponds to current frame ($.axZm.zoomID)
Example:
	<a href="#" onClick="jQuery.fn.axZm.modifyHotspotPosition('myHotspot', 5, {left: 300, top: 500}, true)">Change position</a> 
	
jQuery.fn.axZm.loadHotspotsFromJsFile (url, cache, callback)
Description: Ver. 4.0+ Load hotspots from a js file and init hotspots after. Please note that this is a js file defining $.axZm.hotspots and it is not a valid JSON...
Parameter: @param string url: url to the js file with hotspots definition
@param bool cache: cache or not
@param function callback: optional callback function
Example:
	<a href="#" onClick="jQuery.fn.axZm.loadHotspotsFromJsFile('../pic/hotspotJS/bike.js', false, function(){alert('loaded')})">Load hotspots</a> 
	
jQuery.fn.axZm.removeAllHotspots (callback)
Description: Ver. 4.0.5+ Simply remove and delete all hotspots.
Parameter: @param function callback: Ver. 4.1.0+ optional callback function
Example:
	<a href="#" onClick="jQuery.fn.axZm.removeAllHotspots()">Delete all hotspots</a> 
	
jQuery.fn.axZm.switchHotspot(name, action)
Description: Ver. 4.0.5+ Temporarily enable or disable certain hotspots. A disabled hotspot is not visible but can be made visible any time after.
Parameter: @param mixed name: if string - name of the hotspot, if array any number of names
@param string action: 'enable', 'disable' or 'toggle'
Example:
	<a href="#" onClick="jQuery.fn.axZm.switchHotspot(['abc1', 'abc2', 'abc3'], 'disable'); jQuery.fn.axZm.switchHotspot(['abc4', 'abc5'], 'enable');">Disable three hotspots and enable two others</a> 
	
jQuery.fn.axZm.zoomToHotspot (name, settings)
Description: Ver. 4.0.6+ Find a hotpot with particular name in 360 or 2D gallery and optionally zoom into it.
Parameter: @param mixed name: if string - name of the hotspot
@param object settings: optional... keys:
  • zoomID (integer): define a specific frame number for 360/3D or page for 2D, as same hotspot can be placed at several frames or pages. Will be found instantly if not defined.
  • zoomLevel (string): specify the desired zoom level, will be determined instantly if not specified.
  • zoomToRect (integer): if specified and the hotspot is of type rect, zoom level will be deternined instantly depending on hotspots size. The hotspot will be visible as a whole with the margin determinded by this parameter.
  • switchQuick (bool): Ver. 4.0.10+ activating this option on 2D gallery (not 360 spin) will result into not zooming out, switching to new image and then zoom to hotspot, but switching to the new image directly in zoomed state. Provided that the original image dimensions (width and height) are exactly the same
  • speed (integer): speed in ms
  • speedZoomed (integer): speed in ms when the image is already zoomed
  • easing (integer): easing type, e.g. "easeOutElastic"
  • findMiddle (bool): Ver. 4.1.8+ if hotspots are positioned at 360 or 3D, enabling this parameter will spin not to the first found hotspot frame but find a frame which is in the middle of frame series; e.g. if you have a globe and marked some town on it, enabling findMiddle will instantly spin to a best visible frame.
  • spinAndZoom (bool): Ver. 4.1.9+ if hotspots are positioned at 360 or 3D and a zoom or pan action needs to take place, then enabling this option will spin and zoom and the same time.
Example:
	<a href="#" onClick="jQuery.fn.axZm.zoomToHotspot('myHotspot', {zoomID: 5, zoomLevel: '75%'});">Find hotspot myHotspot and zoom to 75%</a> 
	
jQuery.fn.axZm.toggleHotspotFrame (name, action, frame)
Description: Ver. 4.0+ Remove or enable hotspot on a particular frame, usefull for 360 and 3D as there are many frames there. Please note that when hotspot is disabled in a particular frame it's position is removed.
Parameter: @param string name: name of the hotspot
@param string action: 'enable' or 'disable'
@param string|int frame: id or filename
Example:
	<a href="#" onClick="jQuery.fn.axZm.toggleHotspotFrame('abc', 'enable', jQuery.axZm.zoomID)">Enable hotspot at current frame</a> 
	
jQuery.fn.axZm.showHotspotLayer ()
Description: Ver. 4.0+ Show hotspots
Example:
	<a href="#" onClick="jQuery.fn.axZm.showHotspotLayer()">Show hotspots</a> 
	
jQuery.fn.axZm.toggleHotspotLayer ()
Description: Ver. 4.0+ Toggle hotspots
Example:
	<a href="#" onClick="jQuery.fn.toggleHotspotLayer()">Toggle hotspots</a> 
	
JavaScript hotspots options
Ver. 4.0+ Create 2D/ 360°/ 3D product presentations with clickable hotspots. The following parameters describe $.axZm.hotspots javascript object and are loaded over separate file, see e.g. /examples/example33.php or over $.fn.axZm.createNewHotspot API
ValueDefaultDescription
shape'point'Shape of the hotspot. Possible values "point" or "rect", added Ver. 4.0.5; Type: bool
enabledtrueState of defined hotspot. Possible values true and false, added Ver. 4.0.5; Type: bool
width32Width of the hotspot image, only applied if shape value is "point". Type: integer
height32Height of the hotspot image, only applied if shape value is "point". Type: integer
gravity'center'Hotspot gravity relative to its position. Possible values: 'center', 'topLeft', 'top', 'topRight', 'right', 'bottomRight', 'bottom', 'bottomLeft', 'left'. Only applied if shape value is "point". Type: string
offsetX0Adjustment of hotspots horizontal visual position. Only applied if shape value is "point". Type: integer
offsetY0Adjustment of hotspots vertical visual position. Only applied if shape value is "point". Type: integer
padding0Padding of the box with hotspot image and/or text. Type: integer
opacity1Default opacity, disabled in IE < 9; Type: float <= 1.0
opacityOnHover1Opacity on mouse hover, disabled in IE < 9; Type: float <= 1.0
backColor'none'Background color, added Ver. 4.0.5; Type: string
zIndex1zIndex of the hotspot. Type: integer
borderWidth0CSS border width, added Ver. 4.0.5; Type: integer
borderColor'red'CSS border color, added Ver. 4.0.5; Type: string
borderStyle'solid'CSS border style, e.g. 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset' or combinations of them, added Ver. 4.0.5; Type: string
cursor'pointer'Mouse cursor. Type: string
zoomRangeMin0Min zoom level for hotspot to be shown, added Ver. 4.0.6; Type: 0 <= integer <= 100
zoomRangeMax100Max zoom level for hotspot to be shown, added Ver. 4.0.6; Type: 0 <= integer <= 100
hotspotImage'hotspot64_green.png'PNG image for the hotspot located in /axZm/icons directory, only applied if shape value is "point". Ver. 4.0.6+ image can be any absolute path with and without http. Type: string
hotspotImageOnHoverfalsePNG image for the hotspot on mouse hover, only applied if shape value is "point". Ver. 4.0.6+ image can be any absolute path with and without http. Type: string
hotspotTextfalseText puten direct over the hotspot image, can be for example a number if shape value is point; can be also HTML. Type: false or string
hotspotTextFillfalseIf shape value is "rect" the rectange does not capture mouse events like click. Setting this value to true will set the inner box to 100% height capturing all events except mousescroll for zooming. Any css can be overriden with hotspotTextCss option, see below, added Ver. 4.0.5; Type: bool
hotspotTextClassfalseAdditionally to CSS class ".axZmHotspotText" add on ther CSS class to hotspotText layer, added Ver. 4.0.5; Type: false or string
hotspotTextCss{}Additionally to CSS class ".axZmHotspotText" css which is added to hotspotText layer, added Ver. 4.0.5; Type: object
hotspotObjects{}Any number of absolutely positioned layers directly inside the hotspot if shape value is "rect", added Ver. 4.0.5; Type: object
altTitlefalseShow system like tootip by mousehover if main tooltip is triggered on click (toolTipEvent); CSS class: axZmHoverTooltip; Type: false or string
altTitleClassfalseCSS class for altTitle instead of axZmHoverTooltip class, added Ver. 4.0.6; Type: false or string
altTitleAdjustX20Horizontal offset of the altTitle, added Ver. 4.0.6; Type: integer
altTitleAdjustY20Vertical offset of the altTitle, added Ver. 4.0.6; Type: integer
labelTitlefalseSticky label (or tooltip) at any position near a hotspot, accepts HTML, added Ver. 4.0.6; Type: string
labelGravity'left'Label gravity, possible values: 'topLeft', 'topLeftFlag1', 'topLeftFlag2', 'top', 'topRight', 'topRightFlag1', 'topRightFlag2', 'right', 'rightTopFlag1', 'rightTopFlag2', 'rightBottomFlag1', 'rightBottomFlag2', 'bottomRight', 'bottomRightFlag1', 'bottomRightFlag2', 'bottom', 'bottomLeft', 'bottomLeftFlag1', 'bottomLeftFlag2', 'left', 'leftTopFlag1', 'leftTopFlag2', 'leftBottomFlag1', 'leftBottomFlag2', 'center', added Ver. 4.0.6; Type: string
labelBaseOffset5Auto offset in all directions, added Ver. 4.0.6; Type: integer
labelOffsetX0Horizontal offset, added Ver. 4.0.6; Type: integer
labelOffsetY0Vertical offset, added Ver. 4.0.6; Type: integer
labelClassfalseCSS class instead of axZmHotspotLabel, added 4.0.6; Type: false or integer
labelOpacity1Opacity level, added 4.0.6; Type: float <= 1.0
toolTipTitlefalseTitle shown in the tooltip; Type: false or string
toolTipHtmlfalseText or html inside tooltip, as idea it can be also iframe, e.g. <iframe src="http://www.ebay.de" scrolling="no" width="100%" height="100%" frameborder="0"></iframe> Type: false or string
toolTipAjaxUrlfalseUrl for toolTipHtml get from AJAX request (not cross site, for cross site use an iframe inside toolTipHtml); Type: false or string
toolTipWidth250Width of the tooltip, ignored when toolTipGravity is set to fullsize or fullscreen! Type: integer
toolTipHeight120Min height of the tooltip, ignored when toolTipGravity is set to fullsize or fullscreen! Type: integer
toolTipGravity'hover'Tooltip gravity, possible values: 'hover', 'fullsize', 'fullscreen' (added Ver. 4.0.6), 'topLeft', 'top', 'topRight', 'right', 'bottomRight', 'bottom', 'bottomLeft', 'left'. The difference between 'fullsize' and 'fullscreen' is that 'fullsize' refers to players dimensions, whereas 'fullscreen' to window size. Type: string
toolTipGravFixedfalseApplies fixed position to toolTipGravity except 'fullsize', 'hover' turns into centered position. Type: bool
toolTipFullSizeOffset40toolTipGravity fullsize uses maximal available player / window width and height. This is the margin to the edges if e.g. toolTipGravity is 'fullscreen', 'fullsize' or toolTipGravFixed option is set to true, so the fixed position is relative to the player size. Type: integer
toolTipTitleCustomClassfalseUse specific classname instead of axZmToolTipTitle, added Ver. 4.0.5; Type: false or string
toolTipCustomClassfalseUse specific classname instead of axZmToolTipInner. Type: false or string
toolTipAdjustX10Horizontal offset. Type: integer
toolTipAdjustY10Vertical offset; Type: integer
toolTipAutoFliptrueFlip tooltip horizontaly / vertically depending on best fit. Type: bool
toolTipOpacity1.0Opacity of the tooltip. Type: float <= 1.0
toolTipFadefalseFade tooltip time in ms. Type: false or integer
toolTipEvent'click''mouseover' or 'click', defaults to 'click' on touch devices. Type: string
toolTipHideTimout1000If toolTipEvent is 'mouseover' this setting allows to move the cursor to the tooltip within this time. Type: integer
toolTipDraggabletrueSet tooltip to be draggable, toolTipTitle has to be defined because this is the handle, can be an empty div. Type: bool
toolTipCloseIcon'fancy_closebox.png'PNG image for close button located in /axZm/icons directory. Shown if toolTipEvent is 'click' and touch devices. Ver. 4.0.6 can be absolute image path, also with http; Type: string
toolTipCloseIconPosition'topRight'Position of the close icon, possible values are: 'topLeft', 'topRight', 'bottomRight' and 'bottomLeft', added Ver. 4.0.5; Type: string
toolTipCloseIconOffsetfalseOffset / position of the close button icon. If false the offset is set instantly. An integer sets depending on toolTipCloseIconPosition - top, bottom or left, right position to this number. If object, e.g. {"right": 20, "top": 0} toolTipCloseIconPosition is ignored. Changed in Ver. 4.0.5; Type: false, integer or object
toolTipCloseIconMouseOverfalseShow close button also if toolTipEvent is 'mouseover'. Type: bool
toolTipOverlayShowfalseShow overlay when tooltip window pops up, added Ver. 4.0.5; Type: bool
toolTipOverlayOpacity0.75Overlay opacity, added Ver. 4.0.5; Type: float <= 1
toolTipOverlayColor'#000000'Overlay color, added Ver. 4.0.5; Type: integer
toolTipOverlayClickClosefalseClose tooltip by clicking on the overlay, added Ver. 4.0.5; Type: bool
hreffalseSimple link for the hotspot.
hrefTarget'_blank'Target for href (simple link), possible values: _blank (new window), anything else is same window. Type: string
clicknullYour custom click event function, e.g. simple fancybox gallery:
					
$.fancybox([
{
'href': 'http://www.domain.com/your/image1.jpg',
'title': 'Description of the first image'
},
{
'href': '/path/to/an/other/image2.jpg',
'title': 'Description of the second image'
},	
], {
'padding': 0,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'image',
'titlePosition': 'over',
'changeFade': 0
});
AJAX-ZOOM does not require fancybox, so fancybox JavaScripts and CSS files need to be included in the document. The above code is just an example of a lightbox usage; it can be any other lightbox where you could define images to be displayed in a simmilar way. Please note that toolTip* options e.g. toolTipHtml would produce a popup which looks simmilar to fancybox, but they do not require fancybox JavaScript and CSS files.
onRendernullVer. 4.1.3+ Your custom function when a particlar hotspot is added to the DOM; receives name of the hotspot as argument
mouseovernullYour custom mouseover event function
mouseoutnullYour custom mouseout event function
mouseenternullYour custom mouseenter event function
mouseleavenullYour custom mouseleave event function
mousedownnullYour custom mousedown event function
mouseupnullYour custom mouseup event function
position{}position is a JS object with the positions of a particular hotspot, e.g.
position: {
1: {left: 1500, top: 720},
3: {left: 660, top: 710},
4: {left: 760, top: 510}
}
The keys (1,2,3 ...) can be numbers (starting from 1, not 0) or filenames of particular frames. In case a key is omited the hotspot will not be shown in that particular frame.

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

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

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

$axZm -> makeFirstImage($zoom, $skipInitialImage)
Description:Generate initial image
Parameter: @param array $zoom - Array with all configuration parameters.
@param bool $skipInitialImage - Do not generate initial image but generate mapOwnImage in case it is enabled.
$axZm -> makeAllThumbs($zoom)
Description:Make all gallery thumbs
Parameter: @param array $zoom - Array with all configuration parameters.
$axZm -> makeThumb($zoom, $pic_list_array, $zoomID)
Description:will make only specific thumb with $zoomID, which is the key of $pic_list_array
Parameter: @param array $zoom - Array with all configuration parameters.
@param array $pic_list_array - Array of type $key => $value with images.
@param int $zoomID - A specified key of $pic_list_array.
Ver. < 4.1.9
$axZm -> rawThumb($zoom, $picDir, $imgName, $prevWidth, $prevHeight, $qual, $cache)
Description:make a thumbnail image on-the-fly.
Parameter: @param array $zoom - Array with all configuration parameters.
@param string $picDir - Directory path of the image starting from root, with slash at the end.
@param string $imgName - Filename of the image.
@param int $prevWidth - Width.
@param int $prevHeight - Height.
@param int $qual - Jpg quality.
@param bool $cache - Ver. 3.2.0+ If true images will be cached in tempCache folder.
Ver. 4.1.9+
$axZm -> rawThumb($zoom, $options)
Description:make thumbnails and crops on-the-fly.
Parameter: @param array $zoom - Array with all configuration parameters.
@param array $options - Array with options which can be passed to the method.
  • picDir => string, directory path of the image starting from root, with slash at the end.
  • imgName => string, filename of the image.
  • prevWidth => integer, max width of the thumb.
  • prevHeight => integer, max height of the thumb.
  • qual => integer, jpg output quality.
  • cache => bool, if true images will be cached in tempCache folder
  • download => bool, force browser to download image
  • thumbMode => mixed, possible string values are 'contain' or 'cover'; if false the size of the output thumb will depend on prevWidth, prevHeight respective to image ratio or crop value passed, see below.
  • backColor => string, color to be filled if thumbMode is contain; possible values: hex color value e.g. '#FFFFFF', html color name e.g. 'white' or 'auto'. 'auto' will attempt to figure out the background color of the source image.
  • enlarge => bool, if source image is smaller then the output thumb parameters and this option is set to true, then the thumb will be enlarged. Does not apply whenn crop parameters are passed.
  • crop' => array, optional crop values e.g. array('x1' => 200, 'y1' => 200, 'x2' => 600, 'y2' => 600)
$axZm -> gPyramid($zoom)
Description:Create image pyramid from source image
Parameter: @param array $zoom - Array with all configuration parameters.
$axZm -> makeZoomTiles($zoom)
Description:Create image pyramid with tiles from source image
Parameter: @param array $zoom - Array with all configuration parameters.
$axZm -> zoomReturnCrop($zoom)
Description:Return the zoomed image via ajax, used in zoomLoad.php
Parameter: @param array $zoom - Array with all configuration parameters.
$axZm -> getVerion()
Description:Returns an array with version number and date
PHP Class Methods: axZmH.class.php

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

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

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

$axZmH -> proceedList($zoom, $zoomTmp)
Description: Check the existance of all needed image files and generate everything on-the-fly. Used in zoomObjects.inc.php
Parameter: @param array $zoom - Array with all configuration parameters.
@param array $zoomTmp - Array needed to store some arbitrary data like errors ans other.
@return array - modified $zoom and $zoomTmp
$axZmH -> removeAxZm($zoom, $pic, $arrDel, $self)
Description: Remove all images, tiles and thumbs created by AJAX-ZOOM.
Parameter: @param array $zoom - Array with all configuration parameters.
@param string $pic - Orinal image filename @param array $arrDel - Array of type $key => $value that defines which images have to be deleted.
  $key string
  'In' - initial image,
  'Th' - gallery thumbs,
  'gP' - image pyramid,
  'Ti' - image pyramid with tiles
  $value bool
@param bool $self - Defines if original image have to be deleted, default false
@return - nothing
Example:
	$axZmH -> removeAxZm($zoom, 'some_file.jpg', $arrDel = array('In' => true, 'Th' => true, 'gP' => true, 'Ti' => true), $self = false)
	
$axZmH -> checkSlash($input, $mode)
Description: Checks if slashes in paths are set correctly.
Parameter: @param string $input - Path.
@param strinf $mode - 'add' will add slash at the end if necessary, 'remove' will remove slash at the end, if present.
@return string - $input
$axZmH -> delteZoomCache($cacheDir, $maxTime)
Description: Delete old cache files.
Parameter: @param string $cacheDir - Path to temp folder, should be $zoom['config']['tempDir']
@param int $maxTime - difference of cache filetime from "now"
@return - nothing
$axZmH -> getl($char, $str)
Description: Used to determine filetype.
Parameter: @param string $char - Delimeter
@param string $str - String
@return string
Example:
	$string = 'some_image.file.jpg';
	$fileType = $axZmH -> getl('.', $string);
	// $fileType = jpg
	
$axZmH -> getf($char, $str)
Description: Used to determine filename without filetype extension.
Parameter: @param string $char - Delimeter
@param string $str - String
@return string
Example:
	$string = 'some_image.file.jpg';
	$fileName = $axZmH -> getf('.', $string);
	// $fileName = some_image.file
	
$axZmH -> composeFileName($file, $ext, $sep)
Description: Compose filename out of input parameter.
Parameter: @param string $file - Filename, e.g. my-file.jpg
@param string $ext - String to add to the filename.
@param string $sep - Separator between filename and additional string.
@return string - new composed filename.
Example:
	$newFileName = $axZmH -> composeFileName('my-file.jpg', 'thumb', '_');
	// $newFileName = my-file_thumb.jpg
	
$axZmH -> zoomServerPar($ret, $parExcl, $parExclPreg, $queryString)
Description: Generate query string out of any data ($queryString). This method will take the query string or an array like $_GET and return either an array with parameters and their values ($ret = 'arr') or it will return a new query string ($ret = 'str'). It can be used to set the configuration value parToPass in zoomConfig.inc.php; which is extremly important for AJAX-ZOOM to work properly.
Parameter: @param string $ret - Type of return: 'arr' will return a key => value type array. 'str' - a query string
@param array, string $parExcl - Parameters from query string which have to be excluded.
@param array $parExclPreg - Optional array like $parExcl, but it searches for specific string in parameter and excludes it if found
@param array, string $queryString - Input query string, e.g. $_GET - as array or 'myVar1=555&somethElse=aaa' - as string
@return string, array
Example:
	$zoom['config']['parToPass'] = $axZmH -> zoomServerPar('str', array('zoomID', 'zoomFile', 'zoomLoadAjax', 'loadZoomAjaxSet'), false, $_GET);
	
$axZmH -> drawZoomStyle($zoom)
Description: Returns all needed CSS files as HTML - text/css link tags.
Parameter: @param array $zoom - Array with all configuration parameters.
$axZmH -> drawZoomJs($zoom, $exclude = array())
Description: Returns all needed JavaScript files as HTML - text/javascript script tags.
Parameter: @param array $zoom - Array with all configuration parameters.
@param array $exclude - JS files to exclude, possible values: 'jquery', 'ui.core', 'ui.draggable', 'effects.core', 'browser', 'mousewheel', 'jScrollPane', 'facebox', 'axZm'
Example:
	// Return all needed js files, except of jquery and jquery-ui core libraries
	echo $axZm -> drawZoomJs($zoom, $exclude = array('jquery','ui.core'));
	
$axZmH -> drawZoomJsConf($zoom, $rn = false, $pack = true))
Description: Returns all needed configuration variables for JavaScript. This method is primary gateway between PHP (zoomConfig.inc.php, zoomObjects.inc.php) and JavaScript
Parameter: @param array $zoom - Array with all configuration parameters.
@param bool $rn - Add line break after each line of code
@param bool $pack - If true, the returned JavaScript is packed with the Dean Edwards JavaScript packer
Example:
	echo $axZmH->drawZoomJsConf($zoom, $rn = false, $pack = true);
	
$axZmH -> drawZoomJsLoad($zoom, $pack = false, $windowLoad = true, $jsObject)
Description: Returns all needed exetuable JavaScript.
Parameter: @param array $zoom - Array with all configuration parameters.
@param bool $pack - If true, the returned JavaScript is packed with the Dean Edwards JavaScript packer
@param bool $windowLoad - Init on window load - jQuery(window).load(function(){jQuery.fn.axZm();});
@param string $jsObject - Adds some api event options to jQuery.fn.axZm()
Example:
	echo $axZmH->drawZoomJsLoad($zoom, $pack = true, $windowLoad = true, $jsObject = false);
	
$axZmH -> drawZoomBox($zoom, $zoomTmp)
Description: This method outputs the main HTML for zoom.
Parameter: @param array $zoom - Array with all configuration parameters.
@param array $zoomTmp - Array with data collected in zoomObjects.inc.php
Example:
	echo $axZmH->drawZoomJsConf($zoom, $zoomTmp);
	

Version History

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

Patches:

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

Patches:

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

Patches:

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

Plugins & Modules

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

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

  2. When you upload 16, 24, 36, 48, 72 or even more high resolution images - this takes time. To avoid incomplete generation of the animated preview gif and / or image tiles you can upload the spin set into some other folder and move it to '/axZm/pic/zoom3D/[product id]' after all images have been successfully uploaded. Alternatively place an empty file named "upload.txt" into this folder and remove it after the upload is complete.
Magento Commerce
Demo Magento commerce store
1. Entpacken Sie den Inhalt der download Datei mit unveränderter Dateistruktur.
2. Kopieren Sie nur den Ordner 'axZm' in das Verzeichnis Ihrer Magento Installation.
3. Ver. 3.0.1+ Nicht mehr nötig. Verschieben Sie die Datei 'axZm/mods/magento/zoomObjects.inc.php' in 'axZm'. Die in 'axZm' gleichnamige Datei wird dabei überschrieben.
4. Verschieben Sie den gesamten Ordner 'axZm/mods/magento/pic' (nicht '/pic') ebenfalls in das 'axZm' Verzeichnis.
5. Setzen Sie die Zugriffsrechte aller Unterordner im 'axZm/pic/' Verzeichnis auf 775 (chmod) oder andere, z.B. 777. Wichtig ist, dass PHP in diesen Ordnern schreiben kann.
6. Stellen Sie sicher, dass entweder "ioncube" oder "sourceguardian" Loader auf dem Server installiert sind. Mehr Informationen darüber finden Sie in der vollständigen Dokumentation unter http://www.ajax-zoom.com/index.php?cid=docs
7. Sichern Sie die Datei 'app/design/frontend/[your_interface]/[your_theme]/template/page/html/head.phtml' und öffnen diese in einem Editor. Wenn diese Datei dort nicht vorhanden ist, kann sie möglicherweise unter 'app/design/frontend/base/default/template/page/html/head.phtml' oder 'app/design/frontend/default/default/template/page/html/head.phtml' gefunden werden.
8. Fügen Sie folgende Zeile: <?php require (BP . str_replace('/', DS, '/axZm/mods/magento/magento_head.php'));?> nach <?php echo $this->getCssJsHtml() ?>
9. Stellen Sie sicher, dass jQuery Core auf der Seite nur ein Mal vorhanden ist und alle jQuery Plugins sich unter jQuery Core Bibliothek befinden!
WICHTIG: die häufigste Ursache dafür, dass Module mit jQuery Plugins sich nicht miteinander vertragen ist die automatische Eintragung von jQuery Core Bibliothek doppelt oder dreifach in eine Seite. Dann passiert nämlich folgendes:

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

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

jqueryCore_2.js überschreibt jqueryCore_1.js und irgendEinPlugin_1.js, so dass irgendEinPlugin_1.js überhaupt nicht mehr vorhanden ist. Ruft nun ein anderer Code auf der Seite eine Funktion aus irgendEinPlugin_1.js, so wird vom Browser ein Fehler ausgegeben. Eventuell funktioniert gar nichts mehr.
Im Falle, dass die jQuery Core Bibliothek bereits vorhanden ist, öffnen Sie die Datei 'axZm/mods/magento/magento_head.php' und entfernen sie dan JavaScript Tag mit jQuery Core.

Wenn es nicht möglich ist den AJAX-ZOOM Code im Headbereich nach dem von anderen Modulen (oder dem Template) eingefügten jQuery Core Biliothek(en) zu platzieren, sondern nur davor, dann können Sie folgendes machen: Entfernen Sie nicht jQuery Core aus 'axZm/mods/xtc/xtc_head.php'. Finden Sie alle anderen jQuery Core (nicht Plugin) Dateien im Quelltext der Ausgabeseite, öffnen diese und machen sie unschädlich, indem einfach alles darin gelöscht wird. Sie werden dann zwar im Quelltext angezeigt, macht aber nichts, weil sie nun leer sind. Dadurch optimieren Sie die Ladezeiten, haben Kontrolle über die Version von jQuery Core und Ihre Module (nicht nur AJAX-ZOOM) vertragen sich wieder.
10. Sichern Sie die Datei 'app/design/frontend/[your_interface]/[your_theme]/template/catalog/product/view/media.phtml'.
11. Verschieben Sie dann die Datei 'axZm/mods/magento/media.phtml' in das Verzeichnis 'app/design/frontend/[your_interface]/[your_theme]/template/catalog/product/view/'. Bitte beachten Sie, dass in der AJAX-ZOOM magento.phtml selbst noch einige Parameter einstellbar sind! Mann kann z.B. einstellen, dass AJAX-ZOOM sich sofort im Vollbild öffnet oder direkt ohne Vorschau angezeigt wird.
12. Es steht Ihnen frei die Dateien media.phtml und 'axZm/mods/magento/magento_axZm.js' beliebig anzupassen. Am Anfang der Datei media.phtml finden Sie einige Optionen, mit denen das Design an Ihr Layout anpassbar ist.
13. Wenn Templatecache aktiviert ist, muss dieser geleert werden, damit die Änderungen im Frontend sichtbar sind. In Administratorbereich gehen Sie dazu auf System -> Cache Management und löschen den Cache.
14. Sie haben die AJAX-ZOOM demo Version installiert. Nachdem Sie sich für kommerzielle Lizenz entschieden haben, können Sie hier eine Lizenz erwerben: www.ajax-zoom.com/index.php?cid=download Der Lizenzschlüssel muss dann in die Datei 'axZm/zoomConfig.inc.php' eingefügt werden.
15. Für das Uploaden und Anzeigen von 360 Grad Bildern sehen Sie bitte hier: http://www.ajax-zoom.com/index.php?cid=docs#heading_9
Sollten Sie einen Fehler erhalten, dass die Bilder nicht gefunden wurden, müßen höchstwahrscheinlich ein oder zwei Variablen manuell eingestellt werden. Öffnen Sie die Datei /axZm/zoomConfig.inc.php und setzen Sie zunächst anstatt der Zeile:
$zoom['config']['installPath'] = $axZmH->installPath();
diese Zeile ein:
$zoom['config']['installPath'] = '';
bzw. wenn der Shop im Unterverzeichnis, wie etwa '/shop' installiert ist, dann:
$zoom['config']['installPath'] = '/shop';
NOTES:

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

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

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

4. The lightbox implementation (jquery.fancybox Ver. 1.2.6) has been modified to support auto dimensions (jquery.fancybox-1.2.6.js line 158ff). The new version of fancybox, currently 1.3.1 slows down Magento in IE (some JS issue?). The slightly modified old version 1.2.6 is sufficient for the purpose.
xt:Commerce (AJAX-ZOOM Ver. 2.1.3+) - xtcModified, Gambio, VEYTON
Demo xt:Commerce store (xtcModified)
1. Entpacken Sie den Inhalt der download Datei mit unveränderter Dateistruktur.
2. Kopieren Sie nur den Ordner 'axZm' in das Verzeichnis Ihrer xt:Commerce Installation.
3. Ver. 3.0.1+ Nicht mehr nötig. Verschieben Sie die Datei 'axZm/mods/xtc/zoomObjects.inc.php' in 'axZm'. Die in 'axZm' gleichnamige Datei wird dabei überschrieben.
4. Verschieben Sie den gesamten Ordner 'axZm/mods/xtc/pic' ebenfalls in das 'axZm' Verzeichnis.
5. Setzen Sie die Zugriffsrechte aller Unterordner im 'axZm/pic/' Verzeichnis auf 775 (chmod) oder andere, z.B. 777. Wichtig ist, dass PHP in diesen Ordner schreiben kann.
6. Stellen Sie sicher, dass entweder "ioncube" oder "sourceguardian" Loader auf dem Server installiert sind. Mehr Informationen darüber finden Sie in der vollständigen Dokumentation (zur Zeit leider nur in Englisch) unter http://www.ajax-zoom.com/index.php?cid=docs
7. Sichern Sie die Datei und öffnen diese in einem Editor:
XTC: 'includes/header.php'
VEYTON: 'templates/[Ihr_Template]/javascript/js.php'
8. Fügen Sie folgende Zeile im head Bereich des HTML Documents:

XTC: include(DIR_FS_DOCUMENT_ROOT.'axZm/mods/xtc/xtc_head.php');
vor:
require('templates/'.CURRENT_TEMPLATE.'/javascript/general.js.php');
(also irgendwo im head Bereich des HTML Documents).

VEYTON: <?php include(_SRV_WEBROOT.'axZm/mods/xtc/xtc_head.php'); ?>
9. Stellen Sie sicher, dass jQuery Core auf der Seite nur ein Mal vorhanden ist und alle jQuery Plugins sich unter jQuery Core Bibliothek befinden!
WICHTIG: die häufigste Ursache dafür, dass Module mit jQuery Plugins sich nicht miteinander vertragen ist die automatische Eintragung von jQuery Core Bibliothek doppelt oder dreifach in eine Seite. Dann passiert nämlich folgendes:

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

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

jqueryCore_2.js überschreibt jqueryCore_1.js und irgendEinPlugin_1.js, so dass irgendEinPlugin_1.js überhaupt nicht mehr vorhanden ist. Ruft nun ein anderer Code auf der Seite eine Funktion aus irgendEinPlugin_1.js, so wird vom Browser ein Fehler ausgegeben. Eventuell funktioniert gar nichts mehr.
Im Falle, dass jQuery Core Bibliothek bereits im head vorhanden ist, öffnen Sie die Datei 'axZm/mods/xtc/xtc_head.php' in einem Editor und entfernen Sie den jQuery core Script Tag. Stellen Sie dann aber sicher, dass der Code aus Schritt 8 nach dem existierenden jQuery Script Tag eingefügt ist.

Sollte die jQuery Core Biliothek nicht im Head Bereich vorhanden sein, dafür aber beispielsweise unten im Body, wie es bei xtcModified bis Ver. 1.04 der Fall war, öffnen Sie dann die Datei 'templates/[Ihr_Template]/javasctipt/general.js.php' und entfernen Sie jQuery von dort.

Wenn es nicht möglich ist den AJAX-ZOOM Code im Headbereich nach dem von anderen Modulen (oder dem Template) eingefügten jQuery Core Biliothek(en) zu platzieren, sondern nur davor, dann können Sie folgendes machen: Entfernen Sie nicht jQuery Core aus 'axZm/mods/xtc/xtc_head.php'. Finden Sie alle anderen jQuery Core (nicht Plugin) Dateien im Quelltext der Ausgabeseite, öffnen diese und machen sie unschädlich, indem einfach alles darin gelöscht wird. Sie werden dann zwar im Quelltext angezeigt, macht aber nichts, weil sie nun leer sind. Dadurch optimieren Sie die Ladezeiten, haben Kontrolle über die Version von jQuery Core und Ihre Module (nicht nur AJAX-ZOOM) vertragen sich wieder.
10. Sichern Sie die Datei
XTC: 'templates/[Ihr_Template]/module/product_info/product_info_v1.html' und öffnen diese in einem Editor. In Gambio GX heißt die Datei standard.html
VEYTON pfad: 'templates/[Ihr_Template]/xtCore/pages/product/product.html'.
Wichtig: speichern Sie die Sicherung der Datei nicht in das gleiche Verzeichnis, da sonst die Backup Datei und nicht die richtige Template Datei geparsed werden könnte.
11. XTC: Fügen Sie zwischen {if $PRODUCTS_IMAGE!=''} .... {/if} anstatt des vorhandenen Inhalts diese Zeile ein:
{php}include(DIR_FS_DOCUMENT_ROOT.'/axZm/mods/xtc/xtc_media.php');{/php}
VEYTON: Fügen Sie zwischen zwischen {if $products_image!=''} .... {/if} anstatt des vorhandenen Inhalts diese Zeile ein: {php}include(_SRV_WEBROOT.'/axZm/mods/xtc/xtc_media.php');{/php}
12. Standard xt:Commerce, Gambio GX: optional löschen Sie alles zwischen <!-- more images --> ... <!-- more images eof -->
xtcModified: optional löschen Sie alles zwischen {if $more_images|@count > 0} ... {/if}
13. Sie können die Dateien 'axZm/mods/xtc/xtc_media.php' und 'axZm/mods/xtc/xtc_axZm.js' nach Ihren Bedürfnissen frei anpassen.
14. Im Administrator Bereich wählen Sie Erweiterte Konfiguration -> Cache Optionen und drücken Sie auf "Templatecache leeren".
15. Sie haben die AJAX-ZOOM light Version installiert. Nachdem Sie sich für kommerzielle Lizenz entschieden haben, können Sie hier eine Lizenz erwerben: www.ajax-zoom.com/index.php?cid=download Der Lizenzschlüssel muss dann in die Datei 'axZm/zoomConfig.inc.php' eingefügt werden.
16. Für das Uploaden und Anzeigen von 360 Grad Bildern sehen Sie bitte hier: http://www.ajax-zoom.com/index.php?cid=docs#heading_9
Sollten Sie einen Fehler erhalten, dass die Bilder nicht gefunden wurden, müßen höchstwahrscheinlich ein oder zwei Variablen manuell eingestellt werden. Öffnen Sie die Datei /axZm/zoomConfig.inc.php und setzen Sie zunächst anstatt der Zeile:
$zoom['config']['installPath'] = $axZmH->installPath();
diese Zeile ein:
$zoom['config']['installPath'] = '';
bzw. wenn der Shop im Unterverzeichnis, wie etwa '/shop' installiert ist, dann:
$zoom['config']['installPath'] = '/shop';
NOTES:

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

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

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

4. The lightbox implementation (jquery.fancybox Ver. 1.2.6) has been modified to support auto dimensions (jquery.fancybox-1.2.6.js line 158ff).
Oxid eSales (AJAX-ZOOM Ver. 2.1.6+, Oxid Ver. 4.3.0+)
Demo Oxid eSales store
1. Entpacken Sie den Inhalt der download Datei mit unveränderter Dateistruktur.
2. Kopieren Sie nur den Ordner 'axZm' in das Verzeichnis Ihrer Oxid Installation.
3. Ver. 3.0.1+ Nicht mehr nötig. Verschieben Sie die Datei 'axZm/mods/oxid/zoomObjects.inc.php' in 'axZm'. Die in 'axZm' gleichnamige Datei wird dabei überschrieben.
4. Verschieben Sie den gesamten Ordner 'axZm/mods/oxid/pic' ebenfalls in das 'axZm' Verzeichnis.
5. Setzen Sie die Zugriffsrechte aller Unterordner im 'axZm/pic/' Verzeichnis auf 775 (chmod) oder andere, z.B. 777. Wichtig ist, dass PHP in diesen Ordner schreiben kann.
6. Stellen Sie sicher, dass entweder "ioncube" oder "sourceguardian" Loader auf dem Server installiert sind. Mehr Informationen darüber finden Sie in der vollständigen Dokumentation (zur Zeit leider nur in Englisch) unter http://www.ajax-zoom.com/index.php?cid=docs
7. Sichern Sie die Datei 'out/[Ihr_Template]/tpl/_header.tpl' und öffnen diese in einem Editor.
8. Fügen Sie die folgende Zeile:
[{php}]include(getShopBasePath().'axZm/mods/oxid/oxid_head.php');[{/php}]
vor:
[{if $rsslinks}]
(also irgendwo im head Bereich des HTML Documents)
9. Im Falle, dass jQuery Bibliothek bereits im Head vorhanden ist, öffnen Sie die Datei 'axZm/mods/oxid/xtc_head.php' in einem Editor und entfernen Sie den jQuery Script Tag (Zeile 24). Stellen Sie dann aber sicher, dass der Code aus Schritt 8 nach dem existierenden jQuery Script Tag eingefügt ist.
10. Sichern Sie die Datei 'out/[your_template]/tpl/details.tpl' und öffnen diese in einem Editor.
11. Fügen Sie anstatt <div class="picture">.... </div> diese Zeile ein:
[{php}]include(getShopBasePath().'axZm/mods/oxid/oxid_media.php');[{/php}]
12. Um die standard Galerie und Zoom aus dem Template zu entfernen können Sie die Datei 'details.tpl' entsprechend anpassen. Der Link (a tag) mit der id 'test_zoom' wird nicht mehr benötigt. Ebenso das div Ellement mit dem css class Namen 'morepics'. Wenn $axZm['adjTemplate'] und $axZm['removeMorePics'] in der Datei 'axZm/mods/oxid/oxid_media.php' aktiviert sind, werden diese Schritte mit Javascript erledigt, nachdem die Seite geladen ist. Langfristig sollten Sie aber das Template anpassen.
13. Sie können die Dateien 'axZm/mods/oxid/oxid_media.php' und 'axZm/mods/oxid/oxid_axZm.js' nach Ihren Bedürfnissen frei anpassen.
14. Templatecache wenn notwendig unter Stammdaten -> Grundeinstellungen -> Performance leeren.
15. Sie haben die AJAX-ZOOM demo Version installiert. Nachdem Sie sich für kommerzielle Lizenz entschieden haben, können Sie hier eine Lizenz erwerben: www.ajax-zoom.com/index.php?cid=download Der Lizenzschlüssel muss dann in die Datei 'axZm/zoomConfig.inc.php' eingefügt werden.
Sollten Sie einen Fehler erhalten, dass die Bilder nicht gefunden wurden, müßen höchstwahrscheinlich ein oder zwei Variablen manuell eingestellt werden. Öffnen Sie die Datei /axZm/zoomConfig.inc.php und setzen Sie zunächst anstatt der Zeile:
$zoom['config']['installPath'] = $axZmH->installPath();
diese Zeile ein:
$zoom['config']['installPath'] = '';
bzw. wenn der Shop im Unterverzeichnis, wie etwa '/shop' installiert ist, dann:
$zoom['config']['installPath'] = '/shop';
NOTES:

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

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

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

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

Appendix

Datei zoomObjects.inc.php
Dies ist eine zusätzliche Indormation. Sie müssen die Datei zoomObjects.inc.php nicht editieren, um Bilder festzulegen.

In der Datei 'zoomObjects.inc.php' wird festgelegt, welche Bilder angezeigt werden sollen.. Die Dateinamen der Bilder werden in einem PHP Array gespeichert - $pic_list_array.

Ebenfalls in dieser Datei können Sie, und in einigen Fällen ist es auch notwendig, bestimmte Optionen aus 'zoomConfig.inc.php' zu überschreiben. Wenn beispielsweise nicht alle Bilder in dem gleichen Verzeichnis liegen ist es notwendig $zoom['config']['pic'] und $zoom['config']['picDir'] neu zu definieren. Mehr dazu in den nachfolgenden Beispielen.

SCHRITT I
$pic_list_array festlegen

Das grundlegende Array, welches es zu erstellen gilt, ist als $pic_list_array definiert. Die Schlüssel dieses Arrays müssen ganze Zahlen (integer) größer, als Null sein, wobei die Reihenfolge und Zahlengrößen hier frei definiert werden können. Die Folge muss also nicht 1, 2, 3... sein, sie kann auch 1254, 5846, 352... lauten. (Der Schlüßel dient als Identifikationsnummer des Bildes und wird über die $_GET variable 'zoomID' intern zwischen AJAX-ZOOM Dateien übergeben.)

Die Werte des Arrays sind die Dateinamen der Bilder (string), z.B. 'product_777.jpg'. Bitte beachten Sie, dass die Werte nur den Dateinamen ohne relative oder absolute Pfadangaben sein müssen, /pictures/product_images/product_777.jpg. Der Pfad wird zoom['config']['pic'] definiert und kann ggf. in dieser Datei für das Aktuelle Bild verändert werden...

Zuerst muss das grundlegende Array definiert werden:
$pic_list_array = array();

Zusätzlich wird ein weiteres Array, definiert als $pic_list_data benötigt. Dieses mehrdimensionale Array enthält mehr Informationen über das Bild, wie etwa die Größe oder Beschreibung des Bildes. Mehr dazu im Schritt II.

Data array definieren:
$pic_list_data = array(); 
$zoomTmp ist noch ein Array indem temporäre Zwischenergebnisse und einige Nebeninformationen wie Fehler gespeichert werden.
$zoomTmp = array(); 

Jetzt kommt es auf Ihre Anwendung darauf an, wie $pic_list_array and $pic_list_data zu füllen sind.

Bitte beachten Sie, dass in allen dynamischen Beispielen die Parameter über "superglobale Variable" $_GET übergeben werden müssen. Speichern Sie ggf. die notwenigen Variablen im $_GET Array (z.B. $_GET['yourVar'] = "someValue";), wenn die Variablen nicht sowieso im Anfragestring vorhanden sind (z.B. http://www.yourdomain.com/index.php?yourVar=someValue).
Beispiel 1
Zum Ausprobieren kann das $pic_list_array manuel festgelegt werden.
$pic_list_array[1] = 'some_file1.jpg';
$pic_list_array[2] = 'some_file2.jpg';
$pic_list_array[3] = 'some_file3.jpg';
$pic_list_array[4] = 'some_file4.jpg';
$pic_list_array[5] = 'some_file5.jpg';

Bitte beachten Sie, dass in diesem Beispiel die Bilder im Verzeichnis, welches in der Variablen $zoom['config']['pic'] und Datei '/axZm/zoomConfig.inc.php' festgelegt wurde, sein müssen. Natürlich ist das oben gezeigte Beispiel sehr statisch und nicht flexibel genug, um mit größeren Mengen an Bildern umzugehen. Um sich dem Ziel der dynamischen Generierung eines Bildsets zu nähern könnte man stattdessen folgendes schreiben:

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

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

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

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

Abhängig von Ihrem Parameter 'productID', welches über Anfragestring übergeben wird, bzw. als $_GET Parameter definiert, wird ein bestimmtes Set an Fotos ausgewählt.

Beispiel 2
Das Array mit Bildern aus einem bestimmten Verzeichnis und darin enthaltenden Fotos generieren

Dieses Beispiel zeigt wie das $pic_list_array in den meisten Beispielen auf dieser Seite zusammengestellt wird.

Da die Verzeichnisse, in denen die Fotos abgelegt sind, immer unterschiedlich sind, gibt es einen Parameter 'zoomDir', welcher über den Anfragestring übergeben wird, z.B. ?zoomDir=animals oder direkt in der PHP Datei, wo AJAX-ZOOM integriert ist, als $_GET parameter definiert ist, z.B.:

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

Dabei wird der Wert der Option $zoom['config']['pic'] aus zoomConfig.inc.php in diesem Beispiel als Basisordner verstanden, in welchem die Unterordner mit den Fotos liegen. Die Werte $zoom['config']['pic'] und $zoom['config']['picDir'] werden also entsprechend dem übergebenden Parameter 'zoomDir' angepasst. Auf dieser Weise reicht es per FTP oder einer PHP Anwendung weitere Fotos in diese Unterordner zu kopieren, damit sie in der Galerie des AJAX-ZOOM erscheinen. (In den Beispielen dienen die Namen der Unterordner zur Vereinfachung als Überschriften, wenn Unterordner per Useraktion umgeschaltet werden können.)

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

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

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

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

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

Mit dem obigen Code wird zunächst ein Array mit allen Unterordnern des "Basis Orners" erstellt und in dem multidimensionalen Array $zoomTmp unter dem Schlüßel 'folderArray' - $zoomTmp['folderArray'] abgespeichert. Daraufhin wird geprüft, ob $_GET['zoomDir'] in dem Array als Wert und eventuell als numerischer Schlüßel vorhanden sind. Wenn nichts gefunden wird einfach der erster Unterordner ausgewählt. Zuletzt müßen die Einstellungsoptionen $zoom['config']['pic'] und $zoom['config']['picDir'] überschrieben werden. Mit der Liste aller Unterordner können außerdem interessante Anwendungen programmiert werden, wie etwa in diesem Beispiel.

Wenn all diese Informationen und Prüfungen nicht notwendig sind, kann man das ganze mit ein paar Zeilen Code ersetzen. Da im nachfolgenden Codebeispiel kein Array mit allen unterordnern erstellt wird, muss $_GET['zoomDir'] ein String sein. In dem obigen coder kann $_GET['zoomDir'] auch der numerische Schlüßel des Unterordners sein.

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

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

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

Als nächstes soll das Array $pic_list_array mit Fotos aus dem gewählten Unterordner gefüllt werden:

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

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

// Sort piclist by filename if You want, (not necessary)
$pic_list_array = $axZmH->natIndex($pic_list_array);
Beispiel 3
Das Array aus MySQL Daten erstellen

Datenbankverbindung aufbauen.

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

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

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

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

Angenommen, es besteht folgendes Szenario: es gibt eine MySQL-Tabelle mit Produkteinträgen und die Tabelle heißt "products". Die Tabelle enthält diese Felder: ID, Titel, Beschreibung, pic1, pic2, pic3 und Sie möchten alle drei Bilder in der Galerie anzeigen. Sicherlich wird in Ihrer Anwendung ein Parameter über den Anfragestring übergeben, wie etwa "PID" (z.B. product.php?PID=12345), "ProductID" oder einfach "id", welches mit dem ID Feld in der Datenbank übereinstimmt und so die Auswahl des Richtigen Datensatzes ermöglicht.

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

Das oben genannte Datenbank-Layout (Beispiel 3.) würde nur ein paar Bilder erlauben, die gespeichert werden können. In fortgeschritteneren CMS oder Webshop gäbe es eine eigene Tabelle für unendlich viele Bilder. Angenommen, die Tabelle heißt "images" und hat folgende Felder: ImgID, imgProdID, imgFileName, imgTitle, imgDescription, [imgOrder]. Der relevante Parameter, welches über Anfragestring übergeben wird heißt wie im Beispiel 3 "PID" (z.B. product.php?pID=12345). Da wir nur in Bildern interessiert sind, müßen die Tablellen "products" und "images" nicht in der mySQL Abfrage vereinigt werden (join). Das Feld "imgProdID" in "images" Tabelle sagt uns, dass ein Datensatz zu einem bestimmten Produkt mit dieser ID gehört. Mit anderen Worten muss in der "images" Tabelle nach allen relevanten Einträgen gesucht werden, wo imgProdID gleich der Id ist, welche über Anfragestring übergeben wurde.

Datenbankverbindung aufbauen:

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

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

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

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

Die nachfolgende mySQL Abgrage bedeutet so viel wie: wähle alle Felder von "images" Tabelle, wo der Identifikator "identifier" gleich dem Parameter, welches als "pID" über Anfragestring übergeben wurde. Das Ergebnis kann man cachen, indem nach SELECT SQL_CACHE hinzugeschrieben wird (http://dev.mysql.com/doc/refman/4.1/en/query-cache-in-select.html). Gäbe es noch ein Feld wie etwa "imgOrder", welches die Rheinfolge bestimmt, könnte man am Ende der Abfrage " ORDER BY imgOrder " hinzufügen, damit die Bilder richtig sortiert werden.

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

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

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

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

Nachdem das Array $pic_list_array im Schritt I zusammengestellt wurde, müssen im zweiten Schritt zusätzliche Informationen über die Bilder gesammelt werden:


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

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

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

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

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

Jetzt müßten es drei Arrays geben: $pic_list_array, $pic_list_data and $toomTmp. Das letzte kann auch leer sein. Im Grunde besteht kein Bedarf irgendetwas im nachfolgenden Code zu ändern!!! Die Ergebnisse werden mit der Methode proceedList geprüft und es werden bei Bedarf Bildkacheln und Thumbnails erstellt.

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

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