Das AJAX-ZOOM Konfigurationsoptionen System erklärt ausführlich und im Detail

AJAX-ZOOM verfügt über vier Konfigurationsdateien. Diese Konfigurationsdateien sind PHP-Dateien. Das hört sich für eine JavaScript-Anwendung vielleicht seltsam an, aber AJAX-ZOOM hat auch einen serverseitigen "Backend-Teil". Bitte nehmen Sie diesen Umstand im Moment als gegeben an.

Die Hauptkonfigurationsdatei mit allen AJAX-ZOOM-Optionen und den Standardwerten ist die /axZm/zoomConfig.inc.php. Die Optionen werden in einer einzigen PHP-Variablen gespeichert.

Variablen in PHP beginnen mit dem $ Dollarzeichen, gefolgt vom Namen der Variablen. Der Wert einer Variablen kann an einer anderen Stelle des Codes geändert werden. Deshalb wird es eine Variable genannt und nicht z.B. eine Konstante. Der Name der AJAX-ZOOM-Optionsvariablen lautet $zoom['config'] und ist ein Array.

Alle AJAX-ZOOM-Optionen werden im $zoom['config'] PHP-Array gespeichert, z.B.

$zoom['config']['useGallery'] = true;

Die Schlüssel des mehrdimensionalen $zoom['config'] Arrays sind die Namen der AJAX-ZOOM-Optionen. Beispielsweise definiert die Option "useGallery", ob die interne vertikale Galerie innerhalb des AJAX-ZOOM Viewers eingeschaltet wird oder nicht.

Der Wert einer Option kann sozusagen "endgültig" sein, z.B, ein boolean (true, false), eine Zeichenfolge (ein Wort oder ein Satz) oder eine Zahl. Der Wert kann jedoch auch ein Array sein und weitere Unteroptionen enthalten, z.B.

				$zoom['config']['galleryImgMargin'] = array(
					'top' => 6,
					'right' => 6,
					'bottom' => 6,
					'left' => 6
				);
			

Wenn Sie nur eine Unteroption in einer anderen Datei als der AJAX-ZOOM-Hauptkonfigurationsdatei ändern möchten, dann können Sie diese wie folgt schreiben:

				$zoom['config']['galleryImgMargin']['bottom'] = 20;
			

Bitte beachten Sie, dass anders als in einigen anderen Programmiersprachen, ein Semikolon am Ende der Definition gesetzt werden muss. Eine neue Zeile bedeutet in diesem Fall nichts. Wenn Sie das vergessen, bricht PHP mit einem Fehler ab und AJAX-ZOOM ist nicht funktionsfähig. Tatsächlich kommt es oft vor, dass Entwickler einen solchen Syntaxfehler erzeugen und sich fragen, warum nichts mehr funktioniert. Wenn solche Symptome auftreten, sollten Sie die Fehlerprotokolldatei überprüfen. Dort sollte sowas wie "fatal error in file x on line y" stehen.

Die PHP Konfigurationsdateien

Neben der /axZm/zoomConfig.inc.php Hauptkonfigurationsdatei, die alle AJAX-ZOOM-Optionen und Standardwerte enthält, gibt es drei weitere mögliche Konfigurationsdateien, mit denen Sie die Standardeinstellungen der Hauptkonfigurationsdatei überschreiben können:

• /axZm/zoomConfigCustom.inc.php - in allen Downloadpaketen enthalten.
• zoomConfigCustomAZ.inc.php - enthalten in AJAX-ZOOM Plugin / Modulen und dem vollen Downloadpaket. Es ist eine leere PHP-Datei.
• zoomConfigCustomUSR.inc.php - im Downloadpaket nicht vorhanden.

Alle Konfigurationsdateien sind in die /axZm/zoomConfig.inc.php Hauptkonfigurationsdatei an verschiedenen Orten und in der Reihenfolge wie oben aufgelistet "inkludiert". Das bedeutet:

• Werte, die Sie in /axZm/zoomConfigCustom.inc.php festlegen, überschreiben Optionswerte aus /axZm/zoomConfig.inc.php.
• Werte, die Sie in zoomConfigCustomAZ.inc.php festlegen, überschreiben Optionswerte aus /axZm/zoomConfigCustom.inc.php und /axZm/zoomConfig.inc.php.

					include 'my_include_file.php';
				

Wenn Sie sich also entscheiden, eine Option direkt in der primären Konfigurationsdatei /axZm/zoomConfig.inc.php zu ändern, wird sie möglicherweise bereits in einer anderen Konfigurationsdatei überschrieben, die bereits vorhanden ist und die gleiche Option mit einem anderen Wert enthält. Dies gilt hauptsächlich für die Datei /axZm/zoomConfigCustom.inc.php (siehe unten).

