201011Jan

Spacegallery: jQuery-Bildergalerie mit Perspektive

Für Präsentationen von Bildern gibt es viele Möglichkeiten. Neben bekannten Slide-Animationen gibt es auch immer häufiger perspektivische Effekte. Eine Bildergalerie mit räumlicher Tiefe steht mit der Spacegallery von Stefan Petre zur Verfügung. Das Skript benötigt ein Container-Element (z.B. div), welches lediglich mit den gewünschten Bildern (img) gefüllt werden muss. Anschließend werden die Bilder auf einer vertikalen Achse dreidimensional angeordnet.

Spacegallery - jQuery-Plugin

Bei einem Klick auf die Bilder wird die Bilderreihe nach vorn gefahren und das zweite Bild steht an erster Stelle. So können mehrere Bilder sehr schön angeordnet werden und sind dabei ansprechend präsentiert. Für eine bessere Darstellung sollten die Bilder einer Reihe in der gleichen Größe angelegt sein.
Das Skript besteht aus mehreren JavaScript-Dateien sowie einer CSS-Datei (etwa 15 KB insgesamt). Nach der Einbettung im head-Bereich kann das Skript auf den Bildcontainer angewendet werden:

  • $("element").spacegallery({ loadingClass: "loading" });

Die "loadingClass" beschreibt die CSS-Klasse, die für die Lade-Animation zuständig ist. Spacegallery unterstützt noch weitere Optionen, zu denen beispielsweise Animationseinstellungen und Callback-Funktionen gehören.
Stefan Petre hat noch andere jQuery-Plugins wie den ColorPicker oder Zoomimage entwickelt.

RSS-Feed abonnieren Bookmark bei Del.icio.us