Dynamische Bild-Popups optimieren

[Mr. Horse]

Hallo,

ich habe eine Fotogalerie aus Thumbnails. Bei Klick auf ein Thumbnail soll ein Fenster aufpoppen, welches das Foto in voller Größe sowie Titel und Bildbeschreibung zeigt.
So weit, so unspektakulär.

Da ich faul bin, möchte ich nun aber nicht für jedes Foto-Popup eine eigene HTML-Datei erstellen, mit PHP/MySQL möchte ich aber auch nicht anrücken.

Eine weitere Anforderung ist es, die vergrößerten Bilder auch Benutzern ohne Javascript zur Verfügung zu stellen.

Mein Ansatz ist daher, Titel, URL des großen Bildes und Bildtext in der Galerieseite zu halten und dynamisch in das Popup zu schreiben. Gleichzeitig möchte ich, daß die Größe des Popups sich automatisch an diesen Inhalten (Titel + Bild + Bildtext) ausrichtet.

Meine aktuelle Lösung scheint mir etwas schwerfällig zu sein. Ich gehe so vor:

1. Ein Link in der Galerie sieht so aus:
   <div>
    <h2>Stimpy</h2>
    <a href="stimpy.gif" onclick="return magnifyImage(this);"><img src="stimpy_t.jpg" /></a>
    <span style="display:none;">Dies ist ein tolles Bild</span>
   </div>

2. Die Funktion magnifyImage() lädt unter Einsatz eines Intervalls zunächst einmal das große Foto vor.

3. In ein dynamisch erzeugtes DIV-Element schreibe ich nun die Überschrift (lese ich aus der H2 in der Galerie), das Bild (das vorgeladene image-Objekt) und den Bildtext (lese ich aus dem unsichtbaren SPAN-Element in der Galerie).

4. Ich ermittle die Maße dieses dynamisch erzeugten DIVs und öffne ein Popup mit der entsprechenden Größe:
   var imgPopup = window.open('', 'image', 'width='+windowWidth+', height='+windowHeight+', resizable=yes');
   Bis hierhin klappt alles.

5. Nun müßte ich die Inhalte aus dem dynamisch erzeugten Container-DIV in das Popup übertragen. Dieses hat allerdings kein BODY-Objekt, auf das ich zugreifen kann. Ein mit document.write() erzeugtes BODY-Element bereitet dem IE Probleme (er kann darauf nicht mit appendChild() zugreifen). Eine Alternative wäre es, für alle Popups eine leere HTML-Datei als Container zu verwenden.

Tja - wie gesagt: mir kommt das Ganze recht sperrig vor. Allerdings habe ich im Moment auch keine deutlich bessere Idee.
Weiterer Nachteil ist, daß im Moment Benutzer mit CSS und ohne Javascript die Bildtexte (das SPAN-Element) nicht zu sehen bekommen.

Vielleicht habt Ihr ja die eine oder andere Anregung für mich.

Thanx,
Mr. Horse

[wahsaga]

hi,

4. Ich ermittle die Maße dieses dynamisch erzeugten DIVs und öffne ein Popup mit der entsprechenden Größe:

Warum denn noch ein neues Fenster?
Du hast bereits alles, was du anzeigen willst, in diesem Div stehen - also zeige diesen doch jetzt einfach an.

Dieses Vorgehen setzt sich immer mehr durch, seitdem jemand der Menschheit die lightbox.js geschenkt hat.

gruß,
wahsaga

[Mr. Horse]

Hallo,

Dieses Vorgehen setzt sich immer mehr durch, seitdem jemand der Menschheit die lightbox.js geschenkt hat.

ja, die "lightbox" hat mir ein Freund gerade eben auch empfohlen.
Sieht in der Tat sehr, sehr gut aus - und Du hast vollkommen recht: wozu ein Popup?

Einziger Wermutstropfen: ich komme schon wieder nicht dazu, endlich mal wieder selbst ein bißchen Javascript zu schreiben...
:/

Thanx,
Mr. Horse