Popup: Fotos in Originalgröße + Steuerbuttons

[Schachie]

Hallo,

Ich bin mit JavaScript noch eher unerfahren und habe schon stundenlang in diversen Foren und auch hier nach Lösungen gesucht, leider aber keine gefunden, welche vollständig meinen Wünschen entspricht. Deshalb probiere ich mal meine Frage zu posten:

Auf meiner Seite befindet sich eine Bildergalerie (kleine Anzahl ca. 20 Bilder), die kleine Vorschauen (Thumbnails) der Fotos enthält. Nach Anklicken eines Thumbnails soll sich ein Popup-Fenster mit dem Foto in Originalgröße (mit automatischer Größenanpassung des Popups ans Foto) in Bildschirmmitte öffnen.

Unter dem Foto innerhalb des Popups soll sich eine kurze Fotobeschreibung, sowie die Nummer des Fotos/Gesamtanzahl (z.B. 9/20) befinden.
Weiters 3 Steuerbuttons: "Voriges Foto" "Nächstes Foto" "Schließen"

Wer könnte mir ein geeignetes Script und dessen Aufruf mittels Klick auf Thumbnail bzw. Seiten, die mit Popups mit diesen Funktionen arbeiten, nennen?

Vielen Dank!

[derletztekick]

Hallo Schachie,

Wer könnte mir ein geeignetes Script und dessen Aufruf mittels Klick auf Thumbnail bzw. Seiten, die mit Popups mit diesen Funktionen arbeiten, nennen?

100%ig ist es nicht mir Deinen Wünschen konform aber bis auf das Popup sollte es schon einmal alles erfüllen; die Diashow von Ingo Turski.

Mit freundlichem Gruß
Micha

[Schachie]

100%ig ist es nicht mir Deinen Wünschen konform aber bis auf das Popup sollte es schon einmal alles erfüllen; die Diashow von Ingo Turski.

Vielen Dank Micha, aber eine automatische Diashow ist schon etwas zu überdimensioniert für meine Anwendung. Außerdem wäre mir ein Popup lieber wo man rundherum noch die aufrufende Galerieseite sieht.

[derletztekick]

Hallo Schachie,

eine automatische Diashow ist schon etwas zu überdimensioniert für meine Anwendung.

Bei Deinen Wünschen? ;-)

Außerdem wäre mir ein Popup lieber wo man rundherum noch die aufrufende Galerieseite sieht.

Dann wird Dir wohl nichts anderes übrigbleiben, als selbst eine zu machen. Mit open() kannst Du ein PopUp erstellen. Es steht Dir frei dort eine fertige HTML-Seite reinzuladen oder eine temporäre Seite zu erstellen. Wichtig ist, das Du Deine Funktionen (Wünsche) als JS-Funktion(en) in diesem geöffneten Dokument unterbringst. Zum Schließen existiert close(); für Deine Navigation wirst Du Dir wohl etwas eigenes basteln müssen.

Clever wäre es, entweder die Bilder in einem Array abzulegen oder sie zumindest zu nummerieren, um später ein "zurück" "vor" einfach zu erstellen.

Über getElement(s)By  kannst Du Dir Zugriff auf das aktuell angezeigte Bild im PopUp holen und es austauschen. Dazu solltest Du lediglich das src-Attribut austauschen müssen.

Mit freundlichem Gruß
Micha

[Ingo Turski]

Hi,

aber eine automatische Diashow ist schon etwas zu überdimensioniert für meine Anwendung.

wieso?

Außerdem wäre mir ein Popup lieber wo man rundherum noch die aufrufende Galerieseite sieht.

Dann dürfen die Großansichten aber nur sehr klein sein, damit die darunterliegende Übersicht nicht verdeckt wird. Ich finde es weitaus sinnvoller, den Großildern den vollen Anzeigebereich zur Verfügung zu stellen und auch benutzerfreundlicher, durch Klick auf das Bild wieder zur Übersicht zu gelangen, als umständlich ein Popup zu schließen (auch wenn sich das freilich nicht ausschließt). Die meisten Browser werden sich in diesem Fall auch die Übersichtsseite als dem Cache holen und keine erneute Anrage senden.

Falls Du allerdings wirklich nur sehr wenige Bilder in der Galerie hast, könntest Du auch für jede Vergrößerung eine eigene HTML-Seite erstellen und wenn's denn sein soll diese zusätzlich zum href-Link über ein Popup öffnen lassen.

freundliche Grüße
Ingo