Bildergallerie so umsetzbar?

[Jamye]

Hallo liebe Com!

Ich erstelle derzeit eine Webseite für eine Person aus meiner Verwandschaft und die hat einen Wunsch geäußert, von dem ich nicht genau weiß, ob er so umsetzbar ist.

Hier mal das Bild von dem Entwurf den ich mit Photoshop gemacht habe!




Oben auf der Seite ist ein Bild groß zu sehen.
Dieser Bereich ist eine DIV Box mit über css fest eingebundenem DIV Hintergrundbild.
Unten die einzelnen Bilder befinden sich alle in einer Box.

Mir wurde jetzt der Wunsch geäußert, dass wenn man auf eines der Bilder klickt, dieses groß in der oberen DIV Box angezeigt wird.

Das erste Vorschaubild in der Liste, soll jetzt beispielsweise das Bild sein, welches angeklickt wurde und oben angezeigt wird. Daher ist es dunkler und hat einen Transparenten harken.
Heißt, das derzeit angezeigte Bild, soll unten auch noch mal anders aussehen.

Meine Frage wäre jetzt, ob das so mit einem Javasript lösbar wäre, oder ob ich dabei auf Probleme stoßen würde und es so nicht realsierbar ist bzw. ich das mit etwas anderem als mit Javascript lösen müsste?

Meine 2. Frage wäre, wie ich es auf der Seite schaffe, in der unteren DIV Box, die Bilder so anzuordnen?
Ich habe schon gegooglet, wie man das realisieren kann und ich werde immer auf Tabellen verwiesen, mit denen das natürlich realtiv einfach umsetbar wäre.
Habe jedoch schon oft gelesen, dass die Verwendung von Tabellen auf einer Seite veraltet ist.
Ist das Zeitgemäß die Bilderanordnung mit einer Tabelle zu lösen oder gibt es schon modernere und praktikablere Lösungsansätze die Gallerie so darzustellen?

Schon einmal vielen Dank für die Hilfe!

 

[lachender_engel]

Ja, Deine Wünsch lassen sich sehr gut mit jQuery umsetzen. Um es flexibel zu machen brauchst Du noch PHP.

Zu der Tabellen-Phobie ist zu sagen, dass Du keine Tabellen für gestalterische Aufgaben nutzen solltest. Willst Du eine Tabelle darstellen, dann nutze auch eine Tabelle.

Die Aufgabe mit den Bildern, unten, wird klassich mit einer Liste (ul-li) gelöst die rechts float-ed.

Mein Tipp ist noch, dass Du bei der Umsetzung auch Auflösungen von Smartphone und Tablets berücksichtigst (Stichwort: Responsive oder besser Fluid Design).

 

[Jamye]

Sehr schön, vielen Dank für die schnelle und tolle Antwort.
Heißt zu der Tabellengeschichte also: Nur Tabellen verwenden, wenn auch eine Tabellenansicht gewünscht ist und ansonsten die Objekte immer über dementsprechende Tags zu setzen, aber nicht über eine Tabelle zu positionieren?!
Das mit ul-li werde ich gleich mal probieren, das dürfte wohl sogar weniger arbeitsaufwand sein als mit einer Tabelle.

Bei jQuery arbeite ich mich jetzt erst mal durch ein Tutorial durch...ich denke danach verstehe ich dann auch, wieso ich zusätzlich PHP nutzen soll.

 

[lachender_engel]

Bei jQuery arbeite ich mich jetzt erst mal durch ein Tutorial durch...ich denke danach verstehe ich dann auch, wieso ich zusätzlich PHP nutzen soll.

PHP brauchst Du nicht um die Funktion selber umzusetzen. Das machst Du mit HTML und jQuery.

Wenn Du das Ganze flexibler gestalten willst, brauchst Du PHP.
Zum Beispiel kannst Du mit PHP alle Bilder eines Verzeichnisses einlesen und Deine Galerie/Anzeige dynamisch bauen lassen. Dann brauchst Du ein neues Bild nur in das Verzeichnis zu kopieren und schon erscheint es mit auf der Seite, ohne dass Du den Code verändern musstest. Oder Du kannst die Sortierung beeinflussen oder einen Filter einbauen (ok, das geht auch mit jQuery).

Nur für so etwas brauchst Du PHP.

 

[Jamye]

Achso,
das ist natürlich auch noch mal eine super Idee, so weit hatte ich gar nicht gedacht.

Ich bin mittlerweile am basteln und komme nun schon mal so weit, dass wenn ich ein Bild anklicke es groß in eine Box geladen wird.

Danke für deine tolle Hilfe! =)