Großansicht von Bildern

[Nadja]

Hallo,

habe folgendes Problem:

Ich habe 5 Produktgruppen mit unterschiedlichen Namen. Zu jeder Produktgruppe gibt es mehrere Produkte, die jeweils ein eigenes Produktbild haben.

Ich soll nun folgendes realisieren:
Bin ich z.B. in der Produktgruppe 1 beim ersten Produkt und klicke da auf das verkleinerte Produktbild, soll ein Fenster aufgehen mit der Großansicht des Bildes. Unter dem Bild soll eine kleine Navigation zu finden sein, mit der ich zwischen den einzelnen Produktbildern der einen Produktgruppe hin- und herblättern kann, also quasi
<< 3/6 >>

Soweit ist das kein Problem.

Das Problem ist nur, dass dann, wenn ich im Hauptfenster ein Produktbild einer anderen Produktgruppe anklicke, das "alte" PopUp geöffnet bleiben, für die neue Produktgruppe aber ein neues aufgehen soll, sodass ich quasi 3 Fenster offen habe:

• Hauptfenster
• Großansicht eines Produktes der Produktgruppe X
• Großansicht eines Produktes der Produktgruppe Y

Außerdem sollen die Fenster, die aufgehen, so breit wie das Bild und so hoch wie das Bild + die kleine Navigation sein.

Hat jeman einen Tipp, wie ich da rangehen kann?

Liebe Grüße,
Nadja

[Nadja]

Hallo,

P.s.: Serverseitige Sprachen wie PHP kann ich nicht verwenden, es sollte also mit HTML und, wenn nötig, JS realisierbar sein :(

Liebe Grüße,
Nadja

[Felix Riesterer]

Liebe Nadja,

vielleicht hilft Dir meine Popup-Lösung ohne neues Fenster...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Nadja]

Hallo,

vielleicht hilft Dir meine Popup-Lösung ohne neues Fenster...

Danke für den Link!
Ist wirklich schick, aber Cheffe verlangt ein neues Fenster :(

Liebe Grüße,
Nadja

[Christian]

Hallo Nadja.

Das Problem ist nur, dass dann, wenn ich im Hauptfenster ein Produktbild einer anderen Produktgruppe anklicke, das "alte" PopUp geöffnet bleiben, für die neue Produktgruppe aber ein neues aufgehen soll, sodass ich quasi 3 Fenster offen habe:

• Hauptfenster
• Großansicht eines Produktes der Produktgruppe X
• Großansicht eines Produktes der Produktgruppe Y

Du kannst dem Fenstern beim Öffnen Namen geben. Wenn du immer den gleichen Namen verwendest sollte das Fenster mit neuem Inhalt weiterverwendet werden.
Sollte das nicht funktionieren kannst du das Fensterobjekt in einer Variable speichern und jedesmal, wenn ein Fenster geöffnet wird folgendes tun:

Wenn die Variable noch nicht gesetzt ist:
Fenster normal öffnen

Wenn die Variable existiert und das Fenster geschlossen wurde:
Fenster normal öffnen

Wenn die Variable existiert und das Fenster noch nicht geschlossen wurde:
Das Fenster evtl. in der Größe anpassen und den neuen Inhalt laden

Hier was zum Umgang mit Fenstern:
http://de.selfhtml.org/javascript/objekte/window.htm

Außerdem sollen die Fenster, die aufgehen, so breit wie das Bild und so hoch wie das Bild + die kleine Navigation sein.

Hat jeman einen Tipp, wie ich da rangehen kann?

Wenn die Bilder unterschiedlich groß sind müsstest du beim Öffnen übergeben, wie groß das Fenster nachher sein soll bzw. du übergibst die Bildgröße und errechnest daraus die benötigte Fenstergröße.
Der Einfachheit halber solltest du dir eine Öffnen-Funktion bauen.
Eine mögliche Funktion könnte folgende Parameter übergeben bekommen:

function oeffne(Fenstername,xGroesse,yGroesse,url) { [...]

Grüße
  Christian

[Nadja]

Hallo,

Danke für die ausführliche Antwort :)
Hab nur eine Denkblockade:
Wenn jetzt ein Benutzer mit der Navigation in dem PopUp arbeitet, wie gewährleiste ich, dass die Folgeseiten auch in diesem Fenster angezeigt werden?
Brauche ich da nicht auch eine JS-Funktion?

Liebe Grüße,
Nadja

[Christian]

Hallo,

Danke für die ausführliche Antwort :)
Hab nur eine Denkblockade:
Wenn jetzt ein Benutzer mit der Navigation in dem PopUp arbeitet, wie gewährleiste ich, dass die Folgeseiten auch in diesem Fenster angezeigt werden?
Brauche ich da nicht auch eine JS-Funktion?

