Andy: Bildergalerie mit Lücken

Hallo zusammen,

für die Bildergalerie auf meiner Seite habe ich ein Script geschrieben, dass nach einem Klick auf ein Thumbnail das zugehörige Bild vergrößert in einem "PopUp" Fenster anzeigt.
Nachdem ich es nun geschafft habe, dass sowohl in Mozilla, als auch Opera und IE dieses PopUp an die Größe des Bildes angepasst wird und es auch noch focussiert wird, scheitere ich an folgendem Problem:

Bei Klick auf das Thumbnail wird das Fenster geöffnet, allerdings nur in der Größe des Formularfeldes "Fenster schliessen". Bei einem zweiten Klick auf das Thumbnail wird das Fenster in gewünschter Größe ausgegeben. Daraus schließe ich, dass das Fenster erst richtig erscheint, wenn das jeweilige Bild im Cache hinterlegt ist.

Wie kann ich es erreichen, dass das PopUp Fenster schon beim ersten Klick in der gewünschten Größe erscheint?

Hier das Script:

<html>
<head>

<!--Datei-Informationen-->

<link rel="stylesheet" type="text/css" href="../traum.css">
      <script type="text/javascript">

<!-- Begin

function PictureOpen(img){
  Bild = new Image();
  Bild.src = (img);
  Bild.onLoad = Show(img);
  }

function Show(img){
  var copy = "© 2004  andy-blackjack.de";
  var xsize = Bild.width+50;
  var ysize = Bild.height+105;
  var ScreenWidth = screen.width;
  var ScreenHeight = screen.height;
  var xpos = (ScreenWidth/2)-(xsize/2);
  var ypos = (ScreenHeight/2)-(ysize/2);
  if (ysize>ScreenHeight) ysize=(ScreenHeight-100);
  var para = "width="+xsize+",height="+ysize+",left="+xpos+",top=5,scrollbars=1,resizable=1,location=0,directories=0,status=0,menubar=0,toolbar=0";

var NewWindow = window.open("Fotogalerie","img",para);
  NewWindow.document.open ()
  NewWindow.document.write ("<html><head><title>Fotogalerie</title></head>");
  NewWindow.document.write ("<body bgcolor='#fffff1' topmargin=3 leftmargin=1 onLoad='focus()' onBlur='self.close()'>");
  NewWindow.document.write ("<form><table align=center cellspacing='0' cellpadding='5' border='0'><tr>");
  NewWindow.document.write ("<td align='center' valign='top' bgcolor='#fffff1'>");
  NewWindow.document.write ("<table border='1' cellpadding='0' cellspacing='1' style='background-image: url(");
  NewWindow.document.write (img);
  NewWindow.document.write (")' width='");
  NewWindow.document.write (Bild.width);
  NewWindow.document.write ("' height='");
  NewWindow.document.write (Bild.height);
  NewWindow.document.write ("'>");
  NewWindow.document.write ("<tr>");
  NewWindow.document.write ("<td width='100%' align='right' valign='bottom'><b><font face='Verdana' size='2' color='#F0F0F0'>");
  NewWindow.document.write (copy);
  NewWindow.document.write ("&nbsp;&nbsp;</font></b></td>");
  NewWindow.document.write ("</tr></table>");
  NewWindow.document.write ("</td></tr><tr>");
  NewWindow.document.write ("<td align='center'>");
  NewWindow.document.write ("<table border='0' cellpadding='3' cellspacing='0' width='100%'><tr>");
  NewWindow.document.write ("<td width='50%' align='center'><input type='button' value='FENSTER SCHLIESSEN' style='font-family: Verdana; font-size: 10px; width: 150' onClick='self.close()'></td>");
  NewWindow.document.write ("</tr></table>");
  NewWindow.document.write ("</td></tr></table></form>");
  NewWindow.document.write ("</body></html>");
  NewWindow.document.close();
  NewWindow.resizeTo(xsize,ysize);
  return false;
  }
// End -->

