Zoombare Bilder in Onlinedokumentation

Eine Zoom-Funktion ermöglicht es den Nutzern einer Onlinedokumentation, auch große Bilder in voller Auflösung zu betrachten – beispielsweise eine umfangreiche Konstruktionszeichnung oder einen Schaltplan. Mit einer geeigneten JavaScript-Bibliothek ist so eine Lösung schnell implementiert.

Beispiel

Zoomen Sie zuerst das Bild, und verschieben Sie dann den Bildausschnitt:

(Photo of a section of the John Lennon Wall, Prague, 2022)

Implementierung

Die hier vorgestellte Lösung nutzt die Open-Source-JavaScript-Bibliothek Zoomist.

Schritt 1: Verlinken Sie im Head-Abschnitt Ihrer Seitenvorlage auf die CSS-Datei und auf die JavaScript-Datei der Bibliothek (passen Sie die Pfade wie erforderlich an).

<link rel="stylesheet" href="YOUR-PATH/zoomist.min.css">
<script src="YOUR-PATH/zoomist.min.js"></script>

Schritt 2: Fügen Sie mit folgendem HTML-Schnipsel das Bild ein:

<div id="zoomdemo" data-zoomist-src="YOUR-IMAGE.png"></div>

Schritt 3: Fügen Sie abschließend nach dem Bild noch ein HTML-Schnipsel mit dem folgenden JavaScript-Code ein:

<script>
new Zoomist('#zoomdemo', {
  height: '75%',
  zoomer: true,
  slider: {
    el: false,
    direction: 'horizontal'
  }
})
</script>

Die im Skript enthaltene ID (im Beispiel zoomdemo) muss dieselbe sein, die auch für das Bild verwendet wurde.

Das Script unterstützt bei Bedarf diverse Parameter zur Feineinstellung. Siehe hierzu die Dokumentation zum Script.