/axZm/zoomConfigCustom.inc.php Konfigurationsdatei

Die Datei /axZm/zoomConfigCustom.inc.php enthält viele Voreinstellungen, die von den zahlreichen AJAX-ZOOM-Beispielen verwendet werden. Da es sich um eine PHP-Datei handelt, können Sie darin mit der Programmiersprache PHP bedingte Anweisungen schreiben. Die Struktur der Bedingungsanweisungen in /axZm/zoomConfigCustom.inc.php sieht folgendermaßen aus:

				if ($_GET['example'] == 'someValue') {
				// options
				} elseif ($_GET['example'] == 'anotherValue') {
				// other options
				} elseif ($_GET['example'] == 'someOtherValue') {
				// some other options
				}
			

Das Obige versteht sich im wesentlichen, wie es sich liest. Das == ist einer der Vergleichsoperatoren und prüft, ob der Wert einer Variablen der anderen Variablen entspricht. Abhängig vom Wert der Variablen $_GET['example'] gibt der Code einen anderen Satz von Optionen zurück, die sich in einer der bedingten Anweisung befinden.

Bitte beachten Sie, dass eine Codezeile in einer PHP-Datei, die mit einem doppelten Schrägstrich // beginnt, auskommentiert ist. Auskommentiert bedeutet, dass es nicht als Code, sondern als Kommentar betrachtet wird und daher nicht als Code ausgeführt wird. Dasselbe gilt für den Code zwischen /* und */, der sich über viele Zeilen erstrecken kann! Auf diese Weise können Sie ein Code-Snippet in Ihrer PHP-Datei behalten, anstatt es zu löschen, um es später bearbeiten zu können. Derselbe Kommentierungsmechanismus funktioniert auch für JavaScript-Code, ist jedoch in JavaScript sichtbar, sodass jeder ihn lesen kann. Für HTML-Code können Sie diese Zeichen <!-- und --> verwenden. Der Browser rendert kein HTML zwischen diesen beiden Zeichen.

Das "example" ist der Parameter, den AJAX-ZOOM JavaScript-Code normalerweise den PHP-Dateien innerhalb des Initialisierungscodes übergibt. JavaScript übergibt diesen Parameter zusammen mit einigen anderen Parametern mithilfe von AJAX (Asynchronous JavaScript And XML) an eine PHP-Datei. Der Name des AJAX-ZOOM leitet sich von dieser Technologie ab.

Abhängig vom Wert des Parameters "example" gibt der PHP-Code einen Teil des erforderlichen HTML-Codes und den angeforderten Satz mit Konfigurationsoptionen zurück. Unabhängig davon, ob Sie den reinen AJAX-ZOOM-Viewer oder dessen Erweiterung verwenden, enthalten alle Beispiele eine Variable, in der Sie den Wert des Parameters "example" festlegen können.

Einen typischen AJAX-ZOOM Code mit "example" Parameter zeigen

				// Create an empty object that holds relevant AJAX-ZOOM variables
				var ajaxZoom = {};

				// Define the path to the axZm folder
				ajaxZoom.path = "/axZm/";

				// Define callbacks, for complete list check the docs
				// https://www.ajax-zoom.com/index.php?cid=docs#API_CALLBACKS
				ajaxZoom.opt = {
					onBeforeStart: function() {
						// code
					}
				};

				ajaxZoom.parameter = "example=17&3dDir=/pic/zoom3d/Uvex_Occhiali";

				// The ID of the element (placeholder) where AJAX-ZOOM has to be inserted into
				ajaxZoom.divID = "axZmPlayerContainer";

				// Open AJAX-ZOOM responsive
				$.fn.axZm.openResponsive(
					ajaxZoom.path, // Absolute path to AJAX-ZOOM directory, e.g. "/axZm/"
					ajaxZoom.parameter, // Defines which images and which options set to load
					ajaxZoom.opt, // callbacks
					ajaxZoom.divID, // target - container ID (default 'window' - fullscreen)
					false, // apiFullscreen- use browser fullscreen mode if available
					true, // disableEsc - prevent closing with Esc key
					false // postMode - use POST instead of GET
				);
				

Die zoomConfigCustomAZ.inc.php Konfugurationsdatei

Wie bereits erwähnt, befinden sich die Dateien zoomConfigCustomAZ.inc.php oder zoomConfigCustomUSR.inc.php außerhalb des /axZm/ Ordners. Der externe Speicherort ist sehr hilfreich, denn wenn Sie Ihre Optionen in diesen Dateien ändern, müssen Sie nicht unbedingt etwas im /axZm/ Ordner verändern. Auf diese Weise können Sie die AJA-ZOOM Core-Dateien aktualisieren, indem der gesamte /axZm/ Ordner durch eine neue Version ersetzt wird, wobei Ihre individuelle Einstellungen beibehalten werden!