</script>
      </head>
      <body>
        <a href=../bilder/traumaq1.jpg onClick="PictureOpen(this.href);return false;" target="_blank">
        <img src="../bilder/traumaq1_kl.jpg" alt="Das erste Foto, am 05.03.2002 per Mail erhalten" border="0" width="154" height="115">
        </a>
      </body>
      </html>

Nach langem Suchen bin ich auf den Onload-Event gekommen, aber der scheint mein Problem auch nicht zu lösen.

Wäre nett, wenn mir hier jemand helfen könnte.

Grüße aus dem Bayerischen Wald,
Andreas

  1. Wie kann ich es erreichen, dass das PopUp Fenster schon beim ersten Klick in der gewünschten Größe erscheint?

    Hier das Script:

    <html>
    <head>

    <!--Datei-Informationen-->

    <link rel="stylesheet" type="text/css" href="../traum.css">
          <script type="text/javascript">

    <!-- Begin

    function PictureOpen(img){
      Bild = new Image();
      Bild.src = (img);
      Bild.onLoad = Show(img);
      }

    Das ist der Fehler du rufst hier die Funktion Show auf und weist den Rückgabewert dem onload Handler zu. Mach die Klammern weg und in der Funktion hast du mit *this* Zugriff auf das Bild.

    function Show(img){

    ....

    var NewWindow = window.open("Fotogalerie","img",para);

    Noch ein Fehler, das erste Argument ist die URL, in dem Falle wird (wenn vorhanden) i.d.R. das Verzeichniss 'Fotogalerie' angezeigt. Mach 'about:blank' draus.

    Struppi.

    1. Hallo Struppi,

      Wie kann ich es erreichen, dass das PopUp Fenster schon beim ersten Klick in der gewünschten Größe erscheint?

      Hier das Script:

      <!-- Begin

      function PictureOpen(img){
        Bild = new Image();
        Bild.src = (img);
        Bild.onLoad = Show(img);
        }

      Das ist der Fehler du rufst hier die Funktion Show auf und weist
      den Rückgabewert dem onload Handler zu. Mach die Klammern weg
      und in der Funktion hast du mit *this* Zugriff auf das Bild.

      Jetzt habe ich versucht mich schlau zu machen zu Objekten, Rückgabewerten und "this", und nun stehe ich auf dem Schlauch.
      Den Zugriff mittels "this" führe ich doch im onClick-Aufruf im Body aus:

      [Code]
      <a href=../bilder/traumaq1.jpg onClick="PictureOpen(this.href);return false;" target="_blank">
      <img src="../bilder/traumaq1_kl.jpg" alt="Das erste Foto, am 05.03.2002 per Mail erhalten" border="0" width="154" height="115">
      </a>
      [/Code]

      Wie kann ich dann "this" auch noch im Head-Skript einfügen? Kannst du mir meinen Knoten lösen und die zu ändernden Zeilen angeben?

      var NewWindow = window.open("Fotogalerie","img",para);

      Noch ein Fehler, das erste Argument ist die URL,

      Ja, war ein Tippselfehler, danke für den Hinweis.

      Vielen Dank für die Unterstützung.

      Grüße aus dem Bayerischen Wald,
      Andreas

      1. Hallo Andy

        Hallo Struppi,

        Wie kann ich es erreichen, dass das PopUp Fenster schon beim ersten Klick in der gewünschten Größe erscheint?

        Hier das Script:

        <!-- Begin

        function PictureOpen(img){
          Bild = new Image();
          Bild.src = (img);
          Bild.onLoad = Show(img);
          }

        Das ist der Fehler du rufst hier die Funktion Show auf und weist
        den Rückgabewert dem onload Handler zu. Mach die Klammern weg
        und in der Funktion hast du mit *this* Zugriff auf das Bild.

        Jetzt habe ich versucht mich schlau zu machen zu Objekten, Rückgabewerten und "this", und nun stehe ich auf dem Schlauch.
        Den Zugriff mittels "this" führe ich doch im onClick-Aufruf im Body aus:

        [Code]
        <a href=../bilder/traumaq1.jpg onClick="PictureOpen(this.href);return false;" target="_blank">
        <img src="../bilder/traumaq1_kl.jpg" alt="Das erste Foto, am 05.03.2002 per Mail erhalten" border="0" width="154" height="115">
        </a>
        [/Code]

        this ist immer der Zeiger auf das lokale Objekt. In dem Falle der Link.
        Was ich aber meine ist, wenn du folgendes machst:

        var img = new  Image();
        img.onload = show;
        img.src = .....

        function show()
        {
        }

        kannst du in der Funktion show mit this das obige Bild referenzieren.
        Also auf die Eigenschaften des Bildes zugreifen:

        function show()
        {
         alert(this.src)
        }

        Struppi.

        1. Hallo Struppi,

          Wie kann ich es erreichen, dass das PopUp Fenster schon
          beim ersten Klick in der gewünschten Größe erscheint?

          jetzt habe ich eine Lösung:
          Anscheinend gibt es für Images kein Onload Event. Das habe ich jetzt heraus gelassen und es scheint zu funktionieren. Hier nun mein Skript:

          <html>
          <head>
          <script>

          <!-- Begin

          function PictureOpen(img){
          Bild = new Image();
          Bild.src = (img);
          Show(img);
          }

          function Show(img){
          var copy = "© 2004 andy-blackjack.de";
          var xsize = Bild.width+50;
          var ysize = Bild.height+105;
          var ScreenWidth = screen.width;
          var ScreenHeight = screen.height;
          var xpos = (ScreenWidth/2)-(xsize/2);
          var ypos = (ScreenHeight/2)-(ysize/2);
          if (ysize>ScreenHeight) ysize=(ScreenHeight-100);
          var para = "width="+xsize+",height="+ysize+",left="+xpos+",top=5,scrollbars=1,resizable=1,location=0,directories=0,status=0,menubar=0,toolbar=0";

          var NewWindow = window.open("img","Fotogalerie",para);
          NewWindow.document.open ()
          NewWindow.document.write ("<html><head><title>Fotogalerie</title></head>");
          NewWindow.document.write ("<body bgcolor='#fffff1' topmargin=3 leftmargin=1 onLoad='focus()' onBlur='self.close()'>");
          NewWindow.document.write ("<form><table align=center cellspacing='0' cellpadding='5' border='0'><tr>");
          NewWindow.document.write ("<td align='center' valign='top' bgcolor='#fffff1'>");
          NewWindow.document.write ("<table border='1' cellpadding='0' cellspacing='1' style='background-image: url(");
          NewWindow.document.write (img);
          NewWindow.document.write (")' width='");
          NewWindow.document.write (Bild.width);
          NewWindow.document.write ("' height='");
          NewWindow.document.write (Bild.height);
          NewWindow.document.write ("'>");
          NewWindow.document.write ("<tr>");
          NewWindow.document.write ("<td width='100%' align='right' valign='bottom'><b><font face='Verdana' size='2' color='#F0F0F0'>");
          NewWindow.document.write (copy);
          NewWindow.document.write ("&nbsp;&nbsp;</font></b></td>");
          NewWindow.document.write ("</tr></table>");
          NewWindow.document.write ("</td></tr><tr>");
          NewWindow.document.write ("<td align='center'>");
          NewWindow.document.write ("<table border='0' cellpadding='3' cellspacing='0' width='100%'><tr>");
          NewWindow.document.write ("<td width='50%' align='center'><input type='button' value='FENSTER SCHLIESSEN' style='font-family: Verdana; font-size: 11px; width: 150' onClick='self.close()'></td>");
          NewWindow.document.write ("</tr></table>");
          NewWindow.document.write ("</td></tr></table></form>");
          NewWindow.document.write ("</body></html>");
          NewWindow.document.close();
          NewWindow.resizeTo(xsize,ysize);
          return false;
          }
          // End -->

          </script>
          </head>
          <body>

          <p><a href=../bilder/Hintergrund-Beispiel1.jpg onClick="PictureOpen(this.href);return false;" target="_blank"><img src="../bilder/Hintergrund-Beispiel1_kl.jpg" alt="Beispiel 1" border="0" width="154" height="115"></a>

          </body>
          </html>

          Ich kann es mir nicht genauer erklären, aber es funktioniert so wie ich es will. Leider bin ich mit deinem Hinweis auf "this" nicht weitergekommen, anscheinend reicht mein Hirn nicht so weit :-(

          Kann ich das Skript oben verwenden, ohne dass ich noch in eine böse Falle tappe?

          Vielen Dank und Grüße,
          Andreas

          1. jetzt habe ich eine Lösung:

            nö das ist keine Lösung!

            Anscheinend gibt es für Images kein Onload Event. Das habe ich jetzt heraus gelassen und es scheint zu funktionieren. Hier nun mein Skript:

            Du glaubst nur das es funktioniert, weil das Bild bei dir im Cahce ist wird es quasi ohne Zeitverzögerug geladen.

            <script>

            <script type="text/javascript">

            function PictureOpen(img){
            Bild = new Image();
            Bild.src = (img);

            wozu die Klammern?

            Wie gesagt du brauchst den onload Event:
            Bild.onload = Show;
            Bild.src = img;

            Die Reihenfolge ist wichtig!

            function Show(img){

            Die funktion braucht keinen Parameter mehr. Du kannst ab hier mit this auf das Bild zugreifen. Das heißt du musst nur alle 'img' gegen 'this' austauschen.

            var copy = "© 2004 andy-blackjack.de";
            var xsize = Bild.width+50;
            var ysize = Bild.height+105;

            var xsize = this.width+50;
            var ysize = this.height+105;

            var NewWindow = window.open("img","Fotogalerie",para);

            Das erste Argument ist nach wie vor falsch. Du greifst auf das Verzeichniss 'img' zu. Da gehört entweder '' oder 'about:blank' rein!

            <p><a href=../bilder/Hintergrund-Beispiel1.jpg onClick="PictureOpen(this.href);return false;" target="_blank"><img src="../bilder/Hintergrund-Beispiel1_kl.jpg" alt="Beispiel 1" border="0" width="154" height="115"></a>

            Du solltest dir angewöhnen immer Anführungszeichen um die Attribute zu machen.

            Kann ich das Skript oben verwenden, ohne dass ich noch in eine böse Falle tappe?

            Nein.

            Struppi.

            1. Hallo Struppi,

              nö das ist keine Lösung!

              irgendwie habe ich das geahnt. Deine Hinweise habe ich jetzt umgesetzt und bin auf folgendes Skript gekommen:

              <html>
              <head>
              <script type="text/javascript">

              <!-- Begin

              var Bild = new Image();

              function PictureOpen(img){
              Bild.onload = Show;
              Bild.src = img;
              }

              function Show(img){
              var copy = "© 2004 andy-blackjack.de";
              var xsize = this.width+50;
              var ysize = this.height+105;
              var ScreenWidth = screen.width;
              var ScreenHeight = screen.height;
              var xpos = (ScreenWidth/2)-(xsize/2);
              var ypos = (ScreenHeight/2)-(ysize/2);
              if (ysize>ScreenHeight) ysize=(ScreenHeight-100);
              var para = "width="+xsize+",height="+ysize+",left="+xpos+",top=5,scrollbars=1,resizable=1,location=0,directories=0,status=0,menubar=0,toolbar=0";

              NewWindow=window.open('about:blank', "Fotogalerie", para);
              NewWindow.document.open ()
              NewWindow.document.write ("<html><head><title>Fotogalerie</title></head>");
              NewWindow.document.write ("<body bgcolor='#fffff1' topmargin=3 leftmargin=1 onLoad='focus()' onBlur='self.close()'>");
              NewWindow.document.write ("<form><table align=center cellspacing='0' cellpadding='5' border='0'><tr>");
              NewWindow.document.write ("<td align='center' valign='top' bgcolor='#fffff1'>");
              NewWindow.document.write ("<table border='1' cellpadding='0' cellspacing='1' style='background-image: url(");
              NewWindow.document.write (this.src);
              NewWindow.document.write (")' width='");
              NewWindow.document.write (this.width);
              NewWindow.document.write ("' height='");
              NewWindow.document.write (this.height);
              NewWindow.document.write ("'>");
              NewWindow.document.write ("<tr>");
              NewWindow.document.write ("<td width='100%' align='right' valign='bottom'><b><font face='Verdana' size='2' color='#F0F0F0'>");
              NewWindow.document.write (copy);
              NewWindow.document.write ("&nbsp;&nbsp;</font></b></td>");
              NewWindow.document.write ("</tr></table>");
              NewWindow.document.write ("</td></tr><tr>");
              NewWindow.document.write ("<td align='center'>");
              NewWindow.document.write ("<table border='0' cellpadding='3' cellspacing='0' width='100%'><tr>");
              NewWindow.document.write ("<td width='50%' align='center'><input type='button' value='FENSTER SCHLIESSEN' style='font-family: Verdana; font-size: 11px; width: 150' onClick='self.close()'></td>");
              NewWindow.document.write ("</tr></table>");
              NewWindow.document.write ("</td></tr></table></form>");
              NewWindow.document.write ("</body></html>");
              NewWindow.document.close();
              //NewWindow.resizeTo(xsize,ysize);
              return false;
              }
              // End -->

              </script>
              </head>
              <body>

              <a href="../bilder/traumaq1.jpg" onClick="PictureOpen(this.href);return false;" target="_blank"><img src="../bilder/traumaq1_kl.jpg" alt="Das erste Foto, am 05.03.2002 per Mail erhalten" border="0" width="154" height="115"></a>

              </body>
              </html>

              Nun sollte es aber passen. Zumindest hier lokal funzt es einwandfrei. Die Sache mit "this" hae ich jetzt anscheinend auch etwas kapiert. Zusätzlich habe ich noch die Variable Bild als Globale Variable raus gestellt, ist aber nicht notwendig.

              Vielen Dank für deine Unterstützung und die Geduld mit mir.

              Grüße aus dem Bayerischen Wald,
              Andreas

              1. irgendwie habe ich das geahnt. Deine Hinweise habe ich jetzt umgesetzt und bin auf folgendes Skript gekommen:

                Prima, soweit in Ordnung.

                <html>
                <head>
                <script type="text/javascript">

                <!-- Begin

                var Bild = new Image();

                function PictureOpen(img){
                Bild.onload = Show;
                Bild.src = img;
                }

                Du brauchst Bild nicht global zu deklarieren, der Ladevorgang wird nicht abgebrochen

                Also:
                function PictureOpen(img){
                var Bild = new Image();
                Bild.onload = Show;
                Bild.src = img;
                }

                NewWindow.document.write ("<html><head><title>Fotogalerie</title></head>");
                NewWindow.document.write ("<body bgcolor='#fffff1' topmargin=3 leftmargin=1 onLoad='focus()' onBlur='self.close()'>");
                NewWindow.document.write ("<form><table align=center cellspacing='0' cellpadding='5' border='0'><tr>");
                NewWindow.document.write ("<td align='center' valign='top' bgcolor='#fffff1'>");
                NewWindow.document.write ("<table border='1' cellpadding='0' cellspacing='1' style='background-image: url(");
                NewWindow.document.write (this.src);
                NewWindow.document.write (")' width='");
                NewWindow.document.write (this.width);
                NewWindow.document.write ("' height='");
                NewWindow.document.write (this.height);
                NewWindow.document.write ("'>");
                NewWindow.document.write ("<tr>");
                NewWindow.document.write ("<td width='100%' align='right' valign='bottom'><b><font face='Verdana' size='2' color='#F0F0F0'>");
                NewWindow.document.write (copy);
                NewWindow.document.write ("&nbsp;&nbsp;</font></b></td>");
                NewWindow.document.write ("</tr></table>");
                NewWindow.document.write ("</td></tr><tr>");
                NewWindow.document.write ("<td align='center'>");
                NewWindow.document.write ("<table border='0' cellpadding='3' cellspacing='0' width='100%'><tr>");
                NewWindow.document.write ("<td width='50%' align='center'><input type='button' value='FENSTER SCHLIESSEN' style='font-family: Verdana; font-size: 11px; width: 150' onClick='self.close()'></td>");
                NewWindow.document.write ("</tr></table>");
                NewWindow.document.write ("</td></tr></table></form>");
                NewWindow.document.write ("</body></html>");

                Als Verbesserung (neben dem etwas gräßlichen HTML Code) kann man hier noch die ganze Ausgabe in eine Funktion packen.

                NewWindow.document.write (
                "<html><head><title>Fotogalerie</title></head>"

                • "<body bgcolor='#fffff1' topmargin=3 leftmargin=1 onLoad='focus()' onBlur='self.close()'>
                • "<form><table align=center cellspacing='0' cellpadding='5' border='0'><tr>"
                • "<td align='center' valign='top' bgcolor='#fffff1'>"
                • "<table border='1' cellpadding='0' cellspacing='1' style='background-image: url("
                • this.src + ")' width='"

                ...usw.

                );

                Struppi.

                1. Hallo Struppi,

                  Prima, soweit in Ordnung.

                  [...]

                  Du brauchst Bild nicht global zu deklarieren, der Ladevorgang wird nicht abgebrochen

                  ich wollte halt noch das Tüpfelchen auf dem i ;-)

                  Als Verbesserung (neben dem etwas gräßlichen HTML Code) kann man hier noch die ganze Ausgabe in eine Funktion packen.

                  Er hat immerhin funktioniert, nicht wahr?
                  Aber ich hab den jetzt etwas abgespeckt und das kam dabei raus:

                  [Code]
                  NewWindow=window.open('about:blank', "Fotogalerie", para);
                  NewWindow.document.open ()
                  NewWindow.document.write ("<html>"

                  • "<head><title>Fotogalerie</title></head>"
                  • "<body bgcolor='#fffff1' onLoad='focus()'>"
                  • "<form><table cellspacing='5' bgcolor='#fffff1'>"
                  • "<tr><td align='right' valign='bottom' style='background-image: url("
                  • this.src + ")' width='" + this.width + "' height='" + this.height + "'>"
                  • "<b><font size='3' color='#ADADAD'>" + copy + "&nbsp;&nbsp;</font></b>"
                  • "</td></tr>"
                  • "<tr><td align='center'>"
                  • "<input type='button' value='FENSTER SCHLIESSEN' width='150' onClick='self.close()'>"
                  • "</td></tr></table></form></body></html>");
                    NewWindow.document.close();
                    NewWindow.resizeTo(xsize,ysize);
                    return false;
                    }
                    // End -->
                    [/Code]

                  Bin mal gespannt, wann ich ein Script hinbringe, das passt :-(
                  Nachdem ich es jetzt auf den Server geladen habe, stelle ich ein weiteres Prob fest.
                  Zuerst habe ich im Body-Tag den Event "onBlur='self.close()'" heraus genommen, weil sich hier lokal auf dem Rechner das Pop-up bei jedem Klick geschlossen hat, auch bei einem Klick auf das Bild.
                  Nach dem Hochladen musste ich in Mozilla aber nach jedem Bild das Pop-up per Button schließen, sonst lud das nächste Bild ins Pop-up ohne Größenanpassung.

                  Nachdem ich jetzt den onBlur Event wieder in den Body-Tag eingefügt habe, funktioniert die Seite im Mozilla. Der IE sagt mir einen Fehler auf der Seite an und öffnet das Pop-up nicht. In Opera liegt auch ein Fehler vor, hier passiert gar nichts.

                  Willst du es dir mal anschauen? Klick auf den Link den ich oben angegeben habe.

                  Trotzdem vielen Dank und Grüße,
                  Andras