200926Jan

jQuery: Bildervorschau bei MouseOver

Das JavaScript-Framework jQuery bietet von Haus aus schöne Effekte und Eigenschaften, durch die sich Websites beleben und modernisieren lassen. Bei jQuery gibt es zudem Plugins, die von der Community entwickelt werden, um das wundervolle Framework und individuelle Funktionen zu erweitern. So benutze ich zum Beispiel das Plugin "Background-Position Animation" von Alexander Farkas, um meine Navigation zu animieren.

James Padolsey hat nun ein nützliches Plugin für das Anzeigen von Vorschaubildern (Thumbnails) veröffentlicht: Es nennt sich imgPreview und blendet beim Bewegen des Mauszeigers über einen Link (MouseOver-Event) ein Thumbnail ein, welches durch eine abgerundete Fläche eingerahmt ist. Dieser Tooltip-Effekt kann zur Benutzerfreundlichkeit der Website beitragen, da der Benutzer eine Vorschauversion des Originalbildes zu sehen bekommt. Somit kann er früher entscheiden, ob der das Bild in Originalgröße sehen möchte oder nicht.
Der positive Nebeneffekt des Plugins besteht darin, dass es sich bei den Thumbnails um eine verkleinerte Version des Originalbildes handelt — somit wird das eigentliche Bild schon beim MouseOver vorgeladen, so dass beim Klick auf den entsprechenden Link keine Ladezeit besteht. Beim Laden des jeweiligen Bildes wird sogar eine kleine Animation angezeigt.

imgPreview

Das Plugin lässt sich sehr einfach in eine bestehende Website integrieren. Neben dem Einbetten der jQuery-Bibliothek und des imgPreview-Plugins im <head>-Bereich der Seite wird folgender Code benötigt:

  • $('a.preview').imgPreview ({
  • imgCSS: {
  • width: '150px'
  • }
  • });

So wird allen Links (<a>) mit der Klasse "preview" auf der Seite der imgPreview-Effekt zugewiesen. Die Breite (width) wurde auf 150px festgelegt, so dass alle Bilder auf diese Breite skaliert werden — die Proportionen der Bilder bleiben dabei erhalten. Umgekehrt lässt sich natürlich auch eine feste Höhe festlegen.

Das Plugin bietet noch weitere Optionen, die man sich auf der Seite des Programmierers anschauen kann. Dieses Script sollte in keiner jQuery-Plugin-Sammlung fehlen.