Auf die gleiche Art und Weise wie es in der /axZm/zoomConfigCustom.inc.php Konfigurationsdatei geregelt ist, können Sie Ihre eigene Sets in zoomConfigCustomAZ.inc.php erstellen oder die in /axZm/zoomConfigCustom.inc.php gefundene modifizieren. Es schadet auch nicht, wenn Sie ein Options-Set aus /axZm/zoomConfigCustom.inc.php in zoomConfigCustomAZ.inc.php kopieren und dort modifizieren bzw. erweitern.

			// Check if $_GET['example'] is defined
			if (isset($_GET['example'])) {

				// Test if $_GET['example'] equals "yourValue"
				if ($_GET['example'] == 'yourValue') {

					// set here your option values

				} elseif ($_GET['example'] == 'someOtherValueOfYours') {

					// set here your option values
				}
			}
			

Wenn Sie keine Optionssätze benötigen, kopieren Sie eine zu ändernde Option aus /axZm/zoomConfig.inc.php oder /axZm/zoomConfigCustom.inc.php und ändern den Wert je nach Bedarf. Dies ist jedoch nicht empfohlen da beispielsweise der Hotspoteditor diese Konfigurationsarchitektur ebenfalls verwendet und Sie dadurch das Layout zerbrechen können.

Die zoomConfigCustomAZ.inc.php ist auch ein guter Ort, an dem Sie Ihre AJAX-ZOOM-Lizenzdaten ablegen können. Für AJAX-ZOOM Plugins / Module für verschiedene Systeme wie Magento können Sie jedoch die Lizenzierungsinformationen auch im Backend dieser Systeme unter AJAX-ZOOM-Modulkonfiguration eingeben.

Die zoomConfigCustomUSR.inc.php Konfigurationsdatei

Diese Datei befindet sich ganz am Ende der Hauptkonfigurationsdatei und unterhalb der Zeile, die besagt, dass Sie nichts unterhalb dieser Zeile ändern sollten. In der zoomConfigCustomUSR.inc.php Datei können die Hauptpfade überschreiben werden. Verglichen mit den anderen AJAX-ZOOM Optionen, sind die Optionen für Pfadangaben weitaus komplizierter aufgebaut. Damit AJAX-ZOOM Downloadpaket funktioniert, müssen Sie jedoch diese Pfadangaben nicht ändern bzw. einstellen. Auch die Beispiele aus dem Paket sollten sofort funktionieren.

Sie müssen auch keine Pfade ändern, um AJAX-ZOOM auf Quellbilder zu verweisen, die sich nicht in einem Unterordner des /pic Ordners befinden wie es im Downloadpaket der Fall ist. Die Beispiele im Download-Paket verweisen meistens auf /pic/zoom/{some_subfolder} oder /pic/zoom3d/{some_subfolder}, jedoch könnten die Pfade in den Beispielen ohne Änderungen in einer Konfigurationsdatei auch auf Bilder außerhalb des /pic verweisen. Wenn sich Ihre Quellbilder beispielsweise in /media/product_images/123 befinden, können Sie mit JavaScript direkt auf sie verweisen. Sollte dies nicht vollkommen möglich sein, dann schauen Sie sich ggf. die Einstellungen der $zoom['config']['allowAjaxQuery'] Option an. Wenn sich alle Quellbilder an einem anderen Ort befinden, sodass die Ordner /pic/zoom/ und /pic/zoom3d/ nicht benötigt werden, können Sie diese bedenkenlos löschen.

Wenn Sie jedoch den gesamten "pic" -Ordner relativ zum /axZm ordner mit den AJAX-ZOOM Hauptdateien verschieben möchten, dann können Sie die Pfade am besten in zoomConfigCustomUSR.inc.php ändern. Der "pic" Ordner mit seinen Unterordnern ist hauptsächlich der Ort, an dem AJAX-ZOOM kleine Darstellungen Ihrer Quellbilder sowie gegebenenfalls Bildkacheln schreibt.

