template

Index :: Javascript :: Bildergalerie

Reine HTML-Bildergalerien arbeiten oft mit einem Navigationsframe (für Thumbnails) und einem Hauptframe (für das Originalbild). Auch Mechanismen zum Vor- und Zurückblättern können mit geringem Aufwand realisiert werden.
Manchem Webdesigner mit höherem Infotainment-Anspruch ist dies jedoch zu altmodisch, und so greift man gerne auch auf Flash-Module zurück, die aufgrund ihrer Animations- und Zoomeffekte sowie intuitiver Bedienung das Durchstöbern von Fotoalben ansprechend machen sollen.
Natürlich lassen sich bereits mit Javascript eine Menge interessanter Features einbauen, um eine Galerie dynamischer und lebendiger zu gestalten. Dabei kommt vor allem die Timer-Funktion zum Einsatz, mit deren Hilfe man etwas Bewegung in die Sache bringen kann.

Fly-out ( Demo)
Bei Klick auf ein Symbol oder Thumbnail wird ein Rahmen aufgezogen, der dann das Bild in Originalgröße anzeigt.
Geeignet für Bilder, die örtlich, topografisch oder hierarchisch in einem Zusammenhang stehen, und deren Symbole (bzw. Thumbnails) in einer übergeordneten Struktur (z.B. Image-Map, Landkarte, Stadtplan, Grundriss oder Familienstammbaum) angeordnet werden können.
Durch Position/Abstand der Symbole innerhalb eines Diagramms oder eines Plans gewinnt der Betrachter zusätzliche Informationen (z.B. Aufnahmeort, Kamerawinkel oder Verwandtschaftsgrad), die mittels Text evtl. schwierig zu vermitteln wären.
Thumbnails dynamischer Größe ( Demo)
Alle Thumbnails werden zunächst in verminderter Größe (z.B. halbe Kantenlänge) angezeigt. Erst bei Mausberührung wächst das jeweilige Element auf seine eigentliche Vorschaugröße an; beim Verlassen schrumpft es wieder.
Dadurch passen mehr (hier: doppelt so viele) Elemente in die Vorschauleiste; ein Scrollen ist oft nicht mehr nötig.

Index :: Javascript

template