JavaScript & jQuery

Aus der Nähe betrachtet: Schöne Zoomeffekte mit elevateZoom für jQuery

3. Februar 2013
von

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 ist seit 2005 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. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Tags: ,

Ein Kommentar zu „Aus der Nähe betrachtet: Schöne Zoomeffekte mit elevateZoom für jQuery
  1. Klaus Rippe am 24. Juni 2013 um 12:39

    Hallo,

    eine wirklich gute, leicht zu installierende Erweiterung, vor allem auch in eine bereits bestehende Anwendung.
    Ganz toller Hinweis! Ansonsten und das gilt gleichermaßen für alle anderen Beiträge, ganz prima Sache man findet immer das eine oder andere was man irgendwie gebrauchen kann. Vielen Dank an alle Autoren.

    K. Rippe

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!