Megapixel-Bilder im Internet zoomen

von | Jul 31, 2017 | Webdesign | 0 Kommentare

Wenn man hochauflösende Bilder in voller Auflösung im Internet darstellen möchte, stößt man an die Grenze der Darstellbarkeit.

Das nachfolgende Bild von Helge Payer besteht aus Tausenden kleinen Bildern seine Spielerkollegen. In dieser kleinen Ansicht kann man sie nicht erkennen. Das Bild ist auch dafür gedacht, in einem Großformat, etwa A2, ausgedruckt zu werden.

Aber achte auf die Sanduhr dieser Seite in der Kopfzeile. Auch wenn die Seite und das Bild bereits sichtbar sind, dreht sich die Sanduhr noch weiter. Der Grund: es wird im Hintergrund noch ein Bild geladen, nämlich eine höher aufgelöste Version desselben Bildes. Wenn die Sanduhr aufhört, sich zu drehen, ist das hoch aufgelöste Bild geladen. Wenn man danach mit der Maus über das Bild fährt, kann man über die dann angezeigte Lupe die vielen Details erkennen, aus denen das Bild zusammengesetzt ist.

Wie macht man das?

Vom Software-Hersteller ElevateWeb stammt ein feines JavaScript-Programm, welches dieses Zooming ermöglicht.

Auf der Seite findet man viele Beispiele und auch eine Konfigurationsanleitung.

Damit das Programm diese Zoomfunktion ausführen kann, sind drei Elemente auf der Seite erforderlich:

  1. jquery und elevatezoom.js im head-Teil der Seite einfügen
  2. Das angezeigte Bild erfordert folgende Ergänzungen: id="zoom_helge" data-zoom-image="http://ewkil.at/img/helge.jpg"

Im head-Teil Deiner Seite einfügen:

[code lang=“xml“]
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>;
<script src=’target=http://ewkil.at/img/am50-1/jquery.elevatezoom.js‘></script>;
[/code]

Der folgende Code steht dort, wo sich das zu vergrößernde Bild befindet. Die kleine angezeigte Version heißt helge-klein.jpg und die große Version heißt helge.jpg. In diesem Beispiel sind diese Dateien auf dem fremden Server ewkil.at.

[code lang=“xml“]
<img id="zoom_helge" src="http://ewkil.at/img/helge-klein.jpg" width="50%" data-zoom-image="http://ewkil.at/img/helge.jpg" />
[/code]

Der folgende Code kann sich im head-Teil oder unmittelbar vor dem /body-Tag befinden. Die Verbindung zum Bild wird durch die id="zoom_helge" hergestellt. That’s it! Wenn Du das auf Deiner Seite probierst und es funktioniert nicht auf Anhieb, verwende die Tastenkombination Strg-Shift-I (Chrome-Browser), um in den Debug-Modus zu kommen. Meist handelt es sich um einfache Fehler wie „Datei oder Bild nicht gefunden“.

[code lang=“xml“]
<script>$(‚#zoom_helge‘).elevateZoom({
zoomType: "lens",
lensShape: "round",
cursor: "crosshair",
lensSize: 200,
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});</script>
[/code]

Hinweis: Wenn Du Dir den Code dieser Seite anschaust, wirst Du sehen, dass statt http://ewkil.at/img/helge-klein.jpg steht //relay.aspx?target=http://ewkil.at/img/helge-klein.jpg“ Der Grund ist, dass dieser Server mit dem https-Protokoll arbeitet aber die anzuzeigende Datei auf einem http-Server gespeichert ist. Der normale Aufruf wie im obigen Codebeispiel würde einen Fehler liefern. das Programm relay.aspx holt sich die Datei und gaukelt dem https-Server vor, dass sie lokal ist. Beschreibung von relay.aspx.

Hier wird beschrieben, wie man den Code in eine WordPress-Seite einbettet:

Kommentar absenden

Zur Werkzeugleiste springen