Release date: October 17th, 2017
Current version: 5.0.12
Change log

Anforderungen

Server Software PHP Version

PHP 5.3+

PHP 5.3+ (PHP 7 wird auch unterstützt), 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 optionalen ImageMagicks 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 oder SourceGuardian Loader

Um mit IonCube oder SourceGuardian kodierte PHP Scripte ausführen zu können werden kostenlose Ioncube "Loader" ab version 4.4+ oder SourceGuardian "Loader" benötigt. Diese Loader sind für sehr viele Server Systeme verfügbar. AJAX-ZOOM kann wahlweise mit einem der zwei Loader betrieben werden. Für PHP 7 werden Ioncube Loader Ver. 6+ benötigt.

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

Bitte beachten: Sie brauchen nicht beide Loader, sondern nur wahlweise eins davon!

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

PHP muss nicht installiert werden!

IIS 7+

IIS 7 (oder neuer) mit ASP.NET 4.0 Web Site konfiguriert oder Visual Studio 2010 für Entwicklung.

Die Grundinstallation für ASP.NET (nicht PHP) ist recht einfach:

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, was in allen Beispielen außer example1.php der Fall ist, 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.6.0+

Es ist empfehlenswert, die neueste stabile Version von jQuery zu nutzen. Versionen wie 1.6.0 sollten nicht genutzt werden. Auch sollten Verionen 1.9.0 und 1.9.1 nicht benutzt werden. Wenn AJAX-ZOOM in älteren Internet Explorer Versionen soll, dann muss jQuery < 2.0 verwendet werden.

jQuery UI 1.8+

ui.core.js, ui.draggable.js, ui.mouse.js, ui.slider.js, ui.widjet.js, effects.core.js'; Die UI Bibliothek wird, falls nicht bereits vorhanden, dynamisch nachgeladen. Falls notwendige Komponente der UI nicht vorhanden sind, dann wird automatisch die UI der gleichen Version von Google CDN nachgeladen. Eines der mittelfristigen Ziele ist es, die Abhängigkeit von der jQuery UI loszuwerden, da sie nicht wirklich benötigt wird.

Kenntnisse

Grundlegende Kenntnisse in HTML, CSS, PHP und JavaScript sind gewöhnlich 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. Vorausgesetzt, dass die Serveranforderungen erfüllt sind, sollte AJAX-ZOOM aus der Box funktionieren.

Installation

Module

Für die installation der Module schauen Sie bitte auf entsprechenden modulseite:

Magento PrestaShop WooCommerce Opencart Oxid Shopware

Manuelle Installation

Die nachfogende Beschreibung ist primär für die manuelle Installation zu gebrauchen. Für Module schauen Sie bitte auf entsprechenden modulseite.

Photos definieren

Es gibt mehrere Möglichkeiten dem AJAX-ZOOM mitzuteilen, welche Bilder geladen werden sollen. Fast jedes Beispiel kann modifiziert werden um andere Bilder auf unterschiedlicher Weise zu laden. Eine gute übersicht über Parameter, welche an AJAX-ZOOM übergeben werden können und Bilder festlegen, finden Sie in diesem Bespiel - example27.php

Checkliste für Bildschutz

Wenn Sie verhindern wollen, dass Ihre hochauflösenden Bilder heruntergeladen werden können, sollten Sie den Zugang über http zu den Verzeichnissen mit den Quellbildern sperren. Den Verzeichnisschutz können Sie beispielsweise mittels .htaccess einrichten.

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

Optionen & Einstellungen

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.

Jedes Beispiel im Download-Paket verwendet ein spezielles Konfigurationsoptions-Set. Die Standardoptionen in /axZm/zoomConfig.inc.php werden in zoomConfigCustom.inc.php überschrieben, welches unten in zoomConfig.inc.php inkludiert ist. Dies geschieht durch Übergabe eines Parameters example=[some value] an AJAX-ZOOM direkt aus Beispielen oder Plugins über Abfrage-Zeichenkette (query string). Um herauszufinden, welcher "example" - Wert verwendet wird, siehe Quellcode der betreffenden Implementierung oder Ajax Aufrufe (XHR) zu /axZm/zoomLoad.php mit Browser Entwickler-Tools. So können Sie Ihre spezifischen Optionen in "zoomConfigCustom.inc.php" nach elseif ($_GET['example'] == [some value]){ anpassen. Bitte beachten Sie, dass der Wert des Beispielparameters, der über die Abfragezeichenfolge an AJAX-ZOOM übergeben wird, nicht mit der Nummer eines php Beispiels übereinstimmt, das im Ordner /examples des Downloadpakets zu finden ist.

Da AJAX-ZOOM sehr häufig aktualisiert wird und die Anzahl der Optionen entsprechend wachsen kann, ist die beste Praxis die Optionen von zoomConfig.inc.php nach zoomConfigCustom.inc.php zu kopieren, und zwar nach elseif ($_GET['example'] == [some value]). Natürlich können Sie einen eigenen Wert für [some value] in zoomConfigCustom.inc.php erstellen. Wenn Sie die zoomConfig.inc.php unangetastet lassen, dies gilt auch für $zoom['config']['licenceKey'] und $zoom['config']['licenceType'], dann können Sie durch Überschreiben aller Dateien außer zoomConfigCustom.inc.php und ggf. geänderten CSS-Dateien AJAX-ZOOM updaten.

Ab Ver. 4.3.1+ können Sie auch eine zoomConfigCustomAZ.inc.php Datei erstellen, die außerhalb von /axZm Verzeichnisses liegt (gleiche Ebene). Auf diese Weise können Sie Ihre benutzerdefinierten Konfigurationen in dieser Datei platzieren und das ganze /axZm Verzeichnis überschreiben.

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'
licensesarray Ver. 4.2.5+ Array, wo mehrere Lizenzschlüssel eingegeben werden können
langstring Ver. 4.2.5+ iso Sprache, z.B. 'en'
memory_limitstring PHP Speichergrenze für schwere Operationen wie Bildkacheln erstellen. Vor Ver. 4.0 gab es immer ini_set ('memory_limit', 'HIGH VALUE'); am Anfang der Konfigurationsdatei. In Ver. 4.0+ können Sie die php.ini Standardwerte verwenden und einen höheren Wert in dieser Option setzen, z.B. '4000M'.
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.)
autoBackColorbool Ver. 4.2.12+ Automatisch die Hintergrundfarbe einstellen, nützlich, wenn die Hintergrundfarbe fest ist, z.B. weiß oder schwarz
cTimeComparemixed 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. Ver. 4.2.1+ possible values: false, "filectime", "filemtime"
exifAutoRotationbool Bilder abhängig von der in EXIF gespeicherten Informationen drehen. Sie müssen für PHP schreibbar sein.
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.
picDimstring Maximale Abmessungen des ersten Bildes, z.B. '600x400'. Damit ändern sich auch die gesamten Masse des Zoom Players, wenn dieser nicht responsiv gestarted wird. Um die Gesamtmasse zu erhalten müssen eventuell die Breite der Galerie und des Rahmens hinzugerechnet werden.
stepPicDimarray Ver. 4.2.1+ Array mit zusätzlichen Größen für Anfangsbilder (picDim), die je nach Player Größe / Auflösung geladen werden.
stepPicPreloadbool Ver. 4.2.1+ wenn stepPicDim nicht leer ist, werden zusätzliche Anfangsbilder vorhergesagt und vorgeladen.
stepPicOnZoombool Ver. 4.2.1+ wenn stepPicDim nicht leer ist, werden "besser passende" Anfangsbilder auch beim Zoomen geladen.
subfolderStructurestring, bool Ver. 4.2.1+ Art des Vezeichnis / Untervezeichnisstruktur für Vorschaubilder, Kacheln und Miniaturansichten. Default: "char", mögliche Werte:
  • "md5" - Erstes 1 Zeichen von md5 hashed Dateiname ohne Typ / zweites 1 Zeichen des md5 hashed Dateiname ohne Typ
  • "md5_2" - Erste 2 Zeichen von md5 hashed Dateiname ohne Typ / zweite 2 Zeichen des md5 hashed Dateiname ohne Typ
  • "char" - Erstes 1 Zeichen aus Dateiname ohne Typ / zweites 1 Zeichen aus Dateiname ohne Typ
  • "char_2" - Erste 2 Zeichen aus Dateiname ohne Typ / zweite 2 Zeichen aus Dateiname ohne Typ
  • "flat" or false - keine Untervezeichnisstruktur