Nein. Ein Link bezieht sich immer auf das Fenster (bzw. den Frame) in dem er sich befindet. Du bräuchtest nur dann JavaScript wenn du aus dem Ursprungsfenster im PopUp (oder umgekehrt) navigieren willst.

[Nadja]

Hallo,

Nein. Ein Link bezieht sich immer auf das Fenster (bzw. den Frame) in dem er sich befindet. Du bräuchtest nur dann JavaScript wenn du aus dem Ursprungsfenster im PopUp (oder umgekehrt) navigieren willst.

Das verstehe ich.
Da die Seite bzw. das PopUp aber dynamisch generiert wird, auf was soll ich denn dann beim href-Attribut verweisen? Das raff ich nicht so ganz...

Liebe Grüße,
Nadja

[Christian]

Hallo.

Da die Seite bzw. das PopUp aber dynamisch generiert wird, auf was soll ich denn dann beim href-Attribut verweisen? Das raff ich nicht so ganz...

Was verstehtst du unter "dynamisch generiert"? Ich dachte dir stehen keine serverseitigen Sprachen zu Verfügung.
Oder wird der Dokumentbaum mittels JavaScript manipuliert bzw. der Dokumentinhalt mittels JavaScript geschrieben?

Das Öffnen eines Pop-Ups und laden einer html-Seite in dieses ist noch nichts wirklich dynamisches.
Das Pop-Up ist für den Browser ein Fenster wie jedes andere auch. Du Verweist im href Attribut also wie sonst auch auf die Seite, die du im Pop-Up öffnen möchtest. Relative URLs beziehen sich in diesem Fall auf den Pfad relativ zur URL des Pop-Ups.

Grüße
  Christian

[Nadja]

Hallo,

Oder wird der Dokumentbaum mittels JavaScript manipuliert bzw. der Dokumentinhalt mittels JavaScript geschrieben?

Ja, so ist es.
Auf meiner Testseite hab ich das jedenfalls mal so ausprobiert.

Das Öffnen eines Pop-Ups und laden einer html-Seite in dieses ist noch nichts wirklich dynamisches.

Das weiß ich wohl ;)
Aber eine Seite "on the fly" generieren ist für mich schon dynamisch.

Das Pop-Up ist für den Browser ein Fenster wie jedes andere auch. Du Verweist im href Attribut also wie sonst auch auf die Seite, die du im Pop-Up öffnen möchtest. Relative URLs beziehen sich in diesem Fall auf den Pfad relativ zur URL des Pop-Ups.

Ja, aber: Kein Dateiname bzw. keine real existierende HTML-Datei - Keine Verlinkung auf irgendwas, oder sehe ich was falsch?

Liebe Grüße,
Nadja

[Christian]

Hallo.

Das weiß ich wohl ;)
Aber eine Seite "on the fly" generieren ist für mich schon dynamisch.

Letztendlich macht das keinen Unterschied. Dem Browser ist es egal, wann der Link geschrieben wurde. Sofern er ihn interpretiert funktioniert er genau so, als wäre er von Anfang an da gewesen.

Mein Opera sagt mir, dass dein Pop-Up die Adresse
http://www.markenhansa.de/nadja/popup.html
als Basis benutzt (Also das Verzeichnis des großen Fensters). Ob das andere Browser auch so sehen müsste man ausprobieren.

Dein Problem ist sicherlich, dass dein weiter-Link nicht funktioniert. Das liegt aber nicht an der "dynamik", sondern eher an der Parameter-Reihenfolge:

Damit öffnest du das Pop-Up
javascript:oeffneFenster('Testfenster1','gleichgewicht_1_big.jpg',600,600,1);

Das ist dein weiter-Link:
javascript:oeffneFenster("Testfenster1",600,600,2,"gleichgewicht_2_big.jpg");

Und das ist die Funktion:
function oeffneFenster(fenster,bild, b, h, seite)

Vielleicht verschwindet dein Problem schon, wenn du keine Größenangaben als URLs übergibst ;-)

Grüße
  Christian

[Nadja]

Hallo,

Dein Problem ist sicherlich, dass dein weiter-Link nicht funktioniert. Das liegt aber nicht an der "dynamik", sondern eher an der Parameter-Reihenfolge:

