Bildergalerie

[Kris]

Hallo,
ich möchte eine Bildergalerie aufbauen, wo ich auf meiner Seite am linken und rechten Rand Thumbnails habe und beim Anklicken das Originalbild in der Mitte angezeigt wird. Dabei sollen diese Bilder unterschiedlich aufgebaut werden. Zum Beispiel soll ein Bild von oben "wachsen", das nächste von unten, von links, von rechts. Oder sich von links oder rechts "reinschieben".
Welche Möglichkeiten gibt es da?

Im Vorraus danke, Kris

[bleicher]

Hallo,
ich möchte eine Bildergalerie aufbauen, wo ich auf meiner Seite am linken und rechten Rand Thumbnails habe und beim Anklicken das Originalbild in der Mitte angezeigt wird. Dabei sollen diese Bilder unterschiedlich aufgebaut werden. Zum Beispiel soll ein Bild von oben "wachsen", das nächste von unten, von links, von rechts. Oder sich von links oder rechts "reinschieben".

ich konnte wetten, dass exact diese Frage hier schon mal gestellt wurde.

was möglichkeiten angeht - sofern die bilder "nummerisch" sortiert sind könnte JS eine möglichkeit anbieten.
Was die "reinschelciheffekte" angeht  - sei ehrlich - magst du diese in fremden gallerien?

wäre aber auch mit JS realisierbar.

ich emfhele aber eine vorgefertige Lösung, die kann man googeln.

bleicher

[Kris]

ich konnte wetten, dass exact diese Frage hier schon mal gestellt wurde.

was möglichkeiten angeht - sofern die bilder "nummerisch" sortiert sind könnte JS eine möglichkeit anbieten.
Was die "reinschelciheffekte" angeht  - sei ehrlich - magst du diese in fremden gallerien?

wäre aber auch mit JS realisierbar.

ich emfhele aber eine vorgefertige Lösung, die kann man googeln.

bleicher

Tut mit leid, wenn diese Frage in diesem Forum schon gestellt wurde. Aber ich hatte bereits versucht, hier einen entsprechenden Beitrag zu finden. Dies ist mir leider nicht gelungen.

Und ob mir die Effekte gefallen oder nicht, das sei mal dahin gestellt. Ich suche einfach eine Möglichkeit, sie zu realisieren. An Google dachte ich natürlich auch schon. Möglich, dass mir einfach nicht die richtigen Schlagwörter einfallen, aber ich fand nicht das, was ich suche. Daher hatte ich gehofft, dass mir hier vielleicht jemand helfen könnte.

Kris

[D.R.]

Hallo,

Tut mit leid, wenn diese Frage in diesem Forum schon gestellt wurde. Aber ich hatte bereits versucht, hier einen entsprechenden Beitrag zu finden. Dies ist mir leider nicht gelungen.

Dazu steht sogar was <http://de.selfhtml.org/dhtml/beispiele/bilderbuch.htm@title=in der Dokumentation>.

Und ob mir die Effekte gefallen oder nicht, das sei mal dahin gestellt.

Fakt ist, dass es diese Effekte um einiges schwieriger machen. Vor allem, weil es ohne JavaScript überhaupt nicht realisierbar ist.
Falls du dagegen auf diese Effekte verzichten kannst, wäre das Ganze auch mit PHP machbar[1], sofern das dein Provider unterstützt versteht sich.

[1] Du kannst JavaScript nicht voraussetzen. Eine Seite sollte auch immer ohne JS funktionieren (wenn auch weniger komfortabel). Mit serverseitigen Techniken (wie z.B. PHP), kannst du die Seiten dagegen gleich zusammen mit der entspr. Referenz zum Bild an den User schicken.
Welches Bild dann in der HTML-Datei referenziert werden soll, könntest du dann ganz einfach mit einer get-Variable regeln.

mfg. Daniel

[Kris]

Dazu steht sogar was <http://de.selfhtml.org/dhtml/beispiele/bilderbuch.htm@title=in der Dokumentation>.

Danke für den Hinweis. Allerdings hatte ich gehofft, eine "abwechslungsreichere" Möglichkeit zu finden. Also dass nicht alle Bilder gleich aufgebaut werden, sondern das erste vielleicht von rechts "eingeschoben", das nächste von der Mitte her aufbauend und das dritte wieder anders. Sowas habe ich leider nicht gefunden.