subfolderStructureChmodoctal Ver. 4.2.1+ chmod für Untervezeichnisstruktur
enlargeSmallImagebool 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.
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.
zoomOutClickbool Bei 100% Zoom wird durch einen weiterer Klick der Zoom wiederhergestellt, so dass das gesamte Bild sichtbar ist.
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
disableClickZoombool Ver. 4.3.1+ Deaktivieren das Zoomen für Klick oder Doppelklick.
pinchZoomOnlyDragbool Ver. 4.3.1+ Zoomen mit Quetsch-Zoom ist deaktiviert, stattdessen kann der Benutzer nur verschieben.
iMagickbool 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+ Farbprofile in andere informationen im generierten Cache vom Originalbild übernehmen. Dies ist nur bei der Verwendung des ImageMagick möglich.
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+ Generiere PNG-Bilder, Kacheln etc. anstelle von JPG. Ver. 4.4.1+ Mögliche Werte sind: false, true, 'auto'; Bei 'auto' werden PNG-Bilder nur dann erzeugt, wenn das Originalbild auch PNG ist.
pngKeepTranspbool Ver. 4.0+ Transparente Bereiche im AJAX-ZOOM cache beibehalten, wenn pngMode aktiviert ist. Bei der Verwendung von GD2 sind die Ergebnisse möglicherweise nicht zufriedenstellend. Emfohlen wird daher ImageMagick zu verwenden.
pngBackgroundColorstring Ver. 4.2.1+ Hintergrundfarbe für transparente Bereiche des png-Bildes.
notTouchUAarray "Nicht touch Geräte", Array mit möglichen Strings innerhalb User Agent Strings, z.B. Array ("webkit viewer", "somthing_else"); Erzwingt die Mausereignisse, auch wenn der Browser falsch behauptet, Berührungsereignisse zu haben.
postModebool Ver 4.1.5+ POST anstatt GET für alle AJAX abfragen nutzen. Kann durch Übergabe von Argumenten an jQuery.fn.axZm, jQuery.fn.axZm.load or jQuery.fn.axZm.openFullScreen überschrieben werden
regexFilenamestring Ver. 4.2.1+ Regex zur Überprüfung des Dateinamens.
regexPathstring Ver. 4.2.1+ Regex für die Überprüfung von Pfaden.
fileTypeArraystring Ver. 4.2.1+ Array, das akzeptierte Bilddateitypen auflistet. Imagemagick könnte möglicherweise viele andere Dateitypen verarbeiten, als die Standardeinstellungen.

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 "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.
urlPathstring "Frontend" - Pfad, der in einigen Fällen angepasst werden sollte. In Voreinstellung haben "installPath" und "urlPath" die gleichen Werte.
rewriteBasestring Ver. 4.2.11+ remove a part of the string (path) passed to AJAX-ZOOM from an application Usefull if e.g. rewriteBase in htaccess is set the way that AJAX-ZOOM gets wrong paths for images e.g. Bitnami Magento and XAMPP on localhost, the path in the browser is http://192.168.178.27/magento, then the setup for making AZ extension work would be: $zoom['config']['fpPP'] = 'C:/xampp/apps/magento/htdocs'; $zoom['config']['urlPath'] = '/magento/js/axzoom'; $zoom['config']['rewriteBase'] = '/magento';
zoomLoadFilestring Absoluter Pfad zu der Datei zoomLoad.php, z.B. '/axZm/zoomLoad.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.
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, welche von AJAX-ZOOM verwendet wird.
jsUiThemestring Ver. 4.0+ Wechseln Sie leicht zwischen jQuery UI-Themen, indem Sie den Wert dieser Option ändern. Das UI-Thema befindet sich unter /axZm/plugins/jquery.ui/themes/[jsUiTheme]; Sie können Ihre eigenen erstellen oder bereits bestehen importieren.
jsUiSuppressJSbool Ver. 4.0.7+ Das laden der jQuery UI JavaScript-Dateien unterdrücken. Kann JavaScript-Fehler verursachen, wenn bestimmte jQuery-UI-Elemente nicht anders geladen werden.
jsUiSuppressCSSbool Ver. 4.0.7+ Das laden der jQuery UI CSS-Dateien unterdrücken. Aktivieren Sie diese Option, wenn alle CSS-Klassen anders geladen werden, z.B. Ein Schablonenthema.
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 überschrieben werden indem das Volle Pafad angegeben wird. Das Verzeichnis kann z.B. mit .htaccess vom Zugriff über http geschützt werden (deny from all)
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)!
jsonPathstring 5.0.9+ Path for json files, see also $zoom['config']['jsonInfo']

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: .axZm_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: .axZm_zoomMapSelArea
zoomMapSelBorderint Ver. 4.0+ Randbreite des Selektors.
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 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 Das Auswahlrechteck in der Zoom Map mit mouseover bewegen. Automatisch für Touch-Geräte deaktiviert. Man kann dies im example20.php sehen. Ver. 4.2.1+ - nicht für Touch-Geräte deaktiviert.
mapMouseWheelbool Wenn mapMouseOver aktiviert ist mit mousewheel ein- und auszoomen.
mapHorzMarginint Ver. 4.0+ Horizontaler Rand vom Rand des Spielers.
mapVertMarginint Ver. 4.0+ Vertikaler Rand vom Rand des Players.
mapOpacityfloat Ver. 4.0+ Durchsichtigkeit der Karte, wenn die Maus nicht darüber ist.
mapClickZoombool Ver. 4.1.0+ Bei klicken im nicht vergrößerten Zustand auf einen Punkt in der Image Map, ergibt sich ein Zoom auf 100%. Ist zu sehen im example16.php.
mapOwnImagebool, string Ver. 4.0+ Definieren der physikalische Bildmaße für das Kartenbild z.B. "200x200" oder false;
mapPathstring Ver. 4.0+ Pfad, in dem Kartenbilder gespeichert werden, wenn mapOwnImage auf eine Größe eingestellt ist.
mapFilterIMarray Ver. 4.0+ Einige Bildfilter wie schärfe, unschärfe oder Graustufen auf das Kartenbild angewendet, wenn Imagemagick für die Verarbeitung verwendet wird.
sortBystring Ver. 4.1.5+ Sortieren der Bilder anhand Dateiinformationen, die von PHP stat() Funktion zurückgegeben werden, z.B. ctime, mtime; Als Standardeinstellung werden die Bilder nach ihren Dateinamen sortiert.
sortReversebool Ver. 4.1.5+ Sortierreihenfolge der Bilder umkehren;
speedOptSetbool Ver. 4.1.5+ Macht AJAX-ZOOM schneller zwischen den Bildern wechseln. Mit dieser Einstellung werden mehrere andere Optionen am Ende von zoomConfig.inc.php überschrieben.

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: .axZm_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+ Galerie Miniaturbilder füllen.
galleryFilterIMarray Ver. 4.0+ Einige Bildfilter wie schärfe, unschärfe oder Graustufen auf die Miniaturbilder bei der Verwendung von Imagemagick für die Verarbeitung anwenden.
galleryFilterGDarray Ver. 4.0+ Einige Bildfilter wie schärfe, Sepia-Ton oder Graustufen auf die Galerie Miniaturbilder bei der Verwendung von GD für die Verarbeitung anwenden.
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+ Aktivieren der Swiping-Geste auf den mobilen Touch-Geräten, um zum nächsten oder vorherigen Bild zu wechseln. Mögliche Werte: 'Horz', 'Vert' oder false zum deaktivieren.
gallerySlideNavibool Ver. 4.0+ Vor und Zurück Tasten jeweils links und rechts auf dem Bild aktivieren. Im 360/3D Modus wird ein 360 beim Klicken & Drücken gedreht.
gallerySlideNaviMouseOverbool Ver. 4.0+ Pfeile für Vor und Zurück erscheinen nur, wenn die Maus ist über dem Bild. Deaktiviert für Touch-Geräte.
gallerySlideNaviOnlyFullScreenbool Ver. 4.0+ Pfeile für Vor und Zurück nur um Vollbild einschalten.
gallerySlideNaviMarginint Ver. 4.0+ Abstand der Vor und Zurück Pfeile vom Rand des Players.
gallerySlideNaviAnmstring Ver. 4.0+ Art der Transition wenn Vor und Zurück Pfeile geklickt werden, mögliche Werte sind 'Center', 'Top', 'Right', 'Bottom', 'Left', 'StretchVert', 'StretchHorz', 'SwipeHorz', 'SwipeVert', 'Vert', 'Horz'
gallerySlideSwipeSpeedint Ver. 4.1.9+ Geschwindigkeit der Transition in ms. beim klicken auf Vor und Zurück Pfeile (gallerySlideNavi) wenn gallerySlideNaviAnm auf 'SwipeHorz' oder 'SwipeVert' gesetzt ist.
gallerySlideTouchSwipearray Ver. 4.2.14+ Einstellungen für Touch-Swipe, die von echten Swipe Geschwindigkeit Geste abhängt.
gallerySwitchQuickbool Ver. 4.1.0+ Aktiviere "Schnellwechsel" für die Galerieartikel. Siehe auch zoomSwitchQuick API
thumbSliderThemestring Ver. 4.3.1+ Theme for axZmThumbSlider galleries located in /axZm/extensions/axZmThumbSlider/skins
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 Create an anonymous function for thumb description in the gallery. $k is the number of the image in the gallery. $pic_list_data is an array containing following information: $pic_list_data[$k]["fileName"], $pic_list_data[$k]["fileSize"], $pic_list_data[$k]["imgSize"], $pic_list_data[$k]["thisImagePath"]

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

You can also create a named function right here and define $zoom['config']['galleryThumbDesc'] = "yourFunctionNameForThumbDescription"; e.g. function yourFunctionNameForThumbDescription($pic_list_data, $k){return $pic_list_data[$k]["imgSize"][0];} The above approach however can not be overwritten in zoomConfigCustom.inc.php, so we use create_function at this place.
galleryThumbFullDescfunction Create an anonymous function for longer thumb description, which will be shown on mouseover the thumb in a gallery.
Option Type Description
useHorGallerybool Horizontale Galerie aktivieren.
galleryHorPicDimstring Größe der Thumbs in der horizontalen Galerie, z.B. '70x70'
galleryHorHideMaxWidthint, bool Ver. 5.0.8+ below this value (player width) horizontal gallery will be hidden in responsive layouts
galleryHorHideMaxHeightint, bool Ver. 5.0.8+ below this value (player height) horizontal gallery will be hidden in responsive layouts
galHorPositionstring 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.
galHorPaddingarray Ver. 4.3.1+ Padding of the horizontal gallery within it's parent container
galHorImgMarginarray Ver. 4.3.1+ Margin of the li elements
galHorThumbDescrbool Ver. 4.3.1+ Show description element within thumbs
galHorPreloadImgstring Ver. 4.3.1+ Preloader image located in /axZm/icons directory
galHorOptarray Ver. 4.3.1+ Settings for the horizontal gallery, full documentation can be found at www.ajax-zoom.com/axZm/extensions/axZmThumbSlider/
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.
galleryScrollToCurrentbool Beim Start den Thumb in der Galerie suchen und bis dorthin scrollen.
galleryWidthmixed Ver. 4.3.1+ Width of the gallery container, integer (px) e.g. 144 or "auto" as string
galleryImgMarginarray Ver. 4.3.1+ Margin of the li elements
galleryThumbDescrbool Ver. 4.3.1+ Show description element within thumbs
galleryPreloadImgstring Ver. 4.3.1 Preloader image located in /axZm/icons directory
galleryHideMaxWidthint Ver. 4.3.6 Below this value (player width) vertical gallery will be hidden in responsive layouts. Set to false to disable.
galleryHideMaxHeightint Ver. 4.3.6 Below this value (player height) vertical gallery will be hidden in responsive layouts. Set to false to disable.
galleryOptarray Ver. 4.3.1+ Settings for the vertical gallery, full documentation can be found at www.ajax-zoom.com/axZm/extensions/axZmThumbSlider/

"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',
galFullImgMarginarray Ver. 4.3.1+ Margin of the li elements
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
galFullThumbDescrbool Ver. 4.3.1+ Show description element within thumbs
galFullPreloadImgstring Ver. 4.3.1+ Preloader image located in /axZm/icons directory
galFullOptarray Ver. 4.3.1+ Settings for the Inline / Full gallery, full documentation can be found at www.ajax-zoom.com/axZm/extensions/axZmThumbSlider/

Vor, Zurück und Play Buttons für Galerien.

