Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2002
    Location
    Noblesville, IN
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 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
    Supreme Overlord Spookster's Avatar
    Join Date
    May 2002
    Location
    Marion, IA USA
    Posts
    6,280
    Thanks
    4
    Thanked 83 Times in 82 Posts
    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
    CodingForums Supreme Overlord
    All Hail Spookster

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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"

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    Iran
    Posts
    695
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •