Hans: Popupgröße = Bildgröße

Moin,
ich möchte beim Klick auf ein Thumbnail, dessen großen Bruder öffnen. Dabei ist das Vorschaubild allerdings nicht gleich dem neuen Bild (einfach weil das Thumbnail 100x100px, und das große Bild 1536x2048px ist. Das Vorschaubild würde somit extrem verzerrt werden).

In Netz (auch im selfhtml forum) gibts da einiges zu. Ich habs so versucht:

HTML:
<img ... onclick="popup(this.src);" alt="Thumbnail">

JS:
function popup(pic){
 var temp = new Image();
 temp.src = pic.replace(/.jpg/, "Gross.jpg"); //Bild wird gewechselt
 temp.onload = window.open(temp.src,'','height='+(temp.height)+'px, width='+(temp.width)+'px');
}

Leider bekommt der FF die Größe des neuen Bildes nicht (immer) mit, weil das große Bild noch nicht geladen wurde (trotz temp.onload). Könnt ihr mir helfen?

Hans

  1. Hi Hans!

    Leider bekommt der FF die Größe des neuen Bildes nicht (immer) mit, weil das große Bild noch nicht geladen wurde (trotz temp.onload).

    Vielleicht hilft
    http://de.selfhtml.org/javascript/objekte/images.htm#complete.

    Grüsse,
    Richard

    1. Moin Richard,
      vielen Dank. Das hätte ich auf jeden Fall benutzt wenn nicht noch Molily einen Vorschlag gemacht hätte.
      Bei complete muss man ein Schleife durchlaufen und immer wieder abfragen ob das Bild geladen ist.
      Bei onload kommt die Antwort von allein :-)

      Trotzdem vielen Dank!

  2. Hallo,

    temp.onload = window.open(temp.src,'','height='+(temp.height)+'px, width='+(temp.width)+'px');

    Du notierst hier schematisch:

    objekt.eigenschaft = objekt.methode();

    Was macht so eine Anweisung?

    objekt.methode wird sofort bei der Abarbeitung dieser Anweisung ausgeführt und deren Rückgabewert in die angegebene Eigenschaft geschrieben.

    Was passiert konkret in deinem Code?

    Das Fenster wird sofort geöffnet und das window-Objekt des Popup-Fensters wird in der Eigenschaft temp.onload gespeichert.

    Siehst du, was falsch läuft?

    Event-Handler kannst du so setzen:

    objekt.onevent = funktionsobjekt;

    Das heißt: Du kopierst eine Funktion in die onevent-Eigenschaft. Die Funktion selbst, nicht den Rückgabewert ihrer Ausführung!

    Wenn du beim onload ein Popup öffnen willst, kannst du das schematisch so lösen:

    function popupÖffnen () {
       window.open(...);
    }
    ...
    bild.onload = popupÖffnen;

    Kürzer kannst du auch einfach eine anonyme Funktion notieren:

    bild.onload = function () {
       window.open(...);
    };

    Das ist eh besser, weil du dann in der Funktion Zugriff auf die lokale Variable bild hast (in deinem Code temp).

    Mathias

    1. Moin Mathias,
      vielen Dank für die Aufklärung!

      Leider steht dabei:
      "Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags:
      <frameset> <body>"

      Trotzdem die erste Wahl :-)

      Hans

      1. Leider steht dabei:
        "Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags:
        <frameset> <body>"

        Trotzdem die erste Wahl :-)

        und ich hab noch keinen Browser gesehen seit Netscape 3 oder IE 3, wo der Event nicht beim Imgae Objekt gefeuert hat.

        Struppi.

        1. Es öffnet sich mit "bild.onload = function..." das Fenster immer nur einmal. Beim zweiten Draufklicken passiert nix. Weil das Bild ja schon geladen ist? Wie kann man das umgehen?

          Hans

          1. Nachtrag: nur im IE(7)

          2. Mahlzeit,

            Es öffnet sich mit "bild.onload = function..." das Fenster immer nur einmal. Beim zweiten Draufklicken passiert nix.

            Klar. Weil das Popup ja nur beim onload-Event des Bildes geöffnet wird.

            Weil das Bild ja schon geladen ist?

            Richtig.

            Wie kann man das umgehen?

            Du könntest z.B. beim onload-Event des Bildes nicht nur ein Popup öffnen, sondern auch das onclick-Event des Thumbnails verändern, so dass ab dann (also bei jedem Klick NACH Laden des großen Bildes) direkt ein Popup geöffnet wird, ohne onload-Brimbamborium.

            MfG,
            EKKi

            --
            sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
          3. Es öffnet sich mit "bild.onload = function..." das Fenster immer nur einmal. Beim zweiten Draufklicken passiert nix. Weil das Bild ja schon geladen ist? Wie kann man das umgehen?

            Ja, das macht der IE du musst zusätzlich noch auf complete testen.

            Als in etwa so:

            function openPop(pic) {  
               window.open(...);  
               // usw.  
            }  
            
            

            und aus deinem Ursprungscode:

            var temp = new Image();  
            temp.onload = function() {openPop(this); };  
            temp.src = pic.replace(/.jpg/, "Gross.jpg"); //Bild wird gewechselt  
            if(temp.complete) openPop(temp);
            

            Wobei das ein bisschen kritisch ist, da so u.U. openPop() zweimal aufgerufen wird.

            Struppi.

            1. Danke!
              :-)

        2. [latex]Moin![/latex]

          und ich hab noch keinen Browser gesehen seit Netscape 3 oder IE 3, wo der Event nicht beim Imgae Objekt gefeuert hat.

          <nebenbemerkung>imageobj.onload?
          Opera scheint das bei ganz bestimmten animierten Gifs (nicht allen!) nicht zu feuern. Da Op das aber bei allen anderen Bildern macht, ist das natürlich ein Bug und keine fehlende Funktionalität.</nebenbemerkung>

          Cü,

          Kai

          --
          Die kleinen Mädchen aus der Vorstadt tragen heute Nasenringe aus Phosphor
          Die Lippen sind blau, die Haare grün, Streichholzetiketten am Ohr
          Aus den Jackentaschen ragen braune Flaschen so sieht man sie durch die Strassen ziehn
          überall wo sie vorübergehen hängt in der Luft ein Hauch von Benzin
          ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]