Option Type Description
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;
spinMaxRowsint Ver. 4.2.1+ max levels of 3D spin, default: 15
spinMaxFramesint Ver. 4.2.1+ max frames per row, default: 360
dragToSpinarray Ver. 4.2.1+ adds image telling that the the user can "drag and this way spin the 360"; this option is an array with different settings, e.g. you can set to display this message after certain about of seconds and instantly hide it later.
spinNoInitarray Ver. 4.2.1+ if activated the 360 spin will be preloaded upon a click or you can start preloading with $.fn.axZm.spinPreload() API. The user will get a configurable message which is set as png image and adjusin this array.
spinSmoothingarray Ver. 4.2.2+ if activated inertia force for 360 will be emulated when the user spins an object with the mouse or finger.
spinKeepRotatearray Ver. 4.3.1+ keep rotate after smoothing
spinSnapKeysarray Ver. 4.3.1+ Snap to specified keys after spinning with velocity
spinSnapNextKeybool Ver. 4.3.1+ Snap to nearest key specified in "spinSnapKeys" options without velocity spinning
spinAndDragbool Ver. 4.2.3+ pan view vertically while spinning horizontally
spinAndDragTouchbool Ver. 4.3.1+ Enable spinAndDrag also for touch devices
spinDragOnlybool Ver. 4.3.1+ Only drag vertically without spinning, can be also enabled and disabled by changing the JS value of jQuery.axZm.spinDragOnly
spinPanRightMouseBtnbool Ver. 4.2.3+ if in spin mode right click and drag will pan instead of spin
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 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 tuenin vertical position and then turn the images by 90 degree.
firstAxismixed First Z axis (multirow) to be displayed. Can be overridden by passing $_GET['firstAxis'] in query string. Possible values: auto (middle), number of subdir, name of subdir.
spinDemobool 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 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: .axZm_spinPreloaderHolder, .axZm_spinPreloaderBar, .axZm_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.
spinCirclePreloaderarray Ver. 4.2.4+ array with settings for the new 360 circle spin preloader indicator, IE < 9 defaults to horizontal preloader
spinFilesExcludeFilterarray Ver. 4.2.4+ define which files should be not selected from a folder with 360 images. If a string from the array contains in the filename of a 360 image, then it will be not included into 360 images set. Particularly this is useful if you have e.g. low resolution images and high resolution images in the same folder. AJAX-ZOOM does not need low resolution images and for example if your low resolution images contain "ld" in the filename, then you can set $zoom['config']['spinFilesExcludeFilter'] = array('ld'); Please note however that if you already have such a structure coming from a different 360 script, then your "high resolution images" might be not of the best quality and resolution available which will lead to not optimal results within AJAX-ZOOM.
cueFramescsv, bool CSV (comma-separated values) 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 Typ der Animation, wenn zum bestimmten Frame gedreht wird, siehe auch cueFrames
spinOnClickbool If activated and spin tool is selected clicking on the image will result into spinning the object, otherwise it will zoom to 100%.
spinAreaDisablebool 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
360 Grad Schieberegler (Slider)
spinSliderbool UI Slider als zusätzliches Bedienelement einschalten.
spinSliderHeightint Höhe bzw. Dicke des Sliders in px.
spinSliderHandleSizeint Höhe bzw. Dicke des Schiebers in px.
spinSliderWidthstring Breite des sliders. Prozent oder pixel.
spinSliderParentstring Ver. 5.0.5+ Id of the parent container for spin slider if not fullscreen, e.g. axZm_spinSliderParent; set false to disable
spinSliderPlayButtonbool Play / Pause Button neben dem Slider.
spinSliderReversebool Ver. 4.0+ Reverse direction of the slider.
spinSliderClassstring Ver. 4.2.5+ Css class name for spin slider
spinSliderMouseOverbool Ver. 4.3.1+ Hide spin slider when mouse is not over the player

Navigationsleiste

Liste mit allen Buttons, auch aus anderen Überschriften:

naviPanButSwitch, naviSpinButSwitch, naviCropButSwitch, naviZoomBut, naviPanBut, naviRestoreBut, mapButton, galFullButton, fullScreenNaviButton, help, downloadButton, galleryNavi, galleryPlayButton
Option Typ Beschreibung
displayNavibool Navigationsleiste anzeigen oder ausschalten. Im Vollbildmodus wird sie über fullScreenNaviBar Option gesteuert.
firstModstring 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 Automatisch aus das Schwenk Werkzeug umschalten, wenn das Bild vollständig gezoomt ist.
forceToPanClickDisablebool Ver. 4.2.3+ Disable "forceToPan" when the user chooses a different tool when "forceToPan" is enabled
zoomLogInfoDisabledbool 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: .axZm_zoomLogHolder, .axZm_zoomLog
zoomLogJustLevelbool Nur die Zoomstufe anzeigen. Bei Aktivierung wird zoomLogInfo deaktiviert. CSS: .axZm_zoomLogHolder, .axZm_zoomLogJustLevel
deaktTranspfloat Transparenz der nicht aktiven Buttons, [0-1], z.B. 0.5
disabledTranspfloat Transparenz der Buttons, wenn das Foto kleiner, als die Arbeistsfläche ist, [0-1], z.B. 0.2
Slider für zoom
zoomSliderbool UI Slider für zoomen als zusätzliches Bedienelement einschalten.
zoomSliderHorizontalbool Horizontaler slider einschalten.
zoomSliderHeightint Höhe bzw. Länge des sliders in px.
zoomSliderHandleSizeint Höhe bzw. Dicke des Schiebers in px.
zoomSliderWidthint Breite bzw. Stärke des Sliders in px.
zoomSliderPositionstring Position des sliders. Mögliche Werte: topRight, topLeft, bottomRight, bottomLeft, top, bottom; Ver. 4.0+ hinzugefügt: left, right
zoomSliderMarginVint Vertikaler Abstand des Sliders vom Rand in px.
zoomSliderMarginHint Horizontaler Abstand des Sliders vom Rand in px.
zoomSliderOpacityfloat Durchsichtichkeit des Sliders [0.0 - 1.0], für MSIE ausgeschaltet.
zoomSliderContainerPaddingint 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.
zoomSliderClassstring Ver. 4.2.5+ CSS class name for zoom slider
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.
themeCssstring Ver. 4.3.1+ Theme file located in /axZm/themes/, possible values (extendable) - black, grey, white
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 Typ Beschreibung
mNavi['enabled']mixed Enable mNavi, possible values: true, false or "auto" - only for touch devices, disables regular navigation (displayNavi, fullScreenNaviBar)
mNavi['gravity']string Positioning gravity, possible values: topLeft, topRight, bottomRight, bottomLeft, bottom, top, right, left
mNavi['offsetHorz']int Horizontal offset from the edge of the player.
mNavi['offsetVert']int Vertical offset from the edge of the player.
mNavi['offsetHorzFS']int Horizontal offset from the edge of the player at fullscreen.
mNavi['offsetVertFS']int Vertical offset from the edge of the player at fullscreen.
mNavi['parentID']string ID of the container to place mNavi in none fullscreen mode outside of the player.
mNavi['setParentWidth']bool Sets width of the parent container same as navi container
mNavi['setParentHeight']bool Sets height of the parent container same as navi container
mNavi['fullScreenShow']bool Append mNavi to the player in fullscreen mode; you can also enable fullScreenNaviBar option instead.
mNavi['onlyFullScreen']bool Ver. 4.2.1+ display only at fullscreen mode
mNavi['hover']bool Enables mouse over state of the button, e.g. if $zoom['config']['icons']['mHotspots'] = array('file'=>'button_iPad_hotspots', 'ext'=>'png', 'w'=>50, 'h'=>50); the hover state button is 'button_iPad_hotspots_over.png'
mNavi['down']bool Enables mouse down state of the button, e.g. if $zoom['config']['icons']['mHotspots'] = array('file'=>'button_iPad_hotspots', 'ext'=>'png', 'w'=>50, 'h'=>50); the hover state button is 'button_iPad_hotspots_down.png'
mNavi['dis']bool 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 Typ Beschreibung
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 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 Frames per second for all animations or false
fps2string 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 Typ Beschreibung
scrollbool Zoom mit Mausrad aktivieren. Ver. 4.2.1+ can be switched on runtime now with javascript: $.axZm.scroll = false; // or true
mouseScrollEnablebool Bei aktivierung wird das Browserfenser mitgescrollt. Ver. 4.2.1+ can be switched on runtime now with javascript: $.axZm.mouseScrollEnable = false; // or true
mouseScrollEnableFSbool Separate switch for the above at fullscreen mode
mouseScrollMsgarray Ver. 5.0.11+ if mouseScrollEnable is set to true, show a message that zoom with mouse wheel can be performed by pressing "Alt" or "Ctrl" button on the keybord. CSS: .axZm_ctrlZoomTxt, .axZm_ctrlZoomTxtInner
scrollAnmbool 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 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 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 Typ Beschreibung
zoomDragPhysicsfloat, bool Es wird versucht die Mausbeschleunigung zu messen, so dass beim Schwenken ein Wurfeffekt nachempfunden wird. Ver. 4.2.3+ completly rewritten / fixed. Can be float - max. 1.5 now. Default: 0.75
zoomDragAnmbool 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

Option Typ Beschreibung
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: .axZm_zoomCropCross; Könnte auch jedes andere Bild sein.
zoomSelectionCrossOpfloat Transparenz des Kreuzes, siehe zoomSelectionCross, e.g. 0.75
zoomSelectionModstring Zoom selector mod, possible values 'min' or 'max'.
zoomSelectionPropstring, float or false Proportions of the selector. Possible values:
  • false - disabled. User can select whatever. Nevertheless the final zoom result will fit the box size.
  • box - automatic proportions 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

Ajax Loader

Option Typ Beschreibung
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 Typ Beschreibung
cursorWaitbool System Zeiger für Hintergrundaktivität beim Laden eines Bildes aktivieren.
cursorbool Cursor icons for different states located in /axZm/icon directory
disableAllMsgbool 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 Array mit octalen Werten für Dateiberechtigungen der generierten Bilder, e.g 0644 oder false.
cornerRadiusint Abgerundete Kanten Radius in px. For deaktivating set this option to 0
cornerRadiusNotRoundbool Ver. 4.3.1+ "cornerRadius" option builds a border around the player. If this value is set to true, then the border has no rounded corners
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 Erlauben Thumbnails dynamisch zu generieren, indem die Parameter zu der Datei "/axZm/zoomLoad.php" geschickt werden.
allowDynamicThumbsMaxSizeint 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
dynamicThumbsQualint Ver. 4.2.1+ default jpg quality
dynamicThumbsQualPngarray Ver. 4.2.1+ png quality
dynamicThumbsStructurestring Ver. 4.2.1+ possible values - md5, char, flat (false)
dynamicThumbsStructChmodoctal Ver. 4.2.1+ chmod for the created folders
dynamicThumbsWtrmrkarray Ver. 4.2.2+ a bunch of settings to watermark thumbnails which are created this way
allowAjaxQueryarray Ver. 4.2.1+ settings for querying images by the applications
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.
tapHideExclarray Ver. 4.4.8+ Array with a list of CSS classes or IDs to exclude from hiding when tapHideAll is enabled.
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.
touchDragPageScrollbool Ver. 4.2.5+ Scoll page on vertical touch motions when pan mode is activated and the image is not zoomed. Ver. 4.2.12+ can be float - width of the player compared to window width.
touchPageScollDisablebool Ver. 4.3.1+ Disable page scroll for touch devices
touchDragPageScrollZoomedbool Ver. 4.2.12+ Scroll vertically if image is zoomed and pan mode activated
touchSpinPageScrollbool Ver. 4.2.5+ Scroll page on vertical touch motions when spin mode is activated. Ver. 4.2.12+ can be float - width of the player compared to window width.
touchPageScrollExclstring Ver. 4.2.12+ instantly deactivate vertical page scroll if this value is contained in the string of parent id of AJAX-ZOOM. You can also deaktivate vertical scroll by setting window.az_touchPageNoScroll to true.
disableMultitouchbool Ver. 4.3.1+ Disable multitouch events (ignore not primary events), should be set conditionally with JS by changing the value of jQuery.axZm.disableMultitouch
autoHideEllDelayint Ver. 4.3.1+ Ellements like mNavi or zoom slider can be configured to hide if mouse is not over the player. This option determins the delay for hiding.
touchSettingsarray 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+
zCbool Ver. 4.2.1+ in the "unlimited" version check for tiles being in zoomify format
jsonInfobool Ver. 5.0.9+ store information about source image and (cache, tiles...) images which are generated by AJAX-ZOOM for this image in a json file, located under $zoom['config']['jsonPath'] / $zoom['config']['jsonDir'] in subdirectories All files are generated and updated dynamically even if cached images are already present before this option were enabled The advantage of it is that when source images and AJAX-ZOOM - generated images are stored on network or external hard drives, the image size and existence of AJAX-ZOOM - generated images are stored in json file and are not needed to be read from filesystem