Oups, danke für den Hinweis.

Vielleicht verschwindet dein Problem schon, wenn du keine Größenangaben als URLs übergibst ;-)

Nee, funktioniert immernoch nicht. Ich werd mir einfach etwas anderes einfallen lassen.
Hab meinen Chef jetzt überreden können, doch PHP zu benutzen, dann ist das nicht mehr so schwer ;)

Achja, eine JS-Frage hab ich noch: Kann man mit JS die Breite bzw. die Höhe einer Grafik herausfinden? Gibt es sowas wie bla.getWidth??

Liebe Grüße,
Nadja

[Ashura]

Hallo Nadja.

Achja, eine JS-Frage hab ich noch: Kann man mit JS die Breite bzw. die Höhe einer Grafik herausfinden? Gibt es sowas wie bla.getWidth??

Ja. Entweder direkt über height und width des übergebenen (image) Objektes, oder über width und height als Unterobjekt des style-Objektes.

So z. B.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
  <head>  
    <title>New Document</title>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    <script type="text/javascript">  
  
    [code lang=javascript]function getDimensions(img)  
    {  
    if(img.style.height && img.style.width)  
    {  
    alert('CSS-Height: ' + img.style.height + '; CSS-Width: ' + img.style.width);  
    }  
    else if(img.height && img.width)  
    {  
    alert('Height: ' + img.height + '; Width: ' + img.width);  
    }  
    }

</script>
  </head>
  <body>
    <p><img src="/pfad/zum/bild.gif" height="50" width="200" onclick="getDimensions(this);" style="height:60px;width:210px;" /></p>
    <p id="dim"></p>
  </body>
</html>[/code]

Einen schönen Donnerstag noch.

Gruß, Ashura

[Nadja]

Hallo,

Achja, eine JS-Frage hab ich noch: Kann man mit JS die Breite bzw. die Höhe einer Grafik herausfinden? Gibt es sowas wie bla.getWidth??

Ja. Entweder direkt über height und width des übergebenen (image) Objektes, oder über width und height als Unterobjekt des style-Objektes.

Danke :)
Mir ist gerade aufgefallen, dass ich das für's aktuelle Projekt zwar nicht brauche, da alle Bilder gleich groß sind, aber irgendwann brauch ich das bestimmt mal ;)

Liebe Grüße,
Nadja

[Ingo Turski]

Hi,

aber irgendwann brauch ich das bestimmt mal ;)

bedenke dann aber auch, daß diese Abfrage erst funktioniert, wenn das Bild geladen ist.
Und wenn Du vorhaben solltest, nach Öffnen eines Popups dessen Größe zu verändern, kannst Du an den Browsereinstellungen scheitern - ich lasse so etwas grundsätzlich nicht zu.

freundliche Grüße
Ingo

[Nadja]

Hallo Ingo,

bedenke dann aber auch, daß diese Abfrage erst funktioniert, wenn das Bild geladen ist.
Und wenn Du vorhaben solltest, nach Öffnen eines Popups dessen Größe zu verändern, kannst Du an den Browsereinstellungen scheitern - ich lasse so etwas grundsätzlich nicht zu.

Achso... Aber wie schafft man es denn dann folgendes:

• Ein PopUp, welches ein Bild enthält, dessen Höhe und Breite vorher unbekannt ist.
• Über und unter dem Bild sollen nochmal 50px frei sein.

Wie realisiert man denn sowas?

Liebe Grüße,
Nadja

[Ingo Turski]

Hi,

Achso... Aber wie schafft man es denn dann folgendes:

• Ein PopUp, welches ein Bild enthält, dessen Höhe und Breite vorher unbekannt ist.
• Über und unter dem Bild sollen nochmal 50px frei sein.

Wie realisiert man denn sowas?

in meinem Browser - gar nicht. ;-)
Dazu müßte die Größe _vor_ dem Öffnen des Popups bekannt sein, damit das Fenster gleich in der passenden Größe geöffnet wird. Und selbst dann kann die Höhe aufgrund des unbekannten Platzbedarfs meiner angezeigten Leisten nicht genau angegeben werden.

freundliche Grüße
Ingo

[Nadja]

Hallo Ingo Turski,

in meinem Browser - gar nicht. ;-)
Dazu müßte die Größe _vor_ dem Öffnen des Popups bekannt sein, damit das Fenster gleich in der passenden Größe geöffnet wird. Und selbst dann kann die Höhe aufgrund des unbekannten Platzbedarfs meiner angezeigten Leisten nicht genau angegeben werden.

