201120Nov

Loupe: Bildausschnitte vergrößern mit jQuery

Um Bilder mit einer virtuellen Lupe vergrößern zu können, bieten sich verschiedene Möglichkeiten an. Mit Wadda steht bereits eine Lösung bereit, die auf Canvas basiert und einen kreisförmigen Bildausschnitt einblendet, der den vergrößerten Bereich beinhaltet.
Das Ganze funktioniert auch ohne Canvas bzw. HTML5, wenn der vergrößerte Bereich rechteckig sein darf — hier könnte dann eine Lösung wie das jQuery-Plugin Loupe interessant sein, das mit rund 70 Zeilen eine ähnliche Funktionalität bietet.

jQuery Plugin - Loupe

Das Plugin lässt sich mit verschiedenen Optionen einbinden, die eingesetzt werden können wie folgt:

  • $("#element").loupe({
  • width: 200,
  • height: 150,
  • loupe: "loupe"
  • });

So lässt sich etwa die Höhe und Breite sowie die CSS-Klasse des vergrößerten Bereich einfach durch die Optionen bestimmen. Das Plugin eignet sich also gut für Produktabbildungen oder Grafiken, auf denen Details vergrößerbar sein sollen.

RSS-Feed abonnieren Bookmark bei Del.icio.us