201012Aug

jQuery miniZoomPan: Plugin zur Bildvergrößerung

Mit JavaScript-Bibliotheken lassen sich die ausgefallensten Bedienelemente und Effekte umsetzen. Es gibt mittlerweile unzählige jQuery-Plugins, die zur Verbesserung von Benutzeroberflächen im Web beitragen. Auch für Bildergalerien oder Slideshows stehen etliche Plugins zur Verfügung. Ein schöner Effekt für diesen Bereich stellt auch das Plugin "jQuery miniZoomPan" dar. Diese Funktionalität dürfte sich auf vielen Online-Shops wiederfinden: Fährt man mit der Maus über ein Vorschaubild, wird in dem Ausschnitt die Originalgröße des Bildes angezeigt. Anschließend lässt sich der Bildausschnitt durch Mausbewegungen verschieben.

jQuery miniZoomPan

Mit dem kleinen Plugin können also Details eines Bildes dargestellt werden, ohne dass ein separater Bereich (wie etwa eine Lightbox) geöffnet werden muss. Diese Funktionalität eignet sich vorzugsweise für Produktbilder oder auch Portfolio-Inhalte.
Das jQuery-Skript von Gian Carlo Mingati besteht aus einer JS- und einer CSS-Datei. Leider gibt es keine echte Dokumentation, weshalb die Implementierung im Quellcode des Beispiels angesehen werden muss:

  • HTML-Code:
  • <div id="zoom01">
  • <img src="leaf_s.jpg" />
  • </div>
  •  
  • jQuery-Code:
  • $("#zoom01").miniZoomPan({
  • sW: 200,
  • sH: 250,
  • lW: 370,
  • lH: 462
  • });

Definiert werden also die Dimensionen des Vorschaubildes sowie die der Originalversion. Im Quellcode des Plugins sind die beiden Varianten eines Bildes durch die Nachsilben "_s" (small) und "_l" (large) verankert. Dementsprechend müssen die Bider benannt werden. Optional können beim Plugin-Aufruf noch ein Rahmen sowie ein "Loading"-Bild definiert werden.

Kommentare

Pokemon schrieb am 05.09.2010 #1

Na ja, da wird das ganze Bild nachgeladen. Für große Fotos wenig geeignet, höchstens als Vorschaubild im Listing sinnvoll. Wenn man ein 21mp Bild zoomen will, dauert es ewig bis das Bild geladen ist. Das einzige Jquery Plugin welches damit umgehen kann ist ajax-zoom (http://www.ajax-zoom.com), ist aber für statische Seiten nicht gedacht, weil es zusätzlich mit php arbeitet. Sonst prima Sache…