Also vergisst man sowas ganz schnell wieder *g*

Hab dir übrigens eineE-Mail geschrieben wegen deinem Artikel über die CSS-Infobox auf deiner Webseite.
Nicht, dass du die als Spam abtust und löscht ;)

Liebe Grüße,
Nadja

[Ingo Turski]

Hi,

Hallo Ingo Turski,

so löst Du also das Problem mit vname..;-)

Nicht, dass du die als Spam abtust und löscht ;)

Keine Sorge, mein spam-Filter ist recht gut trainiert und ahatte gerade nur mal wieder eine Mail über "FREE AMATEUR WEBCAMS" heraussortiert.

freundliche Grüße
Ingo

[Nadja]

Hallo Ingo Turski,

so löst Du also das Problem mit vname..;-)

Naja - Normalerweise schau ich nach, ob ein VName vorhanden ist, und lösche dann den Nachnamen weg.
Weiß nicht so recht, wie man das automatisieren kann :/

Nicht, dass du die als Spam abtust und löscht ;)
Keine Sorge, mein spam-Filter ist recht gut trainiert und ahatte gerade nur mal wieder eine Mail über "FREE AMATEUR WEBCAMS" heraussortiert.

Dann bin ich ja beruhigt :)

Liebe Grüße,
Nadja

[Nadja]

Hallo,

Hallo Ingo Turski,

Hab's aber schon wieder vergessen *lol*

Liebe Grüße,
Nadja

[Siechfred]

Tag Nadja.

Aber wie schafft man es denn dann folgendes:

• Ein PopUp, welches ein Bild enthält, dessen Höhe und Breite vorher unbekannt ist.
• Über und unter dem Bild sollen nochmal 50px frei sein.

Ich habe das mal hier beschrieben:
http://sniplets.anaboe.net/javascript01.html

Über die Nachteile hat Ingo dich ja schon hinreichend aufgeklärt.

Siechfred

[Nadja]

Hallo Siechfred,

Ich habe das mal hier beschrieben:
http://sniplets.anaboe.net/javascript01.html

Danke für den Link, ich werde mir den Artikel jetzt mal zu Gemüte führen :)

Über die Nachteile hat Ingo dich ja schon hinreichend aufgeklärt.

Ja, aber es interessiert mich schon.

Liebe Grüße,
Nadja

[Nadja]

Hallo,

so, hab nun einen Testordner hochgeladen.

Wenn ihr auf den Link klickt, öffnet sich ein PopUp. Zwar nicht hübsch, aber es geht mir jetzt erstmal um die Funktion.

Unten im PopUp ist ein Link zur nächsten Seite zu sehen. Dieser funktioniert nicht, und ich habe keine Ahnung, wie man das macht.

Dieses PopUp wird ja auch "on the fly" generiert... Wie kriege ich es also hin, dass beim Klicken auf den Link die nächste Seite generiert wird?

Liebe Grüße,
Nadja

[Struppi]

so, hab nun einen Testordner hochgeladen.

Wenn ihr auf den Link klickt, öffnet sich ein PopUp. Zwar nicht hübsch, aber es geht mir jetzt erstmal um die Funktion.

Unten im PopUp ist ein Link zur nächsten Seite zu sehen. Dieser funktioniert nicht, und ich habe keine Ahnung, wie man das macht.

Du suchst opener in dem Link musst du die Funktion mit opener.oeffneFenster(...) aufrufen.

Struppi.

[Nadja]

Hallo,

Du suchst opener in dem Link musst du die Funktion mit opener.oeffneFenster(...) aufrufen.

Sorry, kannst du das nochmal ein bißchen weiter ausführen? Das ging mir zu schnell :(

Liebe Grüße,
Nadja

[Struppi]

Du suchst opener in dem Link musst du die Funktion mit opener.oeffneFenster(...) aufrufen.

Sorry, kannst du das nochmal ein bißchen weiter ausführen? Das ging mir zu schnell :(

Was soll ich das ausführen?
statt oeffneFenster(...) musst du opener.oeffneFenster(...) schreiben.

Struppi.

[Nadja]

Hallo,

Was soll ich das ausführen?
statt oeffneFenster(...) musst du opener.oeffneFenster(...) schreiben.

Achso *klick*
Sorry, wahrscheinlich war es vorhin einfach noch zu früh ;)

Liebe Grüße,
Nadja