Web Analytics Made Easy -
StatCounter Writing an image into a popup window - CodingForum

Announcement

Collapse
No announcement yet.

Writing an image into a popup window

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Writing an image into a popup window

    i'm using the script below to open a new window with a larger picture of a thumbnail, but when i click on the link it doesn't load the image into the window. anybody see any errors in my script?

    <script language="JavaScript">
    function opennew(img,xWidth,yHeight) {
    // path, width and height as arguments
    var msgWindow = window.open('','FullSize','Width=' + xWidth + ',Height=' + yHeight + 'resizable=no');
    var page='';
    msgWindow.document.open();
    msgWindow.document.write(page);
    msgWindow.document.close();
    }
    </script>
    <a href="#" onClick="opennew('img/800-lg.gif',350,350);">Open larger picture</a>
    Ed Ventura
    Graphic/Web Designer
    www.blackwatercompany.com

  • #2
    This is what you are writing to the new window:

    var page='';

    an empty string.

    Here is one I wrote a long time ago. You can modify it as needed:

    Code:
    <html>
    <head>
    <title>Popup Image Viewer</title>
    <script type="text/javascript">
    <!--//
    function imageView(imgFile,imgTitle,imgWidth,imgHeight,winPosX,winPosY){
    preview = window.open("", "","resizable=no,toolbar=no,scrollbars=no,menubar=no,status=no,directories=no,width="+imgWidth+",height="+imgHeight+",left="+winPosX+",top="+winPosY+"");
    
    preview.document.write('<html><head><title>'+imgTitle+' - Click to close - <\/title><\/head>'
    +'<body onBlur="self.focus();" marginWidth="0" marginHeight="0" topmargin="0" leftmargin="0">'
    +'<center>'
    +'<a href="javascript:self.close()">'
    +'<img border="0" alt="Image loading please wait...." src="'+imgFile+'" width="'+imgWidth+'" height="'+imgHeight+'">'
    +'<\/a><\/center>'
    +'<\/body><\/html>');
    preview.document.close();
    }
    // -->
    </script>
    </head>
    <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
    
    <!--// Parameter list as follows:
    Image File
    Title of Image
    Width of Image
    Height of Image
    Window Position X coordinate
    Window Position Y coordinate
    //-->
    <a href="javascript:imageView('images/australia08.jpg','Australian Limestone Desert',427,277,50,50)">
    <img src="images/australia08thumb.jpg" width="84" height="55" border="0" alt="Click for larger image"></a>
    <br>
    <br>
    <a href="javascript:imageView('images/australia11.jpg','Downtown Perth Australia',420,274,50,50)">
    <img src="images/australia11thumb.jpg" width="84" height="55" border="0" alt="Click for larger image"></a>
    </body>
    </html>
    Spookster
    CodingForum Supreme Overlord
    All Hail Spookster

    Comment


    • #3
      ds=msgWindow.document.open();
      ds.write('<HTML><HEAD><TITLE>your title</TITLE></HEAD>');
      ds.write('<BODY><IMG src="'+ yoursource + '"></BODY></HTML>);
      ds.close();
      Vladdy | KL
      "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

      Comment


      • #4
        It's really easier!

        well, the only thing that you need to write is:

        <a href="javascript:void(0);" onclick="window.open('standing.jpg','');"> salam </a>


        I thought that the name of your picture is Standing.jpg
        It's no need to open a window, you open a picture inside of a window from the begining!

        Something else, don't use "href=#", coz if you have lot's of pictures and for all of them you put this, then suppose that youre page is an scrollable page and you're on picture 100th, by clicking on that, you'll come back to the begining of the pag, coz # means the top of the page, and I don't think it's what you like!

        Comment

        Working...
        X