Klicken Sie hier um den Code anzuzeigen, der die Pfade ändert.

					$newReadPath = '/fileadmin/ajaxzoom';
					$newWritePath = $zoom['config']['fpPP'].$newReadPath;

					// Paths for writing
					$zoom['config']['thumbDir'] = $axZmH->checkSlash($newWritePath.'/'.$zoom['config']['pathSave']['thumbs'], 'add');
					$zoom['config']['galleryDir'] = $axZmH->checkSlash($newWritePath.'/'.$zoom['config']['pathSave']['gallery'], 'add');
					$zoom['config']['gPyramidDir'] = $axZmH->checkSlash($newWritePath.'/'.$zoom['config']['pathSave']['gPyramidPath'], 'add');
					$zoom['config']['pyrTilesDir'] = $axZmH->checkSlash($newWritePath.'/'.$zoom['config']['pathSave']['pyrTilesPath'], 'add');
					$zoom['config']['mapDir'] = $axZmH->checkSlash($newWritePath.'/'.$zoom['config']['pathSave']['mapPath'], 'add');
					$zoom['config']['tempCacheDir'] = $axZmH->checkSlash($newWritePath.'/'.$zoom['config']['pathSave']['tempCache'], 'add');
					$zoom['config']['tempDir'] = $axZmH->checkSlash($newWritePath.'/'.$zoom['config']['pathSave']['temp'], 'add');
					$zoom['config']['jsonDir'] = $axZmH->checkSlash($newWritePath.'/'.$zoom['config']['pathSave']['jsonPath'], 'add');

					// Paths for frontend reading
					$zoom['config']['thumbs'] = $axZmH->checkSlash($newReadPath.'/'.$zoom['config']['pathSave']['thumbs'], 'add');
					$zoom['config']['gallery'] = $axZmH->checkSlash($newReadPath.'/'.$zoom['config']['pathSave']['gallery'], 'add');
					$zoom['config']['gPyramidPath'] = $axZmH->checkSlash($newReadPath.'/'.$zoom['config']['pathSave']['gPyramidPath'], 'add');
					$zoom['config']['pyrTilesPath'] = $axZmH->checkSlash($newReadPath.'/'.$zoom['config']['pathSave']['pyrTilesPath'], 'add');
					$zoom['config']['mapPath'] = $axZmH->checkSlash($newReadPath.'/'.$zoom['config']['pathSave']['mapPath'], 'add');
					$zoom['config']['tempCache'] = $axZmH->checkSlash($newReadPath.'/'.$zoom['config']['pathSave']['tempCache'], 'add');
					$zoom['config']['temp'] = $axZmH->checkSlash($newReadPath.'/'.$zoom['config']['pathSave']['temp'], 'add');
					$zoom['config']['jsonPath'] = $axZmH->checkSlash($newReadPath.'/'.$zoom['config']['pathSave']['jsonPath'], 'add');
				

Benennung der XML Datei und der Pfad zu Ihr

Der Name der Datei muss zoomConfig.xml lauten und im Gegensatz zu der zoomConfigCustomUSR.php, die sich in demselben Verzeichnis befindet in dem der Ordner axZm auch, MUSS die zoomConfig.xml über dem Root der öffentlichen Domäne platziert werden.

Wenn Ihr Public Domain-Stammverzeichnis beispielsweise /var/www/vhosts/yourdomain.com/httpdocs ist, müssen Sie die Datei zoomConfig.xml in /var/www/vhosts/yourdomain.com platzieren.

Zusätzlich oder alternativ können Sie die Datei zoomConfig.xml auch im Ordner ajaxzoom_config_{host} oberhalb des Domänenstamms anlegen. Für den gleichen Beispiel wie oben lautet der resultierende Pfad /var/www/vhosts/yourdomain.com/ajaxzoom_config_yourdomain.com/zoomConfig.xml. Für die Subdomain "dev" von yourdomain.com lautet der Auflösungspfad /var/www/vhosts/dev.yourdomain.com/ajaxzoom_config_dev.yourdomain.com/zoomConfig.xml. Wenn also die XML Datei in einem separaten Ordner platziert wird, muss der Name des Ordners mit dem Namen der Domain bzw. Subdomain übereinstimmen und den Prefix ajaxzoom_config_ aufweisen.

Falls Ihnen Ihr Provider auf einem shared Server keinen Zugriff auf das Verzeichnis über dem Domänenstamm gewährt, können Sie leider die XML-Methode nicht zum Konfigurieren von AJAX-ZOOM-Optionen verwenden.

Weiterhin muss die Datei zoomConfig.xml für den serverseitigen Code von AJAX-ZOOM lesbar sein. Wenn Sie dynamisch über einen Drittanbieter Code die XML bearbeiten möchten, muss die Datei entsprechend auch beschreibbar sein.

Struktur des XML-Konfigurationsbaums