Wasserzeichen

mit einem PNG Bild, Text oder beides

Option Typ Beschreibung
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'; Das PNG Bild mit Wasserzeichen kann sich überall befinden, einfach den absoluten Pfad angeben, z.B. '/pic/watermarks/watermark.png';
wtrmrk['watermarkTiles']bool Wenn Bildkacheln direkt geladen werden (pyrLoadTiles ist eingeschaltet), dann können beim aktivieren dieser Option alle Bildkacheln mit einem Wasserzeichen versehen werden.
wtrmrk['watermarkTilesFill']bool Ver. 4.2.2+ Watermark all over the image with $zoom['config']['wtrmrk']['file']
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.
wtrmrk['initPicFill']bool Ver. 4.2.2+ Watermark all over the image with $zoom['config']['wtrmrk']['file']
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.
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 Typ Beschreibung
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
tileRetryTimeint Ver. 4.2.1 - delete make.txt file indicating that tiles are being generated and retry
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
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 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 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 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 Wenn pyrLoadTiles aktiviert ist, die Einblendezeit der Bildkachlen in ms.
pyrTilesFadeLoadint Wenn pyrLoadTiles aktiviert ist, die Einblendezeit der Bildkachlen während verschieben (panning) in ms.
pyrTilesForcebool Ver. 4.3.1+ byload image tiles even if it is not needed

Automatisch Generierte Optionen

Option Typ Beschreibung
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

pyrLoadTiles muss eingeschaltet werden.

Option Typ Beschreibung
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

Volles Bild herunterladen

Option Typ Beschreibung
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.

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.

Wenn die Pfade zu den Beldern relative definiert werden, also als ./ oder ../, dann können unter Umständen etwa den Browser Einstellungen von PHP falsch interpretiert werden! Im produktiven Einsatz empfielt sich also immer absolute Pfade, also beginnend mit /, anzugben.

Ein sehr gutes Beispiel welches all diese Methoden veranschaulicht ist example27.php

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:

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

	<script type="text/javascript">
	// Create new object
	var ajaxZoom = {};

	// Path to the axZm folder, relative or absolute
	ajaxZoom.path = "../axZm/";

	/*
	Custom parameters including zoomData and example (overrides some default options in /axZm/zoomConfigCustom.inc.php)

	If you need to change something the method interpreting the zoomData string is called "uncompress" and it can be found in '/axZm/axZmH.class.php';
	So in fact the compressing and obfuscating / encrypting procedure (see above strtr(base64_encode...) can be changed as you like,
	as long as "uncompress" method interprets this string back into php array.
	*/
	ajaxZoom.parameter = "zoomData=<?php echo $_GET['zoomData'];?>&example=13";

	// The id of the element where ajax-zoom has to be loaded into
	ajaxZoom.divID = "test";
	</script>

	<script type="text/javascript" src="../axZm/jquery.axZm.loader.js"></script>

zoomData als CSV String (Character "|" Separated Value)

