Fenster an Größe des Bildes anpassen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Fenster an Größe des Bildes anpassen

    Hallo,

    Ich verwende PHP und JavaScript, ich habe eine Tabelle mit Bildern und wenn ich auf die Bilder klicke werden sie in Originalgröße in einem Popup-Window angezeigt. Leider sind die Originalbilder unterschiedlich groß wodurch sich die Größe des Fenster automatisch an die Größe des Bildes anpassen sollte. Ich habe es so versucht:

    PHP-Code:
    <body>

    <?php

    if(isset($_GET['id']))
    {
    $productId $_GET['id'];
    print 
    "<img src=\"originalPicture.php?id=$productId\" name=\"picture\"></img>";
    }

    ?>
    <script type="text/javascript">

    window.onload = resize;

    function resize()
    {
    window.innerHeight = window.document.height;
    window.innerWidth = window.document.width;
    }

    </script>
    </body>

    Das ist das Fenster das aufgepoppt wird und ich habe es eben mit folgendem JavaScipt Code versucht, aber leider passiert da gar nichts wenn sich das Fenster öffnet, es bleibt gleich groß und die Größe verändert sich nicht.

    Der Aufruf des Popup-Windows sieht so aus in der vorigen HTML-Seite:

    PHP-Code:
    print "<td> <a href=\"#\" onClick=\"window.open('originalSize.php?id=$productId','',
    'width=800,height=600,left=400,top=300')\"> <img src=\"picture.php?id=
    $productId\"></a></td>"

    Ich habe die window.open Funktion im onClick event des html-links verwendet.

    Weiß jemand was hier falsch läuft bzw. warum das nicht funktioniert?

    mfg
    pat

    PS: Im originalPicture.php wird nur das Image aus der DB geholt und entsprechend der Header, etc. gesetzt.
    Zuletzt geändert von pat270881; 16.03.2006, 19:10.

  • #2
    1. IMMER code umbrechen.
    2. passie die größe nicht an window.document.height, sondern an der größe des images an.
    3. was ist eigentlich <img ...></img> für ein tag?

    Kommentar


    • #3
      Genau so soll es wohl gehen.
      - Breite des Bildes feststellen
      - Höhe des Bildes feststellen
      Breite plus ca. 20px und Höhe auch so 30px dazu.
      Diese Werte an Deine open.window übergeben und Prost.
      Und ist man alt wie ein Kuh, lernt man immer noch dazu.
      THX, LOL, ROFL & Co. -> Netzjargon auf Wikipedia

      Kommentar


      • #4
        entweder das auf die Seite auf der dein Bild groß dargestellt ist:
        PHP-Code:
        $gr=getimagesize("bild.gif");
        $breite=$gr[0]+100;
        $hoehe=$gr[1]+100;

        echo(
        "<script language='JavaScript'>");
        echo(
        "window.resizeTo($breite,$hoehe);");

        echo(
        "</script>"); 
        oder tatsächlich mit getimagesize() zuerst dir Größe bestimmen und dann entsprechen in
        window.open('...','width=$breite,height=$hoehe, ...')
        einsetzen

        Kommentar


        • #5
          DieBu, das ist mit kanonen auf die spatzen. js müsste das selbst können.

          Kommentar


          • #6
            Original geschrieben von penizillin
            DieBu, das ist mit kanonen auf die spatzen. js müsste das selbst können.
            JS kanns ganz sicher ....

            Aber wenn man zunächst mit PHP die Größe ermittelt und daraus den window.open-String generiert, könnte das performancetechnisch von Vorteil sein. Vorausgesetzt man zeigt zunächst Thumbs, brauchen zur Ermittlung der Bildgrößen mittels getimagesize() die Bilder zunächst nicht geladen zu werden.
            Das wär schon nen wichtiger Grund PHP mit JS zu mischen!
            Ansonsten haste natürlich recht!

            Kommentar


            • #7
              [...] könnte das performancetechnisch von Vorteil sein.
              ich halte es für falsch, an der prozessorleisung (?) eines einzelnen (??) benutzers zu sparen, dafür allerdings den server zu belasten und das ganze "performancetechnisch" vorteilhaft zu nennen.

              Kommentar


              • #8
                Danke erstmals fuer eure Antworten. Ich habe es jetzt folgendermassen gemacht:

                In dem Popup-Fenster wo ich das grosse Bild anzeige habe ich folgendes geschrieben:

                Code:
                <script type="text/javascript">
                
                window.onload = resize;
                
                function resize()
                {
                	window.innerHeight = window.document.picture.height;
                	window.innerWidth = window.document.picture.width;
                }
                
                </script>
                picture ist der Name des img-tags. Leider funktioniert das nur mit dem Firefox, beim Internet Explorer wird das Fenster nicht der Groesse des Bildes angepasst. Hat jemand ne Ahnung, was man hier aendern muss damit es auch im Internet Explorer laeuft?

                danke im voraus

                lg pat

                Kommentar


                • #9
                  Lies in selfhtml in der Beschreibung des window-Objektes nach, warum das im IE nicht funktioniert, und schaue dich auf der Seite um, was du sonst benutzen könntest, um die Fenstergröße zu ändern.
                  I don't believe in rebirth. Actually, I never did in my whole lives.

                  Kommentar


                  • #10
                    Original geschrieben von penizillin
                    ich halte es für falsch, an der prozessorleisung (?) eines einzelnen (??) benutzers zu sparen, dafür allerdings den server zu belasten und das ganze "performancetechnisch" vorteilhaft zu nennen.
                    ... das hat jetzt zwar nur am Rande was mit der eigentlichen Frage zu tun ... aber es geht doch möglicherweise um ne Menge gespartem Traffic, nicht nur bei einem, sondern bei allen Surfern und wenn mans global betrachten mag im ganzen Internet.
                    Stell dir vor 10 Bilder mit jeweils 100 kb werden immer erst in den Browser geladen damit man per JS die größe berechnen kann. Und die alternative ist im Browser landen nur 10 winzige Thumbs und der Server muß nen bischen arbeiten.
                    Wenn du Provider bist, wirst du das JS bevorzugen ... klar!
                    Aber allen anderen werden die Probleme des Providers, die nötige Rechenleistung heranzuschaffen am A... vorbei gehen.
                    Der Surfer und der Betreiber der Seite werden, immer die Ladezeitarme Version bevorzugen, die den Server belastet, oder? Das spart Ladezeit und auch ne Menge möglicherweise kostenpflichtigen Traffic.

                    Kommentar


                    • #11
                      ich finde es lästig, dass der threadstarter den code immer noch nicht umgebrochen hat, was eine unterhaltung sehr schwierig macht.

                      du hast es wohl falsch verstanden - es geht keineswegs um traffic (höchstens um die 3 zeilen js).
                      Stell dir vor 10 Bilder mit jeweils 100 kb werden immer erst in den Browser geladen
                      wozu? das passiert beim threadstarter nicht und hat nichts mit den tipps zu tun.
                      Wenn du Provider bist, wirst du das JS bevorzugen ... klar!
                      als webseitenbetreiber interessiert es mich durchaus, dass der server, auf dem meine seite gehostet wird, rundum "schnell" ist. ein provider zu sein ist gar nicht nötig.
                      Der Surfer und der Betreiber der Seite werden, immer die Ladezeitarme Version bevorzugen, die den Server belastet, oder?
                      dem surfer solls egal sein. der betreiber soll schlau genug sein, um die goldene mitte zu finden.

                      als weiteres argument für js sei gesagt, dass wenn man davon ausgeht, dass deine version ein jedes thumbnail mit der größe des bildes versieht (js-technisch), so bemühst du _immer_ den server um diese arbeit, auch wenn die thumbs nicht angeklickt werden.

                      irgend eine absurde beispielrechnerei gefällig?

                      gegeben sei eine seite mit 5x5 = 25 bildern. im durchschnitt soll sich jeder besucher etwa 3 bilder anschauen. bei 100 besuchern produziert dein ansatz einen aufwand von "2500 mal größe bestimmen" - worin man das mißt sei offen gelassen.

                      die js lösung dagegen betrifft jeden user (wovon sie glücklicherweise nichts merken, weil es tatsächlich nur 3 zeilen js-code sind), geschieht aber auf kosten ihrer rechnerleistung. insgesamt also - "300 mal größe bestimmen".

                      natürlich kann man das nicht vergleichen, weil es verschiedene technologien sind, aber wenn man bedenkt, dass ein durchschnittlicher tdsl-user mit einer 1,8 ghz maschine den aufwand problemlos mitmacht, finde ich es absolut in ordnung, wert auf belastugsfreiheit meines servers zu legen.

                      Kommentar


                      • #12
                        hallo,

                        also ich habe es jetzt sowohl so:

                        Code:
                        <script type="text/javascript">
                        
                        window.onload = resize;
                        
                        function resize()
                        {
                        	window.document.body.clientHeight = window.document.picture.height;
                        	window.document.body.clientWidth = window.document.picture.width;
                        }
                        
                        </script>
                        als auch so

                        Code:
                        <script type="text/javascript">
                        
                        window.onload = resize;
                        
                        function resize()
                        {
                        	window.document.clientHeight = window.document.picture.height;
                        	window.document.clientWidth = window.document.picture.width;
                        }
                        
                        </script>
                        aber leider beides ohne Erfolg....?

                        lg pat

                        Kommentar


                        • #13
                          Original geschrieben von penizillin
                          ich finde es lästig, dass der threadstarter den code immer noch nicht umgebrochen hat, was eine unterhaltung sehr schwierig macht.
                          ... volle Zustimmung

                          Original geschrieben von penizillin
                          gegeben sei eine seite mit 5x5 = 25 bildern. im durchschnitt soll sich jeder besucher etwa 3 bilder anschauen. bei 100 besuchern produziert dein ansatz einen aufwand von "2500 mal größe bestimmen" - worin man das mißt sei offen gelassen.
                          ... dann laß uns hier doch mal weiter absurde Rechnungen betreiben ... vieleicht sollten wir uns dazu nen anderen Forumsplatz suchen ... ach egal.
                          Hast recht, ziemlich überflüssiges Größenbestimmen.
                          Hast auch recht, bei folgendem Szenario: Seite mit Thumbs, beim Draufklicken neues Fenster, dort Größe berechnen und Fenstergröße anpassen.
                          Hat ja auch alles sein Berechtigung und der einzige Grund es vor dem öffnen des neuen Fensters (erstmal egal wie) herauszufinden, wie groß das Bild ist, wäre, dass man es als unschön empfinden könnte, wenn das Fenster erst nach dem Laden des Bildes auf seine richtige Größe gebracht wird (ich kenn meine Kunden, sind deine etwa anders drauf?).
                          Deswegen mein alternatives Szenario: erst Größe bestimmen und daraus window.open generieren. Und dann hab ich nen Peerformencevorteil, da JS - bleiben wir mal bei deinem Beispiel - bedeuten würde, 2500 mal Bilder an die Browser zu verschicken. Und das wären ne Menge überflüssiger KB.

                          Kommentar


                          • #14
                            ...naja damit kann ich leider nicht soviel anfangen...wie könnte ich es noch anders definieren, als in meinem vorigen posting?

                            Kommentar


                            • #15
                              Sorry pat270881, dass sich keiner mehr um dein Problem kümmert.

                              Aber warum machst du es nicht auf die einfache Art mit
                              Code:
                              breite=document.picture.width+x;
                              hoehe=document.picture.height+y;
                              window.resizeTo(breite,hoehe);
                              das ganze Zeugs mit clientWidth und innerWidth hat je nach Browser nen vollkommen unterschiedlichen Syntax und ist zum Teil nur lesbar (!). Die einzige Möglichkeit, nahezu jeden Browser anzuschubsen ist resizeTo()!

                              Kommentar

                              Lädt...
                              X