Mit nur einer Ausnahme folgt die Struktur des XML-Konfigurationsbaums der Struktur des mehrdimensionalen Konfigurationsarrays $zoom['config'], welches in der Hauptkonfigurationsdatei zu finden ist. Die Ausnahme besteht darin, dass XML keine numerischen Knoten unterstützt. Daher müssen Sie diese als key_{num} schreiben d.h. den Zahlen den String "key_" voranstellen. Beispiel: Die PHP-Konfiguration für Vorschaubilder wird folgendermaßen definiert:

			$zoom['config']['stepPicDim'] = array(
				1 => array(
					'w' => 900,
					'h' => 900,
					'q' => 80
				),
				2 => array(
					'w' => 1200,
					'h' => 1200,
					'q' => 70
				)
			);
			

Ihre entsprechende XML-Konfiguration für die Option "stepPicDim" würde dann so aussehen:

			
			<zoom>
				<config>
					<stepPicDim>
						<!-- write "key_1" instead of "1"-->
						<key_1>
							<w>900</w>
							<h>900</h>
							<q>80</q>
						</key_1>
						<!-- write "key_2" instead of "2"-->
						<key_2>
							<w>1200</w>
							<h>1200</h>
							<q>70</q>
						</key_2>
					</stepPicDim>
				</config>
			</zoom>
						

Wenn die XML-Struktur keine Fehler enthält, führt AJAX-ZOOM die Optionen aus der XML-Konfigurationsdatei mit den Optionen aus den regulären Konfigurationsdateien zusammen, indem die Werte "erweitert" werden. Das Erweitern funktioniert auf ähnliche Weise wie die tiefe Extend-Methode von jQuery. Wenn Sie also Ihre XML-Optionsdatei definieren, müssen Sie nicht alle Optionen definieren, sondern nur diejenigen, die sich von den Standardeinstellungen unterscheiden sollen.

Bedingtes bzw. Konditionales XML

Wie es oben im Abschnitt über die /axZm/zoomConfigCustom.inc.php Datei erläutert ist, können Sie mehr als einen Konfigurationssatz definieren, den AJAX-ZOOM abhängig von einem Parameter und dessen Wert auswählt. Diese Parameter werden im JavaScript-Code definiert und über eine AJAX-Anforderung in der Abfragezeichenfolge an den serverseitigen AJAX-ZOOM-Code übergeben. Ein typischer Parametername ist "example". Sie können jedoch auch einen anderen Namen wählen, z.B. "configSet". Wenn Sie also einen bedingten Konfigurationssatz über XML laden möchten, müssen Sie dem Knoten "config" lediglich ein Attribut und einen Wert hinzufügen. Beispiel:

			
			<zoom>
				<config>
					<useMap>true</useMap>
				</config>
				<config example="spinIpad">
					<useMap>false</useMap>
				</config>
			</zoom>
						

Sie können beliebig viele config -Knoten definieren und mehr als einen Unterknoten unter einem config -Knoten hinzufügen.

			
			<zoom>
				<config>
					<useMap>true</useMap>
					<pZoom>100</pZoom>
					<spinDemoTime>4000</spinDemoTime>
				</config>
				<config>

				<config example="spinIpad">
					<useMap>false</useMap>
					<pZoom>9999</pZoom>
					<spinDemoTime>5000</spinDemoTime>
				</config>
			</zoom>
						

AJAX-ZOOM verarbeitet die config - Knoten in zwei Blöcken. 1. Zunächst werden die Konfigurationsknoten verarbeitet, die kein Attribut haben. 2. Anschließend werden die Konfigurationsknoten verarbeitet, die ein Attribut haben. AJAX-ZOOM verarbeitet keinen Konfigurationsknoten mit einem Attribut, wenn kein entsprechender Parameter und Wert für die Abfragezeichenfolge (Request) vorhanden sind.

Benennung der JSON-Datei und der Pfad zu ihr

Der Name der JSON-Datei muss zoomConfig.json lauten und im Gegensatz zur zoomConfigCustomUSR.php Datei, die sich in demselben Verzeichnis befindet, in dem sich der Ordner axZm befindet, MUSS die zoomConfig.json über dem öffenlichen Domain-Stammverzeichnis liegen.

Wenn beispielsweise Ihr öffenlicher Domain-Stammverzeichnis /var/www/vhosts/yourdomain.com/httpdocs lautet, MUSS sich die Datei zoomConfig.json in /var/www/vhosts/yourdomain.com befinden. Der vollständige Pfad lautet also /var/www/vhosts/yourdomain.com/zoomConfig.json.

