Aufklappbare Bilder in Onlinedokumentation – Thumbnails

Nutzer einer Onlinedokumentation benötigen nicht immer jedes Bild in voller Größe. Wesentlich übersichtlicher ist es in den meisten Fällen, Bilder im Text zunächst relativ klein als Thumbnail anzuzeigen und Nutzern die Möglichkeit zu geben, ein Bild bei Bedarf zu vergrößern. Ihr Redaktionssystem unterstützt diese Funktion nicht? Mit einer entsprechenden JavaScript-Bibliothek lässt sie sich nachrüsten.

Die Auswahl der für diesen Zweck verfügbaren Bibliotheken ist groß. Wesentliche Unterschiede gibt es in der Benutzerfreundlichkeit der Darstellung. Während es manche Bibliotheken einem Leser abverlangen, zum Schließen eines vergrößerten Bilds die Maus über den gesamten Bildschirm zu bewegen und präzise auf eine kleine Schaltfläche zum Schließen zu klicken, geht dies bei anderen Bibliotheken wesentlich komfortabler und schneller: Einfach an eine beliebige Stelle auf dem Bildschirm klicken oder weiterscrollen, und schon wird das vergrößerte Bild wieder klein.

Beispiel 1

Klicken Sie auf das Bild, um es zu vergrößern. Um das vergrößerte Bild zu schließen, klicken Sie an eine beliebige Stelle auf dem Bildschirm oder scrollen Sie einfach weiter:

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

Implementierung zu Beispiel 1

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

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

figure {
  display: inline-block;
  margin: 0 0 0 0;
  width: 100%;
}

Schritt 2: Ein zunächst als verkleinerter Thumbnail anzuzeigendes Bild können Sie nun wie folgt in ein Topic einbinden:

<figure>
 <img src='YOUR-IMAGE.png' class='img-zoomable' width="350">
</figure>

Schritt 3: Laden Sie am Ende des Body-Abschnitts Ihrer Seitenvorlage das Script der Bibliothek und führen Sie es mit den gewünschten Einstellungen aus:

<script src="YOUR-PATH/zooming.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
 new Zooming({
  bgColor: 'rgb(0,0,0)',
  bgOpacity: 0.90,
  zIndex: 999999991
 }).listen('.img-zoomable')
})
</script>

Zur Konfiguration gibt es eine Vielzahl an Optionen. Siehe hierzu die Dokumentation zum Skript.

Beispiel 2

Klicken Sie auf das Bild, um es zu vergrößern. Um das vergrößerte Bild zu schließen, klicken Sie an eine beliebige Stelle auf dem Bildschirm oder scrollen Sie einfach weiter:

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

Implementierung zu Beispiel 2

Die hier vorgestellte Lösung nutzt die Open-Source-JavaScript-Bibliothek zoom-vanilla.js.

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/zoom.css">
<script src="YOUR-PATH/zoom-vanilla.min.js"></script>

Schritt 2: Binden Sie jedes Bild, das zunächst als verkleinerter Thumbnail angezeigt werden soll, wie folgt ein:

<img src='YOUR-IMAGE.png' data-action="zoom" width="350">