einfache Fotogalerie programmieren

[the-crystalminer]

Hallo zusammen,
ich hab da mal eine Frage.Ich möchte für meine Homepage eine Fotogalerie, wie in dieser Art:http://www.cssplay.co.uk/menu/photo_simple programmieren.Meine Kenntnisse beziehen sich leider nur auf HTML und dass auch nur begrenzt.Für den Hausgebrauch reicht es,aber für mehr nicht.Da ich nun mal etwas Zeit habe möchte ich mich gerne daran versuchen,bekomme es aber absolut nicht hin.Hab schon versucht den Quelltext zu kopieren,bei mir einzufügen und für meine Bedürfnisse anzupassen,funktioniert aber nicht,verliere da die Übersicht.
Ist es möglich mir es Schritt für Schritt zu schön ruhig erkären?Ich möchte nichts vorgefertigtes verwenden,da ich gerne verstehen will was ich mache.Das macht sich später auch für kleine änderungten besser.
Ich arbeite mit Dreamweaver MX 2004,damit komme ich für mich am besten zurecht.

Besten Dank
Ingo

[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

[the-crystalminer]

Hallo LX,
ja es sollen mehrere Bilder (10 bis 20) als Thumbnails mit eingebunden werden.CSS ist absolutes Neuland für mich,sodass ich das nur durch ausprobieren und sehr langsam vorankomme.Bildunterschriften sind nicht unbedingt notwendig,mir reicht schon eine Fotogalerie,fürs erste,wie in den angegebenen Link,halt nur mit etwas mehr Bildern/Thumbnails
Wenn ich richtig verstanden habe sollte ich erst einmal eine Auflistung der Bilder vornehmen,was sich am besten für mich als Tabelle im HTML realiesieren läst.

Gruß Ingo

[JürgenB]

Hallo,

Wenn ich richtig verstanden habe sollte ich erst einmal eine Auflistung der Bilder vornehmen,was sich am besten für mich als Tabelle im HTML realiesieren läst.

das ist eine schlechte Idee. Eine Auflistung der Bilder wäre semantisch eine Liste. Per CSS kannst du die Listenpunkte und den Zeilenumbruch entfernen. So erscheinen immer so viele Vorschaubilder in einer Zeile, wie im Browserfenster des Besuchers Platz ist.

Schau dir mal u.A.

http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_type
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float

an

Gruß, Jürgen

[the-crystalminer]

Ich nochmal,die Thumbnails sollten nicht zum anklicken sein,sondern mittels Rollover funktionieren,aber ich denke das war klar.Dreamwaver erzeugt aber leider nur 2 Rollover Bilder,also nicht ganz so wie ich es brauche,diese sind auch nur übereinander gelagert.

Gruß Ingo

[LX]

Wie stellst Du Dir das mit dem Rollover praktisch vor? Wenn der Mauszeiger über das Thumbnail fährt, wird das Bild darübergelegt? Damit ist aber der Mauszeiger nicht mehr auf dem Thumbnail und das Bild wird wieder entfernt... so funktionieren Bildergalerien kaum, es sei denn, Du hast sehr, sehr kleine Bilder, bei denen die Vergrößerung des Thumbnails nur einen unwesentlichen Unterschied macht; ansonsten ist das ganze nicht mehr nutzbar.

Gruß, LX

[JürgenB]

Hallo the,

nur mal eine Frage: Warum benutzt du die im Startposting verlinkte Galerie eigentlich nicht. Wenn Sie dir in der jetzigen Form nicht gefällt, kannst du wenigstens versuchen, sie zu verstehen. Nur als grobe Hilfe:

Die Galerie besteht aus Bildern in Links in einer Liste. In jedem Listenelement ist das Bild zweimal: einmal per CSS verkleinert, einmal nach Außerhalb verschoben. Beim Mouseover (hover) wird das nach außen geschobene Bild ins Sichtfeld geholt. Die <b>s und <i>s dienen als Selektionshilfe für das CSS.

Gruß, Jürgen

[the-crystalminer]

Hallo,
werde mich nocheinmal,wie von Jürgen forgeschlagen,an der Vorlage versuchen.Aber irgendwie funktioniert die Browser Vorausschau nicht,somit sehe ich nicht in Orginal ob ich auf dem richtigen Weg bin.Vieleicht lade ich den test einfach mal hoch,mit Bildern die ich schon auf den Server habe.Probieren geht halt über....
@LX,nee meinte das so wie bei der "Vorlage",da braucht man ja auch nicht anklicken.
Danke euch aufjeden Fall für die Hilfe.

Gruß Ingo