201118Jan

jQuery hoverZoom: Lightbox-Alternative als Plugin

Der Begriff "Lightbox" hat sich mittlerweile als einheitliche Definition für Bild-Vergrößerungen und interaktive Bilderreihen etabliert. Es gibt unzählige Varianten und Skripte, mit denen sich Bilder auf einer Website per Klick vergrößert darstellen lassen. Dass Bildelemente aber nicht immer durch einen Klick vergrößert werden müssen, beweist Jens Martsch mit seinem jQuery-Plugin hoverZoom – hierbei werden die Vorschau-Bilder durch das "MouseOver"-Ereignis in einer Animation vergrößert.

jQuery hoverZoom - A lightbox and gallery alternative

Das Plugin bietet Entwicklern einen Komfort, der nicht selbstverständlich ist: So werden zu große Bilder in ihrer Größe reduziert, falls die Größe des Browserfensters zur vollen Darstellung nicht ausreichen sollte. Weiterhin können Bildunterschriften per "Alt"-Attribut festgelegt werden und auch diverse Option wie die Animationsgeschwindigkeit, eine Preloader-Grafik oder Easing lassen sich durch Parameter anpassen. Ein Beispiel mit den gängigen Optionen:

  • $("elemente").hoverZoom({
  • speedView: 600,
  • speedRemove: 400,
  • showCaption: true,
  • speedCaption: 800,
  • hoverIntent: true
  • });

Die Verwendung des "hoverIntent"-Plugins kann so auch deaktiviert werden. Das Plugin ist in der Minified-Version etwa 10 KB groß und kann bei GitHub heruntergeladen werden.

RSS-Feed abonnieren

Kommentare

Vincent schrieb am 21.01.2011 #1

Und auf Touchscreens?

klickreflex schrieb am 22.01.2011 #2

Finde das aus Usability-Sicht schon grob fahrlässig. Die Bilder verschwinden ja sogar, wenn man die Maus innerhalb des vergößerten Bildes bewegt. Und Tastaturbedienung geht gleich gar nicht…

Matthias schrieb am 25.01.2011 #3

Über die Usability könnte man diskutieren: Auf der einen Seite steht die Frage, ob die Bilder ausgeblendet werden sollen, sobald man die Maus von dem Bild bewegt. Auf der anderen Seite könnte man argumentieren, dass das Verschwinden des Bildes korrekt ist — das Plugin soll ja lediglich eine vergrößerte Darstellung anzeigen und kein interaktiver Bildbetrachter sein.
Natürlich ist das Skript experimenteller Natur, aber ich denke, es wird sich noch positiver entwickeln.

Jens Martsch schrieb am 02.02.2011 #4

Das Verhalten mit dem vergrößertem Bild und der Mausbewegung ist ja so gewollt. Steht auch in der Beschreibung des Plugins. Denn sonst gelangt man nicht an die Thumbnails, die unter dem vergrößerten Bild liegen.

Mit der Tastaturbedienung werde ich mal schauen was ich da machen kann. Hab mir das ganze mal auf dem iPhone angeschaut, der Zoom funktioniert wenn man auf ein Bild klickt, allerdings wird das Bild nicht richtig skaliert und es gibt keine Möglichkeit es wieder zu schließen.

Zudem ist das Ding ja Open Source, ihr habt die Möglichkeit, jederzeit Änderungen einzubringen.

Gruß
Jens

Jan schrieb am 19.02.2011 #5

Hab mir gerade mal die Demo angesehen und muss gestehen, daß ich mit dem Hover gar nicht zurecht käme. Da bleibe ich lieber bei fancybox (http://fancybox.net/), was einen ähnlichen Komfort auf Klick bietet.