201322Nov

Magnifier.js: Bilddetails durch Lupeneffekt vergrößern

Mit Loupe und Wadda stehen zwar schon ähnliche Skripte zur Verfügung, doch nicht immer ist ein jQuery-Plugin gewünscht und auch die Verwendung des Canvas-Elements, die es bei Wadda der Fall ist, ist nicht zwingend erforderlich. Daher könnte das Standalone-Skript Magnifier.js ein nützliches Hilfsmittel sein, wenn es um die Vergrößerung von Bildausschnitten auf einer Website geht.

Magnifier.js - Javascript library enabling magnifying glass effect on an images

Die Funktionsweise ist denkbar einfach: Wird der Mauszeiger über eine Grafik der Website bewegt, entsteht ein Lupeneffekt und der entsprechende Bereich wird vergrößert. Mit dem Mausrad lässt sich zudem die Zoom-Stufe einstellen. Eine Beispiel-Einbindung von Magnifier.js:

  • var evt = new Event(),
  • m = new Magnifier(evt);
  •  
  • m.attach({
  • thumb: '#thumb',
  • large: 'bild.jpg',
  • mode: 'inside',
  • zoom: 3,
  • zoomable: true
  • });

Das Projekt findet sich wieder bei GitHub zum Download.