Vor allem von Produktabbildungen in Online-Shops kennt man es, dass per Zoom ein Bildausschnitt vergrößert dargestellt werden kann. Das jQuery-Plugin elevateZoom ermöglicht genau das; nämlich einen schicken Zoomeffekt schnell und einfach auf ein Bild anzuwenden. Dabei stehen unterschiedliche Einstellungen zur Individualisierung des Effekts zur Verfügung.

elevateZoom

Ein IMG-Element, zwei Bilddateien und jQuery

Um elevateZoom aus dem Hause der walisischen Webagentur Elevate zu verwenden, bindet man zunächst die JavaScript-Datei zusammen mit jQuery im Kopf eines HTML-Dokumentes ein. Anschließend wird das Plugin per jQuery auf ein beliebiges IMG-Element angewendet. Die vergrößerte Ansicht des Bildes, die für den Zoom notwendig ist, bestimmt man über ein Data-Attribut innerhalb des Bild-Elementes:

1

<img id="bild" src="bild_normal.jpg" data-zoom-image="bild_fuer_zoom.jpg" />

Folgender jQuery-Aufruf wendet elevateZoom auf das Bild an:

1

$("#bild").elevateZoom();

Mehr JavaScript ist zunächst nicht nötig, um das Bild zoombar zu machen. Wer mit der Maus über das Bild fährt, erhält rechts neben dem Bild ein Fenster mit einem vergrößerten Ausschnitt. Innerhalb der Normalansicht veranschaulicht ein rechteckiger Rahmen, welcher Ausschnitt gerade vergrößert dargestellt wird.

Einfacher Zoomeffekt

Position des Ausschnittes festlegen

Mit der Option zoomWindowPosition ist es möglich, die Position des Zoom-Fensters festzulegen. 16 unterschiedliche Möglichkeiten gibt es, um einen Ankerpunkt um das Bild als Position zu definieren:

1
2
3

$("#bild").elevateZoom({
  zoomWindowPosition: 6
});

Die im Beispiel gewählte Position 6 stellt das Zoom-Fenster mittig unterhalb der Normalansicht dar. Wer das Zoom-Fenster ganz woanders platzieren möchte, kann auch einen individuellen DIV-Container als Ziel für den Zoom auswählen. Hier wird eine freie Position dann per CSS selbst bestimmt.

Als dritte Variante kann auf ein separates Zoom-Fenster ganz verzichtet werden. Dann wird der vergrößerte Ausschnitt im eigentlichen Bild-Element (inner zoom) dargestellt:

1
2
3

$("#bild").elevateZoom(</code>{
  zoomType: "inner"
});

Mit Vergrößerungsglas zoomen

Eine Alternative zum rechteckigen Zoomen stellt der Effekt dar, bei dem der Vergrößerungsausschnitt über eine Linse erreicht wird:

1
2
3
4
5

$("#bild").elevateZoom({
  zoomType: "lens",
  lensShape: "round",
  lensSize : 200
});

Größe und Form (rund oder eckig) der Linse sind zusätzlich definierbar.

Zoom mit Vergrößerungslinse

elevateZoom stellt noch weitere Einstellungsmöglichkeiten zur Verfügung. So können Ein- und Ausblendeffekte sowie ein Eassing-Effekt für die Bewegung innerhalb des Ausschnittes Verwendung finden.

Fazit: elevateZoom ist leicht anwendbar und sehr individuell konfigurierbar. Eine Beispielgalerie gibt eine Übersicht über die verschiedenen Möglichkeiten. Das Plugin steht unter der MIT- und GPL-Lizenz frei zur Verfügung.

(dpe)

Denis Potschien

Seit 2005 ist er freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

• Web
|
• Facebook
|
• Google+
|
• More Posts (155)

Tags: elevatezoom, javascript, jquery, zoom