201016Aug

jQuery Image Scroller: Mini-Vorschau zur Navigation

Kürzlich berichtete ich über das jQuery-Plugin miniZoomPan, mit dem sich Bildausschnitte eines größeren Bildes in einem Ausschnitt bewegen lassen. Ein ähnliches Skript gibt es nun von Trevor Davis: Mit dem jQuery Image Scroller wird eine kleine Vorschau eines Bildes eingeblendet, über die das Ursprungsbild angesehen und verschoben werden kann.

 jQuery Image Scroller

In dem Blog-Eintrag werden die verschiedenen Teiles des Plugins beschrieben. Zudem gibt es eine Demo-Seite, auf der das Skript getestet werden kann. Die Implementierung erfolgt wie gehabt:

  • $(document).ready(function() {
  • $("element").imageScroller();
  • });

Auf der Miniatur-Vorschau wird also eine graue Fläche angezeigt, die den sichtbaren Bereich repräsentiert. Wird sie mit der Maus bewegt, verschiebt sich dementsprechend das Original-Bild im Sichtbereich. Dadurch können alle Bereiche von größere Grafiken (wie etwa von Produktbildern) im Detail angesehen werden. Das Skript ist momentan auf ein vertikales Verschieben ausgelegt, so dass die Breite des Original-Bildes festgelegt werden muss. Eventuell folgt bald eine Möglichkeit für eine horizontale Verschiebung.

RSS-Feed abonnieren Bookmark bei Del.icio.us Bookmark bei Mister Wong