WaBis

walter.bislins.ch

Zoom: Installation

Der Einbau der JavaScript Zoom-Funktion in eigene Webseiten ist sehr einfach und anhand eines Beispiels schnell vollzogen.

Das Archiv zoom.zip enthält alle nötigen JavaScript-Dateien und ein funktionfähiges Beispiel index.html.

Kopiere die für die Zoom-Funktion benötigten Dateien in ein beliebiges Verzeichnis. Für die folgende Beschreibung wird angenommen, dass sich die Dateien im selben Verzeichnis wie die Webseite befinden. Die Bilder befinden sich für das Beispiel im Unterverzeichnis images.

Wenn du mit JavaScript und HTML noch nicht so geübt bist, empfehle ich dir das Beispiel in index.html anzuschauen und mit dieser Beschreibung zu vergleichen.

1. JavaScript includen

Im Head der Webseite, in welche man die Zoom-Funktionen einbauen will, die Zoom Javascript-Datei includen:

<meta http-equiv="imagetoolbar" content="no">
<script src="zoomX.js" type="text/javascript"></script>

Mit der ersten Zeile oben wird erreicht, dass im Internet-Explorer der Image-Toolbar deaktiviert wird. Beim Auszoomen mit aktiviertem Image-Toolbar flackert das Bild stark.

2. Zoom Initialisieren

Das Zoom-Modul initialisiert sich automatisch, nachdem alle Seitenelemente erzeugt sind. Dabei werden interne Objekte erzeugt und in die Seite eingebaut. Beim Initialisieren wird die Webseite nach allen Zoom-Bildern abgesucht und das Vorausladen dieser Bilder im Hintergrund veranlasst. So entstehen beim Anklicken der Vorschaubilder keine Verzögerungen.

ZoomDebug

Der Aufruf von ZoomDebug() startet die Diagnose der Zoom-Funktion. Sie überprüft, ob die Zoom-Funktionen korrekt angewendet werden und ob alle Bilder gefunden werden können. Die Diagnose-Funktion wird beim ersten Klick auf ein Vorschaubild gestartet.

Die Debug-Funktion kann irgendwo auf der Seite nach dem Includen des Zoom-JavaScripts aufgerufen werden. Wenn alles ok ist, kann diese Zeile gelöscht oder auskommentiert werden.

<script type="text/javascript">
ZoomDebug();
</script>

Hinweis

Das Zoom-Modul setzt einen onload Event-Handler auf, der unmittelbar nach dem Laden der Webseite ausgeführt wird aber noch bevor irgendwelche Bilder nachgeladen werden. In diesem Handler werden die Zoom-Objekte erzeugt und in die Seite eingefügt.

Dieser Event-Handler wird intern mit der Funktion xOnLoad im Browser installiert. xOnLoad befindet sich in der Datei x.js. Damit dies funktioniert, darf im <body>-Tag kein anderer onload-Handler definiert werden! Benötigst du onload-Handler für weitere Scripts, dann installiere diese ebenfalls mit xOnLoad(myInit). Sie werden alle in der Reihenfolge der Registrierung ausgeführt (siehe auch Fehlersuche).

3. Bilder einfügen

Mit einem onclick Handler wird die Zoom-Funktion aufgerufen.

Wichtig!

Jedes Vorschau-Bildchen muss je eine eindeutige HTML-ID haben. Die ID, welche bei der Funktion ZoomIn als erstes Argument angegeben wird, bestimmt von welchem Bild aus der Zoom startet:

Einfachste Anwendungsart:

<img id="pic1" onclick="ZoomIn('pic1','images/bild1.jpg')" 
 src="images/bild1_klein.jpg" width="300" height="314" alt="...">
  :
<img id="pic2" onclick="ZoomIn('pic2','images/bild2.jpg')" 
 src="images/bild2_klein.jpg" width="300" height="314" alt="...">
  :

- oder mit einem <a>-Tag -

<a href="javascript:ZoomIn('pic1','images/bild1.jpg')"
  ><img id="pic1" src="images/bild1_klein.jpg" width="300" height="314" alt="..."
  ></a>
  :
<a href="javascript:ZoomIn('pic2','images/bild2.jpg')"
  ><img id="pic2" src="images/bild2_klein.jpg" width="300" height="314" alt="..."
  ></a>
  :

- oder damit auch bei ausgeschaltetem JavaScript das Zoombild angezeigt wird -

<a href="images/bild1.jpg" onclick="ZoomIn('pic1','images/bild1.jpg');return false;"
  ><img id="pic1" src="images/bild1_klein.jpg" width="300" height="314" alt="..."
  ></a>
  :
<a href="images/bild2.jpg" onclick="ZoomIn('pic2','images/bild2.jpg');return false;"
  ><img id="pic2" src="images/bild2_klein.jpg" width="300" height="314" alt="..."
  ></a>
  :

Mehr Infos zu ZoomIn findest du unter Individuelle Positionierung.