Zusätzlich or alternativ können Sie die Datei zoomConfig.json unter ajaxzoom_config_{host} ablegen, welches sich ebenfalls über dem öffenlichen Domain-Stammverzeichnis befinden muss. Wenn mann dasselbe Beispiel wie oben nimmt, dann lautet der resultierende Pfad /var/www/vhosts/yourdomain.com/ajaxzoom_config_yourdomain.com/zoomConfig.json. Für eine "dev" subdomain der yourdomain.com, lautet der resultierende Pfad /var/www/vhosts/dev.yourdomain.com/ajaxzoom_config_dev.yourdomain.com/zoomConfig.json. Wenn Sie die JSON-Datei in einem separaten Ordner ablegen, muss der Name des Ordners mit dem Namen der Domäne oder Unterdomäne übereinstimmen und das Präfix ajaxzoom_config_ haben.

Falls Ihnen Ihr Provider auf einem freigegebenen Server keinen Zugriff auf das Verzeichnis über dem Domänenstamm gewährt, können Sie JSON nicht zum Konfigurieren von AJAX-ZOOM-Optionen verwenden.

The zoomConfig.json must be readable by AJAX-ZOOM server-side code, and if you want to change it dynamically via a third-party code, it must be writable as well.

Die zoomConfig.json muss durch AJAX-ZOOM serverseitigen Code lesbar sein, und wenn Sie es dynamisch durch einen Drittanbieter Code ändern möchten, dann muss entsprechend die Datei beschreibbar sein.

Die Struktur des JSON-Konfigurationsbaums

Die Struktur des JSON-Konfigurationsbaums folgt der Struktur des mehrdimensionalen $zoom['config'] -Konfigurationsarrays, das Sie in der Hauptkonfigurationsdatei vorfinden können.

Wenn die JSON-Struktur keine Fehler enthält, führt AJAX-ZOOM die Optionen aus der JSON-Konfigurationsdatei mit den Optionen aus den regulären Konfigurationsdateien zusammen, indem die Werte "erweitert" werden. Das Erweitern funktioniert ähnlich wie die "Deep Extend" Methode von jQuery. Wenn Sie also Optionen in der JSON-Datei definieren, müssen Sie nicht alle AJAX-ZOOM-Optionen wiederholen, sondern nur diejenigen, deren Werte von den Standardeinstellungen abweichen sollen.

Ihre AJAX-ZOOM-Konfigurationsdatei im JSON-Format kann z.B. folgendermaßen aussehen:

{
	"zoom": {
		"config": {
			"useMap": true,
			"stepPicDim": {
				"1": {
					"w": 900,
					"h": 900,
					"q": 80
				},
				"2": {
					"w": 1200,
					"h": 1200,
					"q": 70
				}
			}
		}
	}
}
			

Es kann auch ein Array sein, in dem eines der Elemente das "Zoom" - Objekt ist, z.B,

[
	{
		"zoom": {
			"config": {
				"useMap": true,
				"picDim": "600x600"
			}
		},
		"somethingElse": ["whatever", "else"]
	}
]
			

Bedingtes JSON für config Knoten

As it is explained in the section about /axZm/zoomConfigCustom.inc.php file above, you can have more than one configuration sets, which AJAX-ZOOM chooses depending on a parameter and value that are defined within the JavaScript code, and are passed via AJAX request in the query string to the AJAX-ZOOM server-side code (via AJAX controller). A typical parameter name is "example", but you can define any other such as, e.g., "configSet". So if you want to load a conditional configuration set via JSON, you just add a vertical bar ("|" )to the JSON "config" node and write the query string along with value it should have, for example:

Wie im obigen Abschnitt über die /axZm/zoomConfigCustom.inc.php erläutert, können Sie mehr als einen Konfigurationssatz haben, den AJAX-ZOOM abhängig von einem Parameter und Wert auswählt, der im JavaScript-Code definiert ist und der über eine AJAX-Anforderung mittels Abfragezeichenfolge an den serverseitigen AJAX-ZOOM-Code (über den AJAX-Controller) übergeben wird. Ein typischer Parametername ist "example", Sie können jedoch auch einen anderen Namen definieren, z.B. "configSet". Wenn Sie also einen bedingten Konfigurationssatz über JSON laden möchten, fügen Sie einfach eine vertikalen Strich ("|") zum JSON-Knoten "config" hinzu und schreiben die Abfragezeichenfolge zusammen mit dem Wert, den sie konditional haben sollte. Beispiel:

{
	"zoom": {
		"config": {
			"useMap": true
		},
		"config|example=17": {
			"useMap": false
		}
	}
}
			

Im obigen Code ist der Wert der Option useMap nur dann false, wenn die an AJAX-ZOOM übergebene Abfragezeichenfolge example=17 enthält

AJAX-ZOOM verarbeitet die config Knoten in zwei Blöcken.

