Markus Grosche: an Foto angepasstes Fenster erzeugen

Hallo,

ich habe einen mit Fotos versehenen Bericht in HTML erstellt und wollte erreichen, dass beim Klick auf die Miniaturbilder die großen Bilder in einem extra Fenster ohne Buttonleisten und ähnliches dargestellt wird. Das Verfahren ist mir nach Lektüre des entsprechenden Abschnitts in SELFHTML (open window) auch soweit klar.

Ist es möglich, über Javascript die Größe des Bildes zu erkennen und das neue Fenster in entsprechender Größe darzustellen (sollte mit Netscape und MIE funktionieren).

Zudem möchte ich erreichen, dass beim Klick auf das große Bild das neue Fenster wieder geschlossen wird, ohne dass ich HTML-Code in die Seite einbauen muss.

Optimal wäre eine Funktion, die die Grafik als Parameter aus dem Link übernimmt und dann die gesamte Darstellung des Fensters durchführt.

Falls so ein Verfahren schon irgendwo im Web existiert, wäre ich für einen Link dankbar.

Mit freundlichen Grüßen
Markus Grosche

  1. Hi,

    Ist es möglich, über Javascript die Größe des Bildes zu erkennen und das neue Fenster in entsprechender Größe darzustellen (sollte mit Netscape und MIE funktionieren).

    Im Prinzip ja, dazu muss das Bild jedoch vom Browser bereits geladen worden sein.
    Eine Möglichkeit, einen solchen Vorgang zu automatisieren, wäre die Verwendung eines Dummy-Fensters, in welches das Bild geladen wird.
    Bei Aufruf der entsprechenden Funktion wird ein solches Pseudofenster geöffnet, sofort auf die Größe 1x1 px verkleinert (eventuell noch aus dem Focus genommen). Jetzt kann man vom öffnenden Fentser aus auf das Image zugreifen und die Größe auslesen. Mit diesen Angaben lässt sich dann das "eigentliche" Fenster konfigurieren. Das Dummy-Fenster sollte man natürlich wieder schließen.

    Zudem möchte ich erreichen, dass beim Klick auf das große Bild das neue Fenster wieder geschlossen wird, ohne dass ich HTML-Code in die Seite einbauen muss.

    Du müsstest prüfen, ob du vom öffnenden Fenster aus Events im Tochterfenster überwachen kannst.

    A la (IEP):
    var neuesFenster = window.open("Bild.jpg","Test","width=310,height=400");
    neuesFenster.document.onmousedown = closeFenster;

    function closeFenster(){
      //alert("Geklickt");
      neuesFenster.close();
    }

    Grüße,
    Martin

  2. Hallo Markus,

    Ist es möglich, über Javascript die Größe des Bildes zu erkennen und das neue Fenster in entsprechender Größe darzustellen (sollte mit Netscape und MIE funktionieren).

    grundsätzlich ja. Aber erst nachdem das Bild geladen wurde und nur wen im <img ..> keine Grösse drinsteht, denn dann wird die zurückgegeben.
    Ich hatte mit sowas mal rumprobiert, fand das aber nicht so toll, da das Fenster erst in der falschen Grösse aufgeht und sich erst nach Laden des Bildes resizen kann. http://www.teamone.de/selfhtml/tecb.htm#a40

    Zudem möchte ich erreichen, dass beim Klick auf das große Bild das neue Fenster wieder geschlossen wird, ohne dass ich HTML-Code in die Seite einbauen muss.

    <a href="#" onClick="self.close"><img border=0 src="deinbildhier.jpg"></a>

    Optimal wäre eine Funktion, die die Grafik als Parameter aus dem Link übernimmt und dann die gesamte Darstellung des Fensters durchführt.

    http://www.teamone.de/selfaktuell/artikel/wertueb.htm

    Viel Spass beim tüfteln,
      Carsten

    1. Hallo Carsten und Martin (und Markus, der ja die Frage stellt)!

      grundsätzlich ja. Aber erst nachdem das Bild geladen wurde und nur wen im <img ..> keine Grösse drinsteht, denn dann wird die zurückgegeben.

      Sicher, der Browser kennt die Größe des zu ladenden Bilds noch nicht. Aber Markus wird sie wohl kennen, oder? Und das kann man sehr wohl in einem Script angeben, das ein entsprechendes großes Fenster öffnet!!!

      So dass beim Klick auf dem Thumbnais das Script aufgerufen wird, der das bereits existierende Bild (dessen Maßen Markus im Script angibt) im entsprechend angepassten Fenster öffnet.

      Wozu hat Christine Kühnel denn ein solches Beispiel ins Netz gestellt? Was wir seit Jahren erfolgreich, z.B. in der Schliersee-Story (http://www.atomic-eggs.com/selfspezial/artik002.html und Folgeseiten) einsetzen?

      Christines Beispiel im Web: http://netz-notizen.de/javascript/tipps/image.htm (Bilder in einem Fenster passender Größe anzeigen)

      Patrick
      <hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>

      1. Hi Patrick (aus FFM),

        Sicher, der Browser kennt die Größe des zu ladenden Bilds noch nicht. Aber Markus wird sie wohl kennen, oder? Und das kann man sehr wohl in einem Script angeben, das ein entsprechendes großes Fenster öffnet!!!

        Ich verstand seine Frage so, dass er genau das vermeiden wollte (wenn ich jetzt 300 Bilder verschiedener Größe hätte, von denen sich die Hälfte täglich ändert und ich keine serverseitigen Techniken zur Verfügung hätte, dann, und nur dann, würde ich es so machen).

        Grüße (aus FFM),
        Martin

  3. Vielen Dank für die fundierten Antworten.

    Gruß
    Markus Grosche