einfache Fotogalerie programmieren

[LX]

Zunächst einmal solltest Du Dir klar sein, dass die Erstellung einer Bildergalerie vor allem Fleißarbeit ist. Damit der Server Dir diese Fleißarbeit abnimmt, kannst Du eine Programmiersprache wie PHP verwenden (um nicht alles selbst x-mal zusammenfügen zu müssen).

Alternativ kannst Du noch die Galerie mittels JavaScript so automatisieren, dass Nutzer, bei denen diese Sprache aktiv ist, nicht jede Seite neu laden müssen.

Ansonsten funktionieren Bildergalerien meistens ziemlich gleich: es gibt mindestens eine Übersichtsseite mit Thumbnails, also verkleinerten Vorschauen der Bilder (hier bietet es sich an, tatsächlich verkleinerte Versionen der Bilder vorzuhalten, da die Ladezeiten so erheblich kürzer gehalten werden).

Diese Thumbnails sind auf das Vollbild verlinkt (teilweise auch im Popup oder optional per JS im Layer).

Wenn Du sehr viele Bilder hast, ist es ratsam, mehrere Übersichtsseiten zu verwenden, zwischen denen der Nutzer noch navigieren können muss.

Kommen wir zur HTML/CSS-Struktur der Übersichtsseite. Die Auflistung der Bilder entspricht semantisch am Ehesten der einer ungeordneten Liste (ul); falls Bildunterschriften verwendet werden sollen, kommt theoretisch auch eine Definitionsliste (dl) in Frage, das macht jedoch die Formatierung etwas komplizierter. Die lis werden in CSS mittels float: left; so formatiert, dass die Bilder nebeneinander angezeigt werden und am Rand des umgebenden Elements umbrechen.

Wenn Du nun ein grobes Gerüst nach diesem Schema aufgebaut und weitere Fragen hast, kannst Du gerne auf diesen Thread zurückkommen (Doppelpostings zum gleichen Thema sind hier unerwünscht).

Gruß, LX