1. Zunächst werden die config Knoten verarbeitet, die nach der vertikalen Strich keine bedingten "Anweisungen" haben.
2. Dann verarbeitet es die config Knoten, die eine bedingte "Anweisung" beinhalten. AJAX-ZOOM verarbeitet keinen Konfigurationsknoten mit einer Anweisung, wenn kein entsprechender Parameter und Wert für die Abfragezeichenfolge (Anfrage) vorhanden ist.

Bedingter JSON für Unterknoten

Unter einem config Knoten kann auch ein Unterknoten, der eine AJAX-ZOOM-Option darstellt, bedingt sein, zum Beispiel:

{
	"zoom": {
		"config": {
			"pZoom": 100,
			"pZoom|zoomToMax=yes": 9999,
			"spinDemoTime": 4000
		}
	}
}
			

In the above code, the value of the pZoom option is set to 9999 only if the query string parameters, with which you initialize AJAX-ZOOM, contain fullzoom=yes, e.g. example=spinIpad&zoomToMax=yes&3dDir=/pic/zoom3d/Uvex_Occhiali. The pZoom will not have the value of 9999 if you don't pass the example=spinIpad as well because the pZoom node is under the config node and it is conditional as well. So the zoomToMax is not something that AJAX-ZOOM offers as an option, but it is something that YOU have defined as an option, which you pass to AJAX-ZOOM via the query string parameter.

Im obigen Code wird der Wert der Option pZoom nur dann auf 9999 gesetzt, wenn die Abfragezeichenfolgenparameter, mit denen Sie AJAX-ZOOM initialisieren, fullzoom=yes enthalten, zum Beispiel example=spinIpad&zoomToMax=yes&3dDir=/pic/zoom3d/Uvex_Occhiali. Die pZoom Option wird nicht auf 9999 gesetzt, wenn Sie nicht example=spinIpad als Parameterwert übergeben, da sich der pZoom-Knoten unter dem Konfigurationsknoten befindet und ebenfalls bedingt ist. Wie Sie sehen können, bietet AJAX-ZOOM den zoomToMax nicht als Option an, sondern Sie haben diese Option selbst definiert, indem Sie diese über den Abfragezeichenfolgenparameter an AJAX-ZOOM übergeben und entsprechend einen anderen Wert verändern, welches zu dem gewünschten Ergebnis bzw. einer gleichwertigen Option führt.

JavaScript ist eine Skriptsprache, die im Browser ausgeführt wird. Normalerweise finden Sie es in den .js -Dateien, die in Ihrem HTML-Code enthalten sind oder innerhalb des <script type="text/javascript"> </script> HTML-Tags. Mit JavaScript können Sie z.B. HTML-Elemente erstellen, ändern oder entfernen. Alles, was Sie im Fenster des Browsers sehen, kann über JavaScript modifiziert werden, auch wenn der HTML-Code einer Seite bereits geladen und gerendert wurde. Wenn Sie beispielsweise auf die Schaltfläche oben klicken, werden Teile des Textes über JavaScript ausgeblendet.

jQuery ist eine JavaScript-Bibliothek, die das Anwenden von JavaScript vereinfacht. Die Bibliothek fasst die häufigsten Anwendungen des JavaScripts in Funktionen zusammengefasst und macht zudem diese Funktionen für unterschiedliche Browser funktionsfähig. Die eingebauten jQuery-Funktionen sind über Plugins erweiterbar. Neben normalem JavaScript verwendet AJAX-ZOOM auch jQuery-Funktionen.

Die meisten, jedoch nicht alle AJAX-ZOOM Optionswerte können auch über JavaScript innerhalb des AJAX-ZOOM-Initialisierungscodes verändert werden. Leider ist vorerst keine vollständige Liste dieser Optionen vorhanden. Als Faustregel können Sie über JavaScript die Werte solcher Optionen festlegen, die sich nicht direkt auf Prozesse wie die Erzeugung von Miniaturansichten und anderen zwischengespeicherten Bildern beziehen.

Wenn Sie dies tun und es funktioniert, überschreiben die über JavaScript festgelegten Werte die Werte, die in den PHP-Konfigurationsdateien festgelegt sind. Das liegt daran, dass die Optionen und ihre Werte per AJAX-Anfrage an den AJAX-ZOOM PHP-Controller abgerufen werden und im Browser erst danach verfügbar sind. Die AJAX-ZOOM Optionen und ihre Werte sind also erst nach der Initialisierung des AJAX-ZOOM-Viewers als jQuery.axZm JavaScript-Objekt verfügbar.

					var a = 'axZm';
					var b = jQuery[a]; // b is jQuery.axZm;
					var c = jQuery.a; // c is undefined
				

