Die Zoom-Funktion ist für erfahrene HTML- und JavaScript-Programmierer sehr einfach anzuwenden. Für weniger Erfahrene gibt es hier ein paar Tipps, wie Probleme erkannt und gelöst werden können:
Die normalerweise verwendete Datei zoomX.js enthält die JavaScripts in komprimierter, schwer leserlicher Form. Um die Zoom-Funktion mit einem Debugger verwenden zu können, kannst du statt zoomX.js auch die folgenden 3 Dateien in leserlicher Form includen:
<script src="src/x.js" type="text/javascript"></script> <script src="src/ic.js" type="text/javascript"></script> <script src="src/zoom.js" type="text/javascript"></script>
Die Zoom-Funktion kann eine Selbst-Diagnose durchführen. Wenn die Zoom-Funktion nicht funktioniert wie erwünscht oder wenn du einfach überprüfen möchtest, ob du alles richtig gemacht hast, so kannst du mit folgendem Funktionsaufruf die Selbstdiagnose aktivieren:
ZoomDebug();
Platziere diese Anweisung irgendwo, zum Beispiel unterhalb von ZoomInit. Wenn du nun auf ein Bild klickst, erscheint eine Dialogbox mit dem Resultat der Selbst-Diagnose. Wenn alles ok ist, kannst du die Anweisung einfach wieder löschen.
Hinweis: Syntaxfehler (Schreibfehler) können damit leider nicht aufgedeckt werden. JavaScript- und HTML-Kenntnisse werden vorausgesetzt!
Wenn sich die Zoom-Funktion trotz korrekter Anwendung von ZoomInit einfach nicht initialisiert, weil es unbekannte Interaktionen mit anderen Komponenten auf der Webseite gibt, so kann man die Initialisierung beim ersten Klick auf ein Bild erzwingen. Füge dazu den folgenden Code irgendwo auf der Seite ein, idealerweise am Ende der Seite:
Zoom.EnableInitOnClick = true;
Problem: Normalerweise wird die Zoom-Funktion über einen internen onload Handler automatisch initialisiert, sobald alle HTML-Elemente der Seite geladen sind, aber noch bevor die Bilder der Seite nachgeladen werden. Zu diesem Zeitpunkt fügt die Zoom-Funktion ihre eigenen HTML Elemente der Seite zu. Wenn nun mit obiger Anweisung auch ein Init per Mausklick in ein Bild ermöglicht wird, kann es passieren, dass der User das Init auslöst, noch bevor alle HTML Elemente der Seite geladen sind. Dies könnte in seltenen Fällen zu Problemen bei der Darstellung der Seite führen, je nachdem, ob noch andere Komonenten die Webseite per JavaScript verändern oder nicht. Wenn der User erst klickt, nachdem alle HTML Elemente geladen sind, gibt es keine Probleme. Daher der Tipp, die obige Anweisung möglichst am Ende der Seite zu platzieren.
Werden noch andere JavaScripts auf derselben Webseite eingesetzt, kann es zu Konflikten kommen, wenn diese Scripts onload-Handler für ihre Initialisierung benötigen. Solche onload-Handler werden oft im body-Tag der Seite wie im folgenden Beispiel installiert:
<body onload="myInit();">
Ist ein solcher Handler vorhanden, funktioniert die Initialisierung der Zoom-Funktion nicht mehr!
Lösung
Es gibt eine einfache Lösung. Man muss nur den onload-Handler aus dem body-Tag entfernen und den onload Handler der Zoom-Funktion (bzw. aus der Datei x.js) verwenden. Dies geht so:
<script type="text/javascript"> xOnLoad(myInit); </script> : </head><body> :
Beachte, dass bei xOnLoad(myInit); hinter myInit kein Klammernpaar steht, weil hier myInit nicht ausgeführt, sondern an xOnLoad zur Ausführung übergeben wird.
Wenn das Vorschau-Objekt zum Beispiel ein Flash-Player ist, kann es passieren, dass das Zoom-Bild hinter dem Video erscheint, statt davor, obwohl es einen höheren Z-Index hat. Um das zu verhindern muss beim Flash-Player der Parameter wmode auf transparent oder opaque gesetzt werden. Alternativ kann man auch das Flag Zoom.HideSmall = true; setzen. Dadurch wird der Player während des Zooms ausgeblendet.