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.

Kommentarfunktion für diesen Artikel geschlossen.