Der Name der Eigenschaft einer AJAX-ZOOM Option, falls diese im $.axZm Objekt verfügbar ist, stimmt mit der in der PHP-Konfigurationsdatei überein. Die Option zum Umkehren der Drehrichtung eines 360-Grad Produktansicht während einer User Interaction ist beispielsweise:

				$zoom['config']['spinReverse'] = true;
			

Wenn Sie einen anderen Wert über JavaScript festlegen möchten, lautet die Syntax:

				jQuery.axZm.spinReverse = false;
			

Wie bereits erwähnt, ist das jQuery.axZm Objekt erst verfügbar, nachdem AJAX-ZOOM initialisiert wurde. Um diesen Moment einzufangen, sollten Sie den onBeforeStart AJAX-ZOOM-Callback verwenden. Es gibt viele andere nützliche Callbacks, wenn Sie aber AJAX-ZOOM-Optionen über JavaScript festlegen möchten, sollten Sie onBeforeStart verwenden.

Im folgenden JavaScript-Code, der für eine AJAX-ZOOM-Initialisierung typisch ist, können Sie die onBeforeStart Callback-Funktion als Eigenschaft von ajaxZoom.opt sehen, die als drittes Argument an jQuery.fn.axZm.openResponsive übergeben wird. Die für onBeforeStart definierte Funktion wird ausgeführt, sobald der JavaScript-Code Informationen vom serverseitigen Teil des Viewers erhält.

			// Create an empty object that holds relevant variables
			var ajaxZoom = {};

			// Define the path to the axZm folder
			ajaxZoom.path = "/axZm/";

			// Define callbacks, for complete list check the docs
			// https://www.ajax-zoom.com/index.php?cid=docs#API_CALLBACKS
			ajaxZoom.opt = {
				onBeforeStart: function() {
					// Change spin direction
					jQuery.axZm.spinReverse = false;

					// Enable spin slider UI
					jQuery.axZm.spinSlider = true;

					// other code
				}
			};

			ajaxZoom.parameter = "example=17&3dDir=/pic/zoom3d/Uvex_Occhiali";

			// The ID of the element (placeholder) where AJAX-ZOOM has to be inserted into
			ajaxZoom.divID = "axZmPlayerContainer";

			// Open AJAX-ZOOM responsive
			jQuery.fn.axZm.openResponsive(
				ajaxZoom.path, // Absolute path to AJAX-ZOOM directory, e.g. "/axZm/"
				ajaxZoom.parameter, // Defines which images and which options set to load
				ajaxZoom.opt, // callbacks
				ajaxZoom.divID, // target - container ID (default 'window' - fullscreen)
				false, // apiFullscreen- use browser fullscreen mode if available
				true, // disableEsc - prevent closing with Esc key
				false // postMode - use POST instead of GET
			);
			

Der Initialisierungscode einer AJAX-ZOOM-JavaScript-Erweiterung (z.B. "Zoom auf Hover", example32) unterscheidet sich vom Initialisierungscode des reinen AJAX-ZOOM-Viewers. In den Optionen einer solchen Erweiterung finden Sie jedoch IMMER eine Option vom Typ Objekt, wo die onBeforeStart Callback-Funktion definierbar ist. Auf diese Weise können Sie die Werte der AJAX-ZOOM Kernoptionen auch in der Erweiterungen über JS ändern.

Um zu sehen, welcher Wert einer Option beim JavaScript im Frontend ankommt, können Sie es in der Browserkonsole protokollieren:

				onBeforeStart: function() {
					// See the output of an option
					console.log(jQuery.axZm.mNavi);
				}
			

oder Sie öffnen im Browser die "Developer Tools" indem Sie auf Ihrer Tastatur die Taste F12 drücken. Nachdem AJAX-ZOOM initialisiert wurde, navigieren Sie zur Registerkarte "Console", geben beispielsweise jQuery.axZm.mNavi ein und drücken dann die Eingabetaste. Die Werte dieser Option werden angezeigt. Die Option mNavi ist ein gutes Beispiel für ein mehrdimensionales Array in PHP, das in ein JavaScript-Objekt konvertiert wird. Wenn Sie es über JavaScript aktivieren möchten, können Sie in Ihre onBeforeStart Callback-Funktion Folgendes reinschreiben:

				jQuery.axZm.mNavi.enabled = true;
			

Wenn Sie auf eine "tiefere" Unteroption zugreifen möchten und beispielsweise die Beschreibungen der Schaltflächen deaktivieren möchten, können Sie Folgendes schreiben:

				jQuery.axZm.mNavi.alt.enabled = false;