Sarah: PopUp Fenster/ Bild am Rand oben und unten, ohne html-datei?

Hallo Leute,

da ihr einem immer super helfen könnt, brauch ich mal eure Hilfe. Ich habe auf meiner Website Fotos, diese sind aber schwarz weiß und ziemlich klein gehalten. Ich möchte die Fotos durch ein anklicken in einem PopupFenster hochladen, und dann die Oriiginalfotos haben.

Soeweit so gut. Ich habe keine Lust für jedes Bild ne html-Datei anzulegen, also hab ich das wie folgt definiert:

<script type="text/javascript">
<!--
function rin09() {
  F = window.open("images/rin09_gross.jpg","Popup","width=400,height=300");
}
// -->

Davon ab, dass ich erstmal die Größe des Fotos angeben muss, wird das Foto nicht genau am Rand oben und links geladen, sondern mit dem Abstand, der immer reingehauen wird. Wenn man das ganze mit nem html-Popup macht kann man ja marginwidth und height etc pp gleich Null setzen. Wie kann ich das bei einem reinen jpg-Popup?

LG Sarah

P.S.: Wer sich das angucken möchte: www.familykaefer.de dann Unter Warina Bilder, und die letzten beiden zwei kann man öffnen (die letzten zwei von unten *hihi*)

  1. Hallo,

    Du wirst da um eine HTML-Seite nicht rumkommen, aber eine fuer alle Bilder sollte reichen.
    Ubergib in der URL des Fensters mit GET den Namen des Bildes und fingere ihn window.location.search http://selfhtml.teamone.de/javascript/objekte/location.htm#search wieder raus.

    Das geht etwa so:
    window.open('bilderseite.htm?bild=meinbild',....)

    Die Seite koennte etwa so aussehen:

    <html>
    <head>
    <style type="text/css">
    body { margin: 0px; }
    </style>
    <script type="text/javascript">
    //siehe zB.
    http://www.cfdev.com/code_samples/code.cfm/CodeID/59/JavaScript/Get_Query_String_variables_in_JavaScript
    </script>
    <body>
    <script type="text/javascript">
    document.write('<img src="' + meinbild + '">');
    </script>

    </body>
    </html>

    Dieter

    1. Hallo ihr beiden,

      also ich habe gerade nur Bahnhof verstanden *lach* Ich kenne mich mit Javascript fast gar net aus, und wenn ich was brauche, suche ich mir was passendes. Aber wenn ich ein Script hätte, was das jeweilige Bild öffnet, das wäre super, aber ich glaube das wolltet ihr mir gerade schon erklären?

      Irgendwie check ich das gar net? *kopfkratz*

      Also meine html-datei sieht zur Zeit so aus :

      <script type="text/javascript">
      <!--
      function rin08() {
        F = window.open("images/rin08_gross.jpg","Popup","width=500,height=375");
      }
      // -->
      <!--
      function rin09() {
        F = window.open("images/rin09_gross.jpg","Popup","width=288,height=324");
      }
      // -->
      <!--
      function rin10() {
        F = window.open("images/rin10_gross.jpg","Popup","width=500,height=375");
      }
      // -->
      <!--
      function rin11() {
        F = window.open("images/rin11_gross.jpg","Popup","width=500,height=351");
      }
      // -->
      <!--
      function rin12() {
        F = window.open("images/rin12_gross.jpg","Popup","width=300,height=330");
      }
      // -->
      <!--
      function rin13() {
        F = window.open("images/rin13_gross.jpg","Popup","width=500,height=351");
      }
      // -->
      <!--
      function rin14() {
        F = window.open("images/rin14_gross.jpg","Popup","width=300,height=400");
      }
      // -->
      <!--
      function rin15() {
        F = window.open("images/rin15_gross.jpg","Popup","width=500,height=351");
      }
      // -->
      </script>

      <body topmargin="0" leftmargin="0"><p align="center">
      <br><br><br>
      <table bordercolor="#003399" border="1">
      <tr>
      <td><img src="images/rin01.jpg"></td><td>
      <img src="images/rin03.jpg"></td><td>
      <img src="images/rin04.jpg"></td><td>
      <img src="images/rin05.jpg"></td><td>
      <img src="images/rin2.jpg"></td></tr>
      <tr>
      <td><img src="images/rin06.jpg"></td><td>
      <img src="images/rin07.jpg"></td><td>
      <p align="center"><a href="javascript:rin08()" class="navilink"><img src="images/rin08.jpg" border="0"></td><td>
      <p align="center"><a href="javascript:rin09()" class="navilink"><img src="images/rin09.jpg" border="0"></a></td><td>
      <p align="center"><a href="javascript:rin10()" class="navilink"><img src="images/rin10.jpg" border="0"></td></tr>
      <tr>
      <td><a href="javascript:rin11()" class="navilink"><img src="images/rin11.jpg" border="0"></td>
      <td><a href="javascript:rin12()" class="navilink"><img src="images/rin12.jpg" border="0"></td>
      <td><a href="javascript:rin13()" class="navilink"><img src="images/rin13.jpg" border="0"></td>
      <td><a href="javascript:rin14()" class="navilink"><img src="images/rin14.jpg" border="0"></td>
      <td><a href="javascript:rin15()" class="navilink"><img src="images/rin15.jpg" border="0"></td></tr>
      <tr>
      </table>

      Bitte net schlagen *lol*

      LG Sarah

      1. Hallo Sarah,

        also ich habe gerade nur Bahnhof verstanden *lach* Ich kenne mich mit Javascript fast gar net aus

        Du solltest dir für den Anfang vielleicht etwas einfacheres aussuchen.

        Aber wenn ich ein Script hätte, was das jeweilige Bild öffnet, das wäre super

        Ich denke: http://home.arcor.de/struebig/js/popup/index.htm ist etwas für dich.

        Grüße,

        Jochen

  2. Hallo Sarah,

    <script type="text/javascript">
    <!--
    function rin09() {
      F = window.open("images/rin09_gross.jpg","Popup","width=400,height=300");
    }
    // -->
    Davon ab, dass ich erstmal die Größe des Fotos angeben muss, wird das Foto nicht genau am Rand oben und links geladen, sondern mit dem Abstand, der immer reingehauen wird. Wenn man das ganze mit nem html-Popup macht kann man ja marginwidth und height etc pp gleich Null setzen. Wie kann ich das bei einem reinen jpg-Popup?

    Mit einem "reinen jpg-Popup" geht das nicht. Aber du kannst mit javascript (document.open, document.write) eine html Datei on-the-fly erzeugen. Und darin natürlich auch alles an CSS verwenden was du möchtest. Du schreibst dir eine Funktion die du in jedem onclick() aufrufst. Es sieht dann etwa so aus:

    pict = window.open("","bild","width=200,height=400 ....");
    pict.document.open('text/html');
    pict.document.write("<html><body style='margin, padding, etc'>
    <img src='"+deinbild+"' border='0'></body></html>");
    pict.document.close();

    Das war es dann auch schon. Bei Bedarf kannst du noch eine Funktion einbauen, die die Bildgröße ausliest und die Fenstergröße passend ändert.

    HTH

    Jochen

    1. Hallo Jochen,

      pict = window.open("","bild","width=200,height=400 ....");
      pict.document.open('text/html');
      pict.document.write("<html><body style='margin, padding, etc'>
      <img src='"+deinbild+"' border='0'></body></html>");
      pict.document.close();

      konte durch dein Posting wieder einiges dazu lernen. Danke.

      Das war es dann auch schon. Bei Bedarf kannst du noch eine Funktion einbauen, die die Bildgröße ausliest und die Fenstergröße passend ändert.

      Kannst du mir diese Funktion verraten? Das wär super!

      Kalle

      1. Hallo Kalle,

        pict = window.open("","bild","width=200,height=400 ....");
        pict.document.open('text/html');
        pict.document.write("<html><body style='margin, padding, etc'>
        <img src='"+deinbild+"' border='0'></body></html>");
        pict.document.close();

        konte durch dein Posting wieder einiges dazu lernen. Danke.

        Bei Bedarf kannst du noch eine Funktion einbauen, die die Bildgröße ausliest und die Fenstergröße passend ändert.

        Kannst du mir diese Funktion verraten? Das wär super!

        verraten? Es ist nicht geheim ;-) Du benötigst die Eigenschaften http://selfhtml.teamone.de/javascript/objekte/images.htm#heightund width.
        Diese stehen dir nach dem onLoad zur Verfügung. Also erweiterst du <body style=''> um ein <body style='' onLoad=''>

        Die Größe eines Fenster beeinflusst du mit http://selfhtml.teamone.de/javascript/objekte/window.htm#resize_to Die zugehörige Funktion sollte jetzt kein Problem mehr darstellen.

        Du bist dir den Risiken und Nebenwirkungen eines javascript-PopUps bewusst? Zum Beispiel, dass die Browser beim resizeTo() nicht die gleiche Größe (Innenabmessung) des Fensters einstellen.

        Hier kannst du spicken: http://www.maxx4u.de/pot/frameset.html

        Grüße,

        Jochen