Fakt ist, dass es diese Effekte um einiges schwieriger machen. Vor allem, weil es ohne JavaScript überhaupt nicht realisierbar ist.
Falls du dagegen auf diese Effekte verzichten kannst, wäre das Ganze auch mit PHP machbar[1], sofern das dein Provider unterstützt versteht sich.

Mir geht es momentan allerdings mehr um die Effekte, als um die Galerie selbst. Sorry, falls das missverständlich war. Ich habe bereits eine Idee, wie ich das Grundgerüst mit den Thumbnails und den Originalbildern aufbaue. Mir fehlen nur die Effekte, auf welche ich notfalls natürlich auch verzichten könnte. Aber wenn ich eine Lösung dafür fände, wäre mir das lieber. Und wenn sich das nur mit JS machen lässt, dann würde ich es auch damit versuchen. Ich bin mir der Vorteile von PHP zwar bewusst, aber in diesem Fall würde ich einfach mal darauf verzichten.

Kris

[Aikidoka]

Hallo!
Um solche Effekte zu erreichen musst du per DOM die Eigenschaften heigh, width, oder position verändern. Hier kannst du noch einen Effekt finden, den du dir anschauen kannst. Aber lerne nicht JavaScript mit diesem Buch! Das ist nicht zu empfehlen.
gruß, aikidoka

[D.R.]

Hallo,

Dazu steht sogar was <http://de.selfhtml.org/dhtml/beispiele/bilderbuch.htm@title=in der Dokumentation>.

Danke für den Hinweis. Allerdings hatte ich gehofft, eine "abwechslungsreichere" Möglichkeit zu finden. Also dass nicht alle Bilder gleich aufgebaut werden, sondern das erste vielleicht von rechts "eingeschoben", das nächste von der Mitte her aufbauend und das dritte wieder anders. Sowas habe ich leider nicht gefunden.

HTML ist halt nicht „Impress“ oder „Power Point“, deshalb wird es nicht so einfach sein, etwas derartiges zu realisieren.

Mal ein paar Vorschläge, mit welchen CSS-Eigenschaften man solche Effekte umsetzen könnte:
 • Verschiebung: position:relative und einem wert für left/top/bottom oder right
 • opacity:0.x -> Langsames ein-/ausblenden der Bilder in modernen Browsern (FF, Opera >= 9, IE >= 7)
 • width/ height -> Größe ändern

Das wären ein paar Möglichkeiten, die mir einfielen. Um das Ganze beweglich zu machen, müsstest du eine Funktion mit window.setTimeout in gleichmäßigen Abständen immer weider aufrufen und der Wert jeweils ein wenig erhöhen oder verkleinern (speichere ihn dir am Besten in einer Variable).

Willst du das Ganze dann auch noch nach Zufall ablaufen lassen, könntest du Math.random verwenden.

Das Problem, gegenüber einem normalen Bildwechsel ist, dass immer mindestens 2 Bilder gleichzeitig angezeigt werden müssen und du deshalb nicht einfach das src-Attribut ändern kannst.

Fakt ist, dass es diese Effekte um einiges schwieriger machen. Vor allem, weil es ohne JavaScript überhaupt nicht realisierbar ist.
Falls du dagegen auf diese Effekte verzichten kannst, wäre das Ganze auch mit PHP machbar[1], sofern das dein Provider unterstützt versteht sich.

Mir geht es momentan allerdings mehr um die Effekte, als um die Galerie selbst. Sorry, falls das missverständlich war.

Naja, das war es eigentlich nicht!
Ich wollte dich lediglich warnen ;-)

Ich habe bereits eine Idee, wie ich das Grundgerüst mit den Thumbnails und den Originalbildern aufbaue. Mir fehlen nur die Effekte,

s.o.

Und wenn sich das nur mit JS machen lässt, dann würde ich es auch damit versuchen. Ich bin mir der Vorteile von PHP zwar bewusst, aber in diesem Fall würde ich einfach mal darauf verzichten.

Es geht aber doch nicht um deinem Vorteil, sondern um den Vorteil deiner Anwender. Aber vielleicht kannst du ja auch einfach beides irgendwie kombinieren, sodass User ohne JS eben keine Animationen sehen, sich aber trotzdem die Bilder anschauen können.

mfg. Daniel