Example integration - HTML / Javascript:

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

	<script type="text/javascript">
	// Create new object
	var ajaxZoom = {};

	// Path to the axZm folder, relative or absolute
	ajaxZoom.path = "../axZm/";

	/* Custom parameters including zoomData and example (overrides some default options in /axZm/zoomConfigCustom.inc.php)
	For pure html pages or none PHP dynamic pages like .NET you could just wirte the following / respectively have the folloing as output:
	ajaxZoom.parameter = "zoomData=/pic/zoom/animals/test_animals1.png |/pic/zoom/boutique/test_boutique1.png&example=13";

	// The id of the element where ajax-zoom has to be loaded into
	ajaxZoom.divID = "test";

	</script>

	<script type="text/javascript" src="../axZm/jquery.axZm.loader.js"></script>

zoomDir

Alle Photos in einem Verzeichnis auswählen

Example integration - HTML / Javascript:


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

	<script type="text/javascript">
	// Create new object
	var ajaxZoom = {};

	// Path to the axZm folder, relative or absolute
	ajaxZoom.path = "../axZm/";

	// Custom parameters including zoomDir and example (overrides some default options in /axZm/zoomConfigCustom.inc.php)
	ajaxZoom.parameter = "zoomDir=/pic/zoom/animals&example=13";

	// The id of the element where ajax-zoom has to be loaded into
	ajaxZoom.divID = "test";
	</script>

	<script type="text/javascript" src="../axZm/jquery.axZm.loader.js"></script>

Einbindung in HTML/PHP

Bitte orientieren Sie sich bitte an den Beispielen...

Stapelverarbeitung

zoomBatch.php is eine Datei mit der Sie grosse Anzahl der Bilder mit wenigen Klicks für den Einsatz in AJAX-ZOOM vorbereiten können und dabei einen visuelen Feedback erhalten.

Da jedoch alles auch on-the-fly beim ersten Aufruf geschehen kann, ist dieser Schritt nicht unbedingt 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.

Ab Ver. 4.2.1+ ist es möglich Verzeichnisse und deren Unterverzeichnisse mit einem Klick durchzulafen.

Vor der Verwendung von zoomBatch.php müssen Sie es mit einem Editor öffnen und einige Variablen einrichten, einschließlich des Passworts für den Zugriff auf die Datei über den Browser.

API

On demand API can be extended.

JavaScript Vars

Es gibt viele andere nützliche Variablen. Wenn Sie eine anspruchsvolle Anwendung entwickeln - bitte fragen Sie.

Var Beschreibung
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 verfügt über viele Callbacks, mit denen benutzerdefinierte Anwendungen entwickelt werden können.

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

Callback Beschreibung
onBeforeStart Triggers just after jQuery.fn.axZm starts initializing.
onStart Triggers while initialization after passing some tests.
onImageLoad Ver. 4.2.12+ Triggers after any new image (for 360 the first image) is loaded. onImageLoad is triggerend before onLoad.
onLoad Triggers after first image is loaded.
onZoom 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.
onSpinStart Ver. 4.3.1+ Triggers when the user starts spinning with the mouse or finger
onSpinMove Ver. 4.3.1+ Triggers when the user spins with the mouse or finger
onSpinEnd Ver. 4.3.1+ Triggers when the user ends spinning with the mouse or finger
onSpinEndRotate Ver. 4.3.2+ Triggers when because of mouse acceleration or swipe farther rotation is triggered. When this callback returns true, then the default internal action does not take place. So you can override and do something different. The first parameter return object with useful information.
onSpinAnmStart Ver. 4.3.1+ Triggers when spinSmoothing is activated and instant rotation starts or jQuery.fn.axZm.spinRotate API is used.
onSpinAnmEnd Ver. 4.3.1+ Triggers when spinSmoothing is activated and instant rotation ends or jQuery.fn.axZm.spinRotate API is used.
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.
onDragEndAcc Ver. 4.3.1+ If zoomDragPhysics is activated this callback will be triggered after the animation is done.
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 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 Triggers after fullscreen view is ready.
onFullScreenResizeEnd Triggers after window resize at fullscreen mode.
onFullScreenClose Triggers at the beginning of restore process from fullscreen to notmal mode.
onFullScreenCloseFromRel 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
onFullScreenSpaceAddedFirst Ver. 4.3.8+ Triggers when extra space in fullscreen mode is created for the first time.
onFullScreenSpaceRemove Ver. 4.3.8+ Triggers before extra space in fullscreen mode is removed.
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 Triggers while zooming with the slider.
onZoomOutButtonStart Triggers when hitting the button for zoom out or using API method for this.
onZoomOutButtonEnd Triggers when hitting the button for zoom out or using API method for this.
onZoomInButtonStart Triggers when hitting the button for zoom in or using API method for this.
onZoomInButtonEnd Triggers when hitting the button for zoom in or using API method for this.
onMouseWheelZoomIn Triggers on zooming with the mouse(wheel).
onMouseWheelZoomOut Triggers on zooming with the mouse(wheel).
onButtonClickMove_N Triggers when panning (Top) with the buttons or using API method for this.
onButtonClickMove_E Triggers when panning (Right) with the buttons or using API method for this.
onButtonClickMove_S Triggers when panning (Bottom) with the buttons or using API method for this.
onButtonClickMove_W Triggers when panning (Left) with the buttons or using API method for this.
onSpinPreload Triggers after each image of the spin is preloaded.
onSpinPreloadEnd Triggers when all initial images for 360 or 3D are preloaded.
onMapMouseOverClick Triggers on click when zoom map selector is dragged by mouseover.
onMapMouseOverDbClick Triggers on double click when zoom map selector is dragged by mouseover .
onVertGalLoaded 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!
onSwipe Ver. 4.2.6+ Triggers after swiping with the finger and sliding to next image. First argument is the direction, e.g. 'right' or 'left'; of the function returns false sliding to next image does not occure. Implemented e.g. in this example

JavaScript Methoden

Es werden mehrere API-Methoden bereitgestellt, um es einfacher zu machen, AJAX-ZOOM zu erweitern und es mit anderen Webanwendungen zu integrieren

jQuery.fn.axZm (options)

Die Hauptinitialisierungsfunktion. Alle anderen Optionen sind in der Datei zoomConfig.inc.php gesetzt! Manche können auch über die Callbacks eingestellt werden.

Parameter:

Example:

See this example.
jQuery.fn.axZm.addCallback(name, obj)

Ver. 4.2.1 Add callback function

Parameter:

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

Example:

See example14.php

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

Sets a visible image area selection

Parameter:

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

Example:


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

Removes a visible image area selection

Parameter:

  • @param bool effect - adds a nice effect

Example:


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

Restarts image area for tool selection

jQuery.fn.axZm.changeTheme (theme)

Change theme css file introduced in Ver. 4.3.1, see also themeCss

jQuery.fn.axZm.citeAllInitialPic (opt)

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

Close fullscreen mode

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

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

Parameter:

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

Ver. 4.2.5+ Restore the position previously changed with jQuery.fn.axZm.fullScreenRelChange

Parameter:

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

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

Parameter:

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

Example:


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

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
    • top: Ver. 4.2.1+ gravity top, integer as offset or true (0)
    • right: Ver. 4.2.1+ gravity right, integer as offset or true (0)
    • bottom: Ver. 4.2.1+ gravity bottom, integer as offset or true (0)
    • left: Ver. 4.2.1+ gravity left, integer as offset or true (0)
    • callback: function when finished

Example:


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

Ver. 4.0+ Hide "Inline Gallery"

jQuery.fn.axZm.fullGalShow ()

Ver. 4.0+ Show "Inline Gallery"

jQuery.fn.axZm.fullGalToggle ()

Toggle "Inline Gallery"

jQuery.fn.axZm.getAllCallBackNames ()

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',
			daType: 'script',
			// Make sure jquery.json plugin is loaded
			url: '../axZm/plugins/JSON/jquery.json-2.3.min.js',
			complete: function(){
				// Assign to each callback console.log function with possibly passed parameter converted to string
				jQuery.each($.fn.axZm.getAllCallBackNames(), function(i, name){
					jQuery.axZm.userFunc[name] = function(info){
						console.log('AZ callback '+name+': '+jQuery.toJSON(info));
					}
				});
			},
			cache: true
		});
	
jQuery.fn.axZm.getBackColor (set, id, callback)

Ver. 4.0+ experimental: retrieve background color of the image

Parameter:

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

Example:


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

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] output coordinates in respect to original image size
[2] - integer, if 1 the input coordinates were not fully above the image

jQuery.fn.axZm.getCurrentZoom ()

Ver. 4.0+ Returns x1, y1, x2, y2 coordinates of current zoom crop

jQuery.fn.axZm.getCurrentZoomLevel ()

Ver. 4.0+ Returns current zoom level, 100 is when image is zoomed to the max

jQuery.fn.axZm.getLastZoomInfo ()

Ver. 4.0+ Returns js object with coordinates of last zooms

jQuery.fn.axZm.getLiveZoom ()

Ver. 4.2.16+ Returns js object with coordinates of zoom

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

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

Ver. 4.1.9+ returns folder and image name of the source image; (the folder does not need to be accessible by JS (over http) and the access can be restricted)

jQuery.fn.axZm.helpToggle (content)

Ver. 4.1.9+ Toggle help layer.

Parameter:

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

Ver. 4.1.9 Show help layer.

Parameter:

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

Ver. 4.1.9 Close help layer.

jQuery.fn.axZm.initFullScreen ()

Start fullscreen mode

jQuery.fn.axZm.installPath ()

Ver. 4.0+ Tries to return the path of /axZm directory.

jQuery.fn.axZm.killInternalGalleries ()

Ver. 4.3.1+ Stop running all internal galleries, see also axZmThumbSlider.

jQuery.fn.axZm.mNaviRebuild ()

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

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

Open AJAX-ZOOM directly at fullscreen mode or fluid / responsive layout (see "rget" 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 similar.

Parameter:

  • @param string path: Absolute path to AJAX-ZOOM directory, e.g. '/axZm/'
  • @param string parameter: Query string to determine which images to load
  • @param object callbacks: JS object containing callback functions
  • @param string relCont: On default the relCont is browser window. You can optionally set some other container ID (e.g. "myAzResponsiveContainer") if needed.
  • @param bool apiFullscreen: Ver. 4.0+ if relCont 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: example21.php

Related:

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

Ver. 4.2.2+ alias jQuery.fn.axZm.openFullScreen

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

Loads a different set of images into AJAX-ZOOM instance

Parameter:

  • @param string query_string: The query string to determine which images to load.
  • @param function callback: 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');">Load different image set</a>
	

For implemention also see example8.php

Related:

jQuery.fn.axZm.zoomSwitch
jQuery.fn.axZm.loadAjax360Type (query_string, callback1, callback2, callback3)

Ver. 4.2.13+ injects new 360 of the same size keeping same zoom level and frame number. Perfect for 360 product configurators.

Parameter:

  • @param string query_string: The query string to determine which 360 to load.
  • @param function callback1: Optional callback function.
  • @param function callback2: Optional callback function.
  • @param function callback3: Optional callback function.

Example:


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

For implemention also see example36.php

Related:

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

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

Parameter:

  • @param object options
  • @option string options.path: Absolute path of AJAX-ZOOM, e.g. '/axZm/'
  • @option string options.parameter: Query string to determine which images to load (see jQuery.fn.axZm.loadAjaxSet)
  • @option string options.divID: rget 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)

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)

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

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 running. For 360 / 3D all initial images are preloaded at the beginning. If you want to preload initial images for the gallery || 360 || 3D which is not loaded but might be loader by users action, you can do so with jQuery.fn.axZm.citeAllInitialPic()

jQuery.fn.axZm.preloadAllGalleryThumbs ()

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

jQuery.fn.axZm.reloadGallery (notScrollToCurrent)

Ver. 4.0+ Reload thumbs in vertical gallery

jQuery.fn.axZm.reloadHorGallery (notScrollToCurrent)

Ver. 4.0+ Reload thumbs in horizontal gallery

jQuery.fn.axZm.removeDragToSpinMsg (fadeout)

Ver. 4.2.1+ Reload thumbs in horizontal gallery

Parameter:

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

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

Parameter:

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

Example:


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

Ver. 4.2.9+ Resize and reset map.

Parameter:

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

Example:


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

Completely removes AJAX-ZOOM

Example:


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

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

Parameter:

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

Example:


		<a href="#" 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)

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.spinBySmooth (x, z, duration, easing, callback, zoomTo)

Ver. 4.2.16+ Spin to any direction by a number of frames.

Parameter:

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

Example:


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

Start spinning 360 object.

Parameter:

  • @param int rounds: number of rounds the object will be spinning.
  • @param int roundTime: time in ms for one round.
  • @param bool mouseOverStop: stop spinning when mouse is over the image.
  • @param bool oposit: Ver. 4.1.9+ spin in opposite 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 ()

Stop spinning 360 object.

Example:


		<a href="#" onClick="jQuery.fn.axZm.spinStop();">Stop spin</a>
	
jQuery.fn.axZm.spinPlayToggle ()

Ver. 4.1.11+ Toggles spin / pause.

Example:


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

Spin 360 degree object to a particular frame number. Ver. 4.0+ extended to spin within any frame in 3D object.

Parameter:

  • @param int frameNumber: 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.spinRotate (opt)

Ver. 4.2.2+ an easy method to spin in a different ways certain rounds applying adjustable easing

Parameter:

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

Example:


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

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

Starts preloading 360 degree images, useful if firstMod is not set to 'spin' where spinInit triggers instantly. Can be triggered with the onLoad callback.

jQuery.fn.axZm.startPlay ()

Ver. 4.0+ Start slideshow

jQuery.fn.axZm.switchCrop ()

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

Example:


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

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

Example:


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

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

Example:


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

Ver. 4.2.3+ returns current state

Example:


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

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 elements which should not be hidden

Example:


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

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

Example:


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

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

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

Parameter:

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

Example:


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

Triggers zoom in

Parameter:

  • @param object options
  • @option string motion: Transition type, e.g. 'swing'
  • @option int speed: Duration in ms, e.g. 1000
  • @option int pZoom: percentage of zoom in, e.g. 125
  • @option int ajxTo: Time in ms after which ajax call is triggered, e.g. 750
  • @option bool stepZoom: 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)

Triggers zoom out

Parameter:

  • @param object options
  • @option string motion: transition type, e.g. 'swing'
  • @option int speed: duration in ms, e.g. 1000
  • @option int pZoom: percentage of zoom out, e.g. 125
  • @option int ajxTo: time in ms after which ajax call is triggered, e.g. 750
  • @option bool stepZoom: 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)

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)

Switch to next or previous 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 implemention see also this example

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

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

Parameter:

  • @param mixed zoomID - The ID (key) of the $pic_list_array, see defining the images. zoomID can also be the filename contained in the gallery!
  • @param string galleryFadeInAnm: 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 implemention see alsothis example

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

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

Parameter:

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

Example:


		<a href="#" 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)

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
    • @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 implemention see example10.php extensive example.

Related vars:

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

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

Custom JavaScript function:

	function getZoomParam(form){
		if (jQuery.axZm){
			var fields = ['x1', 'y1', 'x2', 'y2'];
			if (jQuery.axZm.lastZoom){
				jQuery.each(jQuery.axZm.lastZoom, function(k, v){
					jQuery('#'+form+' input[name=z_'+k+']').val(Math.round(v));
				});
			}
			if (jQuery.axZm.lastSel){
				jQuery.each(jQuery.axZm.lastSel, function(k, v){
					jQuery('#'+form+' input[name=s_'+k+']').val(Math.round(v));
				});
			}
		}
	}
	
HTML:

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

JavaScript hotspots methods

Ver. 4.0+ einige Methoden, um Hotspots auf 2D, 360 und 3D zu handhaben

jQuery.fn.axZm.createNewHotspot (param)

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 conin white spaces, default: random string
  • @param bool param.draggable: set hotspots to be draggable / resizable 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 function applied with 100ms timeout
  • @param bool param.noInit: by setting this option to true this API function will update the jQuery.axZm.hotspots object but will not render / rerender them; this can be done manually with jQuery.fn.axZm.initHotspots; useful if you want to create many hotspots on the fly in a loop and render all at once after creation, default: false
  • @param object param.posObj: object containing coordinates of the hotspot. Because the same hotspot can be present at more than one frame the input of the file name or ID is mandatory, see example below.
  • @param object param.settings: a hotspot can be configured with a variety of other settings. This list of possible settings can be extended with new releases. You can put any settings into this object except "name" and "position" as they are set in this API by param.name and param.posObj (see above); You can also investigate the defaults of the settings object with this API: jQuery.fn.axZm.getHotspotDefaults;

Example:


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

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

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

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

Notes:

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


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

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

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

Ver. 4.2.1+ Convert hotspot positions object from % to px values related to the source image dimensions

Parameter:

  • @param object pos: position object

Example:


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

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)

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

Ver. 4.0+ Returns all hotstpot configuration options as js object

Example:


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

Ver. 4.2.1+ "manually" remove all tooltips from the hotspots

Example:


		<a href="#" onClick="jQuery.fn.axZm.removeAllToolTips()">removeAllToolTips</a>
	
jQuery.fn.axZm.setHotspotDefaults (obj)

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="jQuery.fn.axZm.setHotspotDefaults({"hotspotImage": "hotspot64_blue.png"})">Change defaults</a>
	
jQuery.fn.axZm.getHotspotObj (withDefaults, stringifyFunctions, imgNames)

Ver. 4.0+ Returns hotstpot object that can be saved as JSON

Parameter:

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

Example:


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

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:


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

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

Ver. 4.0+ Hide hotspots

Example:


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

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)

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)

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)

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)

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)

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 determined instantly depending on hotspots size. The hotspot will be visible as a whole with the margin determined 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)

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

Parameter:

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

Example:


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

Ver. 4.0+ Show hotspots

Example:


		<a href="#" onClick="jQuery.fn.axZm.showHotspotLayer()">Show hotspots</a>
	
jQuery.fn.axZm.toggleHotspotLayer ()

Ver. 4.0+ Toggle hotspots

Example:


		<a href="#" onClick="jQuery.fn.toggleHotspotLayer()">Toggle hotspots</a>
	

JavaScript Hotspots Optionen

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

Key Default Beschreibung
shape 'point' Shape of the hotspot. Possible values "point" or "rect". Type: bool
enabled true State of defined hotspot. Possible values true and false. Type: bool
width 32 Width of the hotspot image, only applied if shape value is "point". Type: integer
height 32 Height of the hotspot image, only applied if shape value is "point". Type: integer
gravity 'center' Hotspot gravity relative to its position. Possible values: 'center', 'topLeft', 'top', 'topRight', 'right', 'bottomRight', 'bottom', 'bottomLeft', 'left'. Only applied if shape value is "point". For landmarks set to "top"! Type: string
offsetX 0 Adjustment of hotspots horizontal visual position. Only applied if shape value is "point". Type: integer
offsetY 0 Adjustment of hotspots vertical visual position. Only applied if shape value is "point". Type: integer
padding 0 Padding of the box with hotspot image and/or text. Type: integer
opacity 1 Default opacity, disabled in IE < 9; Type: float <= 1.0
opacityOnHover 1 Opacity on mouse hover, disabled in IE < 9; Type: float <= 1.0
backColor 'none' Background color. Type: string
zIndex 1 zIndex of the hotspot. Type: integer
borderWidth 0 CSS border width. Type: integer
borderColor 'red' CSS border color. Type: string
borderStyle 'solid' CSS border style, e.g. 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset' or combinations of them. Type: string
cursor 'pointer' Mouse cursor. Type: string
zoomRangeMin 0 Min zoom level for hotspot to be shown. Type: 0 <= integer <= 100
zoomRangeMax 100 Max zoom level for hotspot to be shown. Type: 0 <= integer <= 100
hotspotImage 'hotspot64_green.png' PNG image for the hotspot located in /axZm/icons directory, only applied if shape value is "point". Image can be any absolute path with and without http. Type: string
hotspotImageOnHover false PNG image for the hotspot on mouse hover, only applied if shape value is "point". Image can be any absolute path with and without http. Type: string
hotspotClass false Instead of using png icons for hotspots you could also use CSS class, e.g. "axZm_cssHotspot" as an example. You could also use two CSS classes, e.g. "axZm_cssHotspot axZm_pulse" will result in a pulsing css hotspot. Type: string
hotspotClassOnHover false Additional CSS class(es) added onmouseover. Type: string
hotspotText false Text puten direct over the hotspot image, can be for example a number if shape value is point; can be also HTML. Type: false or string
hotspotTextFill false If shape value is "rect" the rectange does not capture mouse events like click. Setting this value to true will set the inner box to 100% height capturing all events except mousescroll for zooming. Any CSS can be overriden with hotspotTextCss option, see below. Type: bool
hotspotTextClass false Additionally to CSS class ".axZmHotspotText" add on ther CSS class to hotspotText layer. Type: false or string
hotspotTextCss {} Additionally to CSS class ".axZmHotspotText" CSS which is added to hotspotText layer. Type: object
hotspotObjects {} Any number of absolutely positioned layers directly inside the hotspot if shape value is "rect". Type: object
altTitle false Show system like tootip by mousehover if main tooltip is triggered on click (toolTipEvent); CSS class: axZmHoverTooltip; Type: false or string
altTitleClass false CSS class for altTitle instead of axZmHoverTooltip class. Type: false or string
altTitleAdjustX 20 Horizontal offset of the altTitle. Type: integer
altTitleAdjustY 20 Vertical offset of the altTitle. Type: integer
labelTitle false Sticky label (or tooltip) at any position near a hotspot, accepts HTML. Type: string
labelGravity 'left' Label gravity, possible values: 'topLeft', 'topLeftFlag1', 'topLeftFlag2', 'top', 'topRight', 'topRightFlag1', 'topRightFlag2', 'right', 'rightTopFlag1', 'rightTopFlag2', 'rightBottomFlag1', 'rightBottomFlag2', 'bottomRight', 'bottomRightFlag1', 'bottomRightFlag2', 'bottom', 'bottomLeft', 'bottomLeftFlag1', 'bottomLeftFlag2', 'left', 'leftTopFlag1', 'leftTopFlag2', 'leftBottomFlag1', 'leftBottomFlag2', 'center'. Type: string
labelBaseOffset 5 Auto offset in all directions. Type: integer
labelOffsetX 0 Horizontal offset. Type: integer
labelOffsetY 0 Vertical offset. Type: integer
labelClass false CSS class instead of axZmHotspotLabel. Type: false or integer
labelOpacity 1 Opacity level. Type: float <= 1.0
toolTipTitle false Title shown in the tooltip; value can be also a function which returns a string or HTML; in case the value is a function the first parameter passed to it is an object with all configs of this hotspot including name. Type: false, string or function
toolTipHtml false Text or html inside tooltip, as idea it can be also iframe, e.g. <iframe src="http://www.ebay.de" scrolling="no" width="100%" height="100%" frameborder="0"></iframe> value can be also a function which returns a string or HTML; in case the value is a function the first parameter passed to it is an object with all configs of this hotspot including name. Type: false, string or function
toolTipAjaxUrl false Url for toolTipHtml get from AJAX request (not cross site, for cross site use an iframe inside toolTipHtml); Type: false or string
toolTipWidth 250 Width of the tooltip, ignored when toolTipGravity is set to fullsize or fullscreen! Type: integer
toolTipHeight 120 Min height of the tooltip, ignored when toolTipGravity is set to fullsize or fullscreen! Type: integer
toolTipGravity 'hover' Tooltip gravity, possible values: 'hover', 'fullsize', 'fullscreen', 'topLeft', 'top', 'topRight', 'right', 'bottomRight', 'bottom', 'bottomLeft', 'left'. The difference between 'fullsize' and 'fullscreen' is that 'fullsize' refers to players dimensions, whereas 'fullscreen' to window size. Type: string
toolTipGravFixed false Applies fixed position to toolTipGravity except 'fullsize', 'hover' turns into centered position. Type: bool
toolTipFullSizeOffset 40 toolTipGravity fullsize uses maximal available player / window width and height. This is the margin to the edges if e.g. toolTipGravity is 'fullscreen', 'fullsize' or toolTipGravFixed option is set to true, so the fixed position is relative to the player size. Type: integer
toolTipTitleCustomClass false Use specific classname instead of axZmToolTipTitle. Type: false or string
toolTipCustomClass false Use specific classname instead of axZmToolTipInner. Type: false or string
toolTipAdjustX 10 Horizontal offset. Type: integer
toolTipAdjustY 10 Vertical offset; Type: integer
toolTipAutoFlip true Flip tooltip horizontaly / vertically depending on best fit. Type: bool
toolTipOpacity 1.0 Opacity of the tooltip. Type: float <= 1.0
toolTipFade false Fade tooltip time in ms. Type: false or integer
toolTipEvent 'click' 'mouseover' or 'click', defaults to 'click' on touch devices. Type: string
toolTipClickClose true When clicked on the hotspot with already opened toolTip from the same hotspot, the toolTip will be closed. Type: bool
toolTipHideTimout 1000 If toolTipEvent is 'mouseover' this setting allows to move the cursor to the tooltip within this time. Type: integer
toolTipDraggable true Set tooltip to be draggable. toolTipTitle has to be defined because this is the handle, can be an empty div. Type: bool
toolTipCloseIcon 'fancy_closebox.png' PNG image for close button located in /axZm/icons directory. Shown if toolTipEvent is 'click' and touch devices. Can be absolute image path, also with http; Type: string
toolTipCloseIconPosition 'topRight' Position of the close icon, possible values are: 'topLeft', 'topRight', 'bottomRight' and 'bottomLeft'. Type: string
toolTipCloseIconOffset false Offset / position of the close button icon. If false the offset is set instantly. An integer sets depending on toolTipCloseIconPosition - top, bottom or left, right position to this number. If object, e.g. {"right": 20, "top": 0} toolTipCloseIconPosition is ignored. Type: false, integer or object
toolTipCloseIconMouseOver false Show close button also if toolTipEvent is 'mouseover'. Type: bool
toolTipOverlayShow false Show overlay when tooltip window pops up. Type: bool
toolTipOverlayOpacity 0.75 Overlay opacity. Type: float <= 1.0
toolTipOverlayColor '#000000' Overlay color. Type: string
toolTipOverlayClickClose false Close tooltip by clicking on the overlay. Type: bool
expTitle false Title for the expandable overlay. Type: string
expHtml false Besides HTML or your text you could also load external content in iframe! The prefix for the source is "iframe:" e.g. to load an external page simply put something like this in the descripion: "iframe://www.some-domain.com/123.html" To load a YouTube video you could put this (replace eLvvPr6WPdg with your video code): "iframe://www.youtube.com/embed/eLvvPr6WPdg?feature=player_detailpage" To load some dynamic content over AJAX use "ajax:" as prefix, e.g. "ajax:/test/some_content_data.php?req=123". Type: string
expFullscreen false If true, the overlay will open at fullscreen (window). Type: bool
href false Simple link for the hotspot. Type: string
hrefTarget '_blank' Target for href (simple link), possible values: _blank (new window), anything else is same window. Type: string
click null Your custom click event function, e.g. simple fancybox gallery:
					
jQuery.fancybox(
[{
	'href': '/path/some/image1.jpg',
	'title': 'Description 1 image'
},{
	'href': '/path/other/image2.jpg',
	'title': 'Description 2 image'
}], {
	'padding': 0,
	'transitionIn': 'none',
	'transitionOut': 'none',
	'type': 'image',
	'titlePosition': 'over',
	'changeFade': 0
});
AJAX-ZOOM does not require fancybox, so fancybox JavaScripts and CSS files need to be included in the document. The above code is just an example of a lightbox usage; it can be any other lightbox where you could define images to be displayed in a simmilar way. Please note that toolTip* options e.g. toolTipHtml would produce a popup which looks simmilar to fancybox, but they do not require fancybox JavaScript and CSS files. Type: function
onRender null Your custom function when a particlar hotspot is added to the DOM; receives name of the hotspot as argument. Type: function
mouseover null Your custom mouseover event function. Type: function
mouseout null Your custom mouseout event function. Type: function
mouseenter null Your custom mouseenter event function. Type: function
mouseleave null Your custom mouseleave event function. Type: function
mousedown null Your custom mousedown event function. Type: function
mouseup null Your custom mouseup event function. Type: function
position {} position is a JS object with the positions of a particular hotspot, e.g.
position: {
	1: {left: 1500, 
		top: 720
	},
	3: {left: 660, 
		top: 710
	},
	4: {left: 760, 
		top: 510
	}
}
The keys (1,2,3 ...) can be numbers (starting from 1, not 0) or filenames of particular frames. In case a key is omited the hotspot will not be shown in that particular frame.

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

PHP Class Methods: axZm.class.php

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

Usage: $axZm->methodName(param)

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

Generate initial image

Parameter:

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

Make all gallery thumbs

Parameter:

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

will make only specific thumb with $zoomID, which is the key of $pic_list_array

Parameter:

  • @param array $zoom - Array with all configuration parameters.
  • @param array $pic_list_array - Array of type $key => $value with images
  • @param int $zoomID - A specified key of $pic_list_array
Ver. < 4.1.9
$axZm -> rawThumb($zoom, $picDir, $imgName, $prevWidth, $prevHeight, $qual, $cache)

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 - If true images will be cached in tempCache folder.
Ver. 4.1.9+
$axZm -> rawThumb($zoom, $options)

Make thumbnails and crops on-the-fly.

Parameter:

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

Create image pyramid with tiles from source image

Parameter:

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

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

Parameter:

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

PHP Class Methods: axZmH.class.php

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

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

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

Parameter:

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

Example:


		$axZmH -> removeAxZm($zoom, 'some_file.jpg', $arrDel = array('In' => true, 'Th' => true, 'gP' => true, 'Ti' => true), $self = false)
	
$axZmH -> checkSlash($input, $mode)

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)

Delete old cache files (only used for example1.php)

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)

Used to determine filetype from string.

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)

Used to determine filename without filetype extension from string.

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, $fType = 'jpg')

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.
  • @param string $fType - Filetype.
  • @return string - new composed filename

Example:


		$newFileName = $axZmH -> composeFileName('my-file.jpg', 'thumb', '_');
		// $newFileName = my-file_thumb.jpg
	
$axZmH -> zoomServerPar($ret, $parExcl, $parExclPreg, $queryString)

Generate query string out of any data ($queryString). This method will take the query string or an array like $_GET and return either an array with parameters and their values ($ret = 'arr') or it will return a new query string ($ret = 'str'). It can be used to set the configuration value parToPass in zoomConfig.inc.php; which is extremly important for AJAX-ZOOM to work properly.

Parameter:

  • @param string $ret - type of return: 'arr' will return a key => value type array. 'str' - a query string
  • @param array, string $parExcl - parameters from query string which have to be excluded.
  • @param array $parExclPreg - optional array like $parExcl, but it searches for specific string in parameter and excludes it if found
  • @param array, string $queryString - input query string, e.g. $_GET - as array or 'myVar1=555&somethElse=aaa' - as string
  • @return string, array

Example:


		$zoom['config']['parToPass'] = $axZmH -> zoomServerPar('str', array('zoomID', 'zoomFile', 'zoomLoadAjax', 'loadZoomAjaxSet'), false, $_GET);
	
$axZmH -> drawZoomStyle($zoom)

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

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', 'mousewheel', 'axZm'

Example:


		// Return all needed js files, except of jquery core and mousewheel plugin
		echo $axZm -> drawZoomJs($zoom, $exclude = array('jquery', 'mousewheel'));
	
$axZmH -> drawZoomJsConf($zoom, $rn = false, $pack = true))

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)

Returns JS for triggering AJAX-ZOOM

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)

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

Datum Versionshinweise
Ver. 5.0.12
Date: 2017-10-17
  • Few improvements and new option for mouseover zoom extension, which allows to show images and other content same way as it is in other examples - directly zoom into images without preview...
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/axZm.css
    • /axZm/extesions/axZmMouseOverZoom/*.*
  • New examples:
Ver. 5.0.11
Date: 2017-10-03
  • New option to show a message that zoom with mouse wheel can be performed by pressing "Alt" or "Ctrl" key.
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/zoomConfig.inc.php
    • /axZm/axZm.css
  • New options:
Ver. 5.0.10
Date: 2017-10-01
  • Regular update
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
Ver. 5.0.9
Date: 2017-09-18
  • New option to cache information about the images and speed up loading times on networks.
  • New files:
    • /pic/json - folder (default value for jsonPath)
  • New options:
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/axZm.class.*.php
    • /axZm/zoomInc.inc.php
    • /axZm/zoomLoad.php
    • /axZm/zoomConfig.inc.php
Ver. 5.0.8
Date: 2017-08-24
  • Revised few examples
  • New options:
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/axZmH.class.php
    • /axZm/themes/*.*
    • /examples/example18.php
    • /examples/example19.php
Ver. 5.0.7
Date: 2017-08-16
  • Revised all examples
  • Updated files:
    • *.*
Ver. 5.0.6
Date: 2017-08-10
  • Revised spinSlider css
  • Updates of several examples
  • Updated files:
    • *.*
Ver. 5.0.5
Date: 2017-08-07
  • Revised spinSlider options and css
  • Updates of few examples
  • Updated files:
    • *.*
Ver. 5.0.4
Date: 2017-08-04
  • Gallery swipe gesture and animation for desktop and mobile devices
  • Drag to spin can be text now (was an image previously)
  • Updates of some examples
  • Updated files:
    • *.*
Ver. 5.0.3
Date: 2017-07-21
  • Fixed rounding issues.
  • Updates of some examples.
  • Removed AJAX-ZOOM logo.
  • Updated files:
    • *.*
Ver. 5.0.2
Date: 2017-07-08
  • Fixed several issues with IE
  • Changed fancybox not to use opacity for background.
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/extensions/axZmMouseOverZoom/*.*
    • /axZm/extensions/axZmThumbSlider/*.*
    • /axZm/plugins/demo/jquery.fancybox/*.*
Ver. 5.0.1
Date: 2017-07-04
  • First 5.x release.
  • Updated files:
    • /*.*
Ver. 4.4.12
Date: 2017-07-03
  • Final 4.x release.
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfig.inc.php
Ver. 4.4.11
Date: 2017-06-29
  • More performance optimizations
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/zoomConfig.inc.php
    • /axZm/extensions/axZmMouseOverZoom/*.*
    • /axZm/extensions/axZmThumbSlider/*.*
Ver. 4.4.10
Date: 2017-06-27
  • Performance release
  • Updated files:
    • /axZm/jquery.axZm.js
Ver. 4.4.9
Date: 2017-06-22
  • Some optimizations
  • Small bugfix in mouseover extension
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZm.css
    • /axZm/extensions/axZmMouseOverZoom/*.*
Ver. 4.4.8
Date: 2017-06-19
  • Image tiles are loaded faster now when zooming into an image so it gets sharp quicker.
  • New Options:
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/zoomConfig.inc.php
    • /axZm/axZm.css
Ver. 4.4.7
Date: 2017-06-14
  • Updated files:
    • /examples/example13.php
    • /examples/example33_vario.php
    • /axZm/jquery.axZm.js
    • /axZm/axZm.iframe.js
    • /axZm/axZm.css
Ver. 4.4.6
Date: 2017-06-11
AJAX-ZOOM iFrame embedding can now be triggered fullscreen on mobile devices including IOS
  • Updated files:
    • /examples/example13.php
    • /examples/example33_vario.php
    • /axZm/jquery.axZm.js
  • New files:
    • /axZm/axZm.iframe.js
  • Removed files:
    • /examples/example13_responsive.php
Ver. 4.4.5
Date: 2017-05-31
  • Updated files:
    • /axZm/extensions/axZmMouseOverZoom
    • /axZm/jquery.axZm.js
Ver. 4.4.4
Date: 2017-04-16
  • Updated files:
    • /axZm/*.*
Ver. 4.4.3
Date: 2017-03-31
  • Updated files:
    • /axZm/*.*
    • /examples/*.*
Ver. 4.4.2
Date: 2017-01-29
  • Fixed sliding direction
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/extensions/axZmMouseOverZoom/*.*
Ver. 4.4.1
Date: 2017-01-26
  • Regular update
  • Updated files:
    • /axZm/*.*
  • Updated options:
Ver. 4.4.0
Date: 2016-12-31
  • Some bigger internal changes
  • Updated files:
    • *.*
Ver. 4.3.21
Date: 2016-12-21
  • Fix Chome error when player is in iframe.
  • Updated files:
    • /axZm/jquery.axZm.js
Ver. 4.3.20
Date: 2016-09-27
  • More IOS 10 fixes
  • Updated files:
    • /axZm/jquery.axZm.js
Ver. 4.3.19
Date: 2016-09-26
  • Small bug correction
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/extensions/jquery.axZm.openAjaxZoomInFancyBox.js
Ver. 4.3.18
Date: 2016-09-25
  • PHP 7 Support
  • Fixes for IOS 10
  • Updated files:
    • /axZm/zoomConfig.inc.php
    • /axZm/axZmH.class.php
    • /axZm/jquery.axZm.js
    • /axZm/zoomInc.inc.php
    • /axZm/axZm.class.ioncube.8.php
    • /axZm/axZm.class.ioncube.9.php
    • /axZm/axZm.class.ixed.php
    • /axZm/zoomBatch.php
    • /axZm/extensions/jquery.axZm.360Gallery.js
Ver. 4.3.17
Date: 2016-08-09
  • Small corrections.
  • Updated files:
    • /axZm/zoomConfig.inc.php
    • /axZm/axZmH.class.php
    • /axZm/jquery.axZm.js
Ver. 4.3.16
Date: 2016-08-03
  • Finalized hotspot editor to be implemented into e-commerce modules / plugins. Added many new features, simplified hotspot positioning, new hotspot connection lines with label etc.
  • Updated files:
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/axZmH.class.php
    • /axZm/jquery.axZm.js
    • /axZm/axZm.css
    • /axZm/extensions/*.*
    • /examples/example33.php
    • /examples/example35.php
  • New files:
    • /axZm/plugins/spectrum
    • /axZm/plugins/demo/prism
Ver. 4.3.15
Date: 2016-07-03
  • Modernized hotspot editor, made it multilingual, added new default content opining option, CSS(3) hotspots.
  • Updated files:
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/axZmH.class.php
    • /axZm/jquery.axZm.js
    • /axZm/axZm.css
    • /axZm/extensions/*.*
    • /examples/example33.php
    • /examples/example33_*.*.php
    • /examples/example35.php
Ver. 4.3.14
Date: 2016-06-18
  • Removed body, html from /axZm/axZm.css (could break layout of some templates e.g. in WP)
  • Fixed a bug for spinTo API when zoomTo parameters had only x1, y1 coordinates
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZm.css
    • /axZm/extensions/jquery.axZm.hotspotEditor.css
    • /axZm/extensions/jquery.axZm.imageCropEditor.css
    • /examples/*.*
Ver. 4.3.13
Date: 2016-06-17
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfig.inc.php
    • /axZm/axZmH.class.php
Ver. 4.3.12
Date: 2016-06-04
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/extensions/jquery.axZm.360Gallery.js
    • /axZm/extensions/jquery.axZm.360Gallery.css
    • /examples/example29_responsive_easy.php
Ver. 4.3.11
Date: 2016-05-24
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/extensions/jquery.axZm.360Gallery.js
    • /axZm/extensions/jquery.axZm.360Gallery.css
Ver. 4.3.10
Date: 2016-05-10
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/axZm.class.ioncube.8.php
    • /axZm/axZm.class.ixed.php
    • /examples/example35.php
    • /extensions/jquery.axZm.imageCropEditor.js
    • /extensions/jquery.axZm.openAjaxZoomInFancyBox.js
Ver. 4.3.9
Date: 2016-05-05
  • Updated files:
    • /axZm/jquery.axZm.js
Ver. 4.3.8
Date: 2016-04-25
  • Integrated 360 "Product Tour" into mouseover zoom (example32.php)
  • Few other changes and bug fixes
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/extensions/*.*
    • /examples/example35.php
    • /examples/example32.php
Ver. 4.3.7
Date: 2016-04-19
  • Fixed a bug where in real IE9 there could be a JS error
  • Few other changes
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/extensions/*.*
Ver. 4.3.6
Date: 2016-04-11
  • New options to dynamically hide vertical gallery in responsive layouts
  • Few other changes
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/zoomConfig.inc.php
    • /examples/example_33_vario.php
  • New files:
    • /examples/example_13_responsive.php
    • /examples/example_22_new.php
  • New Options:
Ver. 4.3.5
Date: 2016-03-31
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/zoomConfig.inc.php
    • /axZm/extensions/axZmMouseOverZoom/*.*
    • /axZm/extensions/axZmThumbSlider/*.*
    • /examples/example32_clean.php
    • /examples/example32_clean_vertical.php
Ver. 4.3.4
Date: 2016-03-17
  • Removed PHP 5.2 support (if you need please contact)
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZm.class.ioncube.8.php
    • /axZm/axZm.class.ixed.php
    • zoomInc.inc.php
  • Removed files:
    • /axZm/axZm.class.ioncube.7.php
Ver. 4.3.3
Date: 2016-03-15
  • Fixed Chrome graphics glitch when switching between images
  • Updated files:
    • /axZm/jquery.axZm.js
Ver. 4.3.2
Date: 2016-03-14
  • Few improvements and updated API
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/extension/jquery.axZm.imageCropLoad.js
    • /axZm/extension/jquery.axZm.imageCropLoad.css
    • /axZm/extension/jquery.axZm.imageCropEditor.js
    • /axZm/extension/jquery.axZm.imageCropEditor.css
    • /axZm/extension/jquery.axZm.expButton.js
    • /axZm/extension/jquery.axZm.expButton.css
    • /examples/example35*.php
  • Updated API:
  • New callbacks:
  • New icons:
    • /axZm/icons/close-16-EA0000.png
    • /axZm/icons/close-16-FFFFFF.png
    • /axZm/icons/{theme}/button_iPad_reverse*.png
Ver. 4.3.1
Date: 2016-03-07
Ver. 4.2.20
Date: 2016-02-16
  • Few bugfixes (Android)
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/extensions/axZmMouseOverZoom/*.*
Ver. 4.2.19
Date: 2016-02-14
  • Few bugfixes
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfig.inc.php
    • /axZm/extensions/axZmThumbSlider/*.*
    • /axZm/extensions/axZmMouseOverZoom/*.*
    • /axZm/axZm.css
    • /axZm/axZmH.class.php
    • axZm.class.ioncube.7.php
    • axZm.class.ioncube.8.php
    • axZm.class.ixed.php
Ver. 4.2.18
Date: 2016-01-16
  • Few bugfixes and new options. Added support for GD to proceed PNG images which are saved as JPG
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/extensions/axZmThumbSlider/*.*
    • /axZm/extensions/axZmMouseOverZoom/*.*
    • /axZm/axZm.css
    • /axZm/axZmH.class.php
    • zoomConfig.inc.php
    • axZm.class.ioncube.7.php
    • axZm.class.ioncube.8.php
    • axZm.class.ixed.php
  • New options:
  • Updated options:
Ver. 4.2.17
Date: 2015-12-07
  • Bugfix (killed touch for iPad / iPhone in 4.2.16)
  • Updated files:
    • /axZm/jquery.axZm.js
Ver. 4.2.16
Date: 2015-12-04
  • Bugfixes!
  • Updated files:
    • /axZm/jquery.axZm.js
Ver. 4.2.15
Date: 2015-11-15
  • Minor bugfixes
  • Updated files:
    • /axZm/jquery.axZm.js
Ver. 4.2.14
Date: 2015-11-11
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/zoomConfig.inc.php
  • New Options:
Ver. 4.2.13
Date: 2015-11-09
Ver. 4.2.12
Date: 2015-11-01
Ver. 4.2.11
Date: 2015-10-28
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomBatch.php
  • New options:
Ver. 4.2.10
Date: 2015-10-04
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/extensions/jquery.axZm.openAjaxZoomInFancyBox.js
    • /axZm/extensions/axZmMouseOverZoom/*.*
    • /axZm/examples/extensions_doc/docu_mouseOverZoom4.inc.html
    • /axZm/examples/example32.php
  • New files:
    • /axZm/examples/example32.php
Ver. 4.2.9
Date: 2015-09-23
  • Several improvements for Android
  • Enhancements for mouseover zoom (example20.php and example32.php)
  • example32.php among other new options added the possibility to enable slider which is instantly enabled for touch devices under certain conditions (adjustable)
  • example20.php (mouseover zoom with tiles) is now fully responsive / adaptive
  • Some new callbacks
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZm.css
    • /axZm/extensions/axZmMouseOverZoom/*.*
    • /axZm/extensions/jquery.axZm.mouseOverZoomTiles.css
    • /axZm/extensions/jquery.axZm.mouseOverZoomTiles.js
    • /axZm/examples/extensions_doc/docu_mouseOverZoom4.inc.html
    • /axZm/examples/extensions_doc/docu_mouseOverZoomTiles.inc.html
    • /axZm/examples/example20.php
    • /axZm/examples/example20_clean.php
    • /axZm/examples/example32.php
Ver. 4.2.8
Date: 2015-09-03
  • Fixed several problems with jQuery UI
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZm.css
Ver. 4.2.7
Date: 2015-07-26
  • Brought back Phalanger ASP.NET AJAX-ZOOM edition, all is working now
  • Updated files:
    • /Bin/*.*
    • /web.config
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.inc.php
    • /axZm/zoomLoad.php
    • /axZm/zoomLoadOCR.php
    • /axZm/extensions/*.*
Ver. 4.2.6
Date: 2015-06-11
  • Small update
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/zoomConfig.inc.php
    • /axZm/zoomConfigCustom.inc.php
    • /axZm/extensions/axZmMouseOverZoom/*.*
    • /axZm/extensions/jquery.axZm.360Gallery.js
    • /axZm/extensions/jquery.axZm.360Gallery.css
    • /examples/extensions_doc/docu_mouseOverZoom4.inc.html
    • /examples/extensions_doc/docu_360Gallery.inc.html
  • New example:
  • New callbacks:
Ver. 4.2.5
Date: 2015-06-04
Ver. 4.2.4
Date: 2015-05-17
  • New options
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/zoomConfig.inc.php
    • /axZm/axZm.css
    • /axZm/extensions/axZmMouseOverZoom/*.*
  • New options:
Ver. 4.2.3
Date: 2015-05-12
  • Added the possibility for 360 to pan vertically with the mouse while spinning. This is a very usefull option especially for portrait oriented images and does no harm to lanscape oriented images. See spinPanRightMouseBtn
  • While spin mode is activated the user can now pan the image with the right mouse button hold down without explicitly changing to the pan mode. See spinAndDrag
  • Fixed and rewritten zoomDragPhysics option
  • Updated files:
    • /axZm/jquery.axZm.js
    • /axZm/axZmH.class.php
    • /axZm/zoomObjects.inc.php
    • /axZm/zoomLoad.php
    • /axZm/zoomConfig.inc.php
  • New options:
  • Updated options:
Ver. 4.2.2
Date: 2015-05-04
  • Fixed a bug causing error messages in demo / evaluation mods
  • Some new options and API
  • Updated files:
    • /axZm/zoomConfig.inc.php
    • /axZm/jquery.axZm.js
    • /axZm/axZm.css
    • /axZm/axZm.class.*.php
    • /axZm/axZmH.class.php
  • New options:
  • Changed options:
    • watermark - added some additional differentiations
  • New API:
Ver. 4.2.1
Date: 2015-03-15
  • Optimizations for mobile devices!
  • All classes and IDs which started with "zoom" have been prefixed with "axZm_", so e.g. "#zoomLayer" is now "#axZm_zoomLayer". This change was necessary because we indeed came into name collision issues e.g. in Magento and third party scripts which were bundled with official Magento release.
  • All examples have been reviewed and enhanced. The goal was to keep away PHP from the frontend so we are now mostly dealing with Javascript which interfaces with AJAX-ZOOM. Therefore there are many new Javascript extensions which do the communication job.
  • The zoomBatch.php which is used to optionally pre-process the images is finally capable to instantly traverse subdirectories with source images.
  • The structure of cached images for various purposes can be now set to write in and read from subfolders e.g. /pic/zoomthumb/a/b/abcd_800x600.jpg
  • The "preview" images can now be configured to have multiple resolutions, see stepPicDim; This feature is especially interesting for 360/3D implementations.
  • Temporary removed asp.net (Phalanger) support.
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

Plugins & Module

Dieser Abschnitt ist verschoben nach www.ajax-zoom.com/index.php?cid=modules

xt:Commerce xtcModified, Gambio, VEYTON
(legacy integration instructions)

This xt:Commerce, xtcModified, Gambio, VEYTON integration instructions on the template level is quite old. If you want to integrate it anyway please note that there might be some adjustments needed! Right now there are no plans to update this integration instructions or make an installable module for xt:Commerce and simmilar.

For German speaking countries who use osCommerce / xt:Commerce based shopping carts we highly recommend to take a look at "Shopware" and our brand new, installable AJAX-ZOOM module for "Shopware" with backend integration. The frontend is based on Mouseover zoom + 360 degree example + videos example.

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

Mögliche Animationseffekte

swing
linear
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

Zoomify Bildkacheln mit AJAX-ZOOM

Diese Funktion ist nur mit der "unlimited" Lizenz verfügbar und ermöglicht die Verwendung von Gigapix-Bildern mit AJAX-ZOOM auf fast jedem Webserver, Auch auf shared Konten, sofern AJAX-ZOOM dort installiert werden kann. Es funktioniert auch für 360-Grad-Objekt-Spins. Bitte lesen Sie Schritt 1-6, bevor Sie fortfahren:

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

Um Live-Support-Chat nutzen zu können wird Skype vorausgesetzt.

Sollte Live-Support-Chat über Skype nicht sofort zu erreichen sein, dann hinterlassen Sie bitte im Skype eine Nachricht oder schreiben Sie uns eine Email über die Kontakt Seite.

Jede Anfrage wird beantwortet!

Live-Support-Chat