SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict tina88's Avatar
    Join Date
    Jan 2007
    Location
    UK
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Auto size image popup

    Hiya, I am using a javascript to create auto sized popups according to the size of my images. It works fine in FF but IE7 just loads the default sized window if the image is larger. It does resize if the image is smaller though but makes it too thin, cutting some of the image off. I don't know javascript so could someone please look at it for me
    Code:
    // Script Source: CodeLifter.com
    // URL: http://www.codelifter.com/main/javascript/autosizeimagepopup.html
    // Copyright 2003
    // Do not remove this notice.
    
    // SETUPS:
    // ===============================
    
    // Set the horizontal and vertical position for the popup
    
    PositionX = 100;
    PositionY = 100;
    
    // Set these value approximately 20 pixels greater than the
    // size of the largest image to be used (needed for Netscape)
    
    defaultWidth  = 800;
    defaultHeight = 600;
    
    // Set autoclose true to have the window close automatically
    // Set autoclose false to allow multiple popup windows
    
    var AutoClose = true;
    
    // Do not edit below this line...
    // ================================
    if (parseInt(navigator.appVersion.charAt(0))>=4){
    var isNN=(navigator.appName=="Netscape")?1:0;
    var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
    var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
    var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
    function popImage(imageURL,imageTitle){
    if (isNN){imgWin=window.open('about:blank','',optNN);}
    if (isIE){imgWin=window.open('about:blank','',optIE);}
    with (imgWin.document){
    writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
    writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
    writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
    writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
    writeln('width=100-(document.body.clientWidth-document.images[0].width);');
    writeln('height=100-(document.body.clientHeight-document.images[0].height);');
    writeln('window.resizeTo(width,height);}');writeln('if (isNN){');       
    writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
    writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
    if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
    else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
    writeln('<a href="javascript:self.close()"><img name="George" src='+imageURL+' style="display:block" border="0"></a></body></html>');
    close();		
    }}
    Thanks, Tina

  2. #2
    SitePoint Addict tina88's Avatar
    Join Date
    Jan 2007
    Location
    UK
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump!

  3. #3
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you have to take the image size with some of the server side scripts and set the width and height attributes while opening pop up window. I dont know which server side script you have used. It would be better to know to help you with the exact solution if you tell that.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  4. #4
    SitePoint Addict tina88's Avatar
    Join Date
    Jan 2007
    Location
    UK
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. I am using PHP
    Last edited by tina88; Feb 28, 2007 at 06:02.

  5. #5
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please see this example work with php:
    Code:
    					  <?php
    					  if($rows['PrgImage'] != ""){
    					  list($w, $h) = getimagesize(".../chn_thumb/" . $rows['PrgImage']);
    					  ?>
                          <tr>
                            <td colspan="2" align="left" valign="top">Old Image</td>
                          </tr>
                          <tr>
                            <td colspan="2" align="left" valign="top"><a href="javascript:void(null);" onclick="javascript:window.open('./viewimage.php?ImageName=<?php echo $rows['PrgImage'];?>','EnlargePicture','width=<?php echo $w+30;?>,height=<?php echo $h+50;?>');"><img src="../chn_thumb/thumbnails/<?php echo $rows['PrgImage']; ?>" border="0" /></a></td>
                          </tr>
                          <tr>
                            <td colspan="2" align="left" valign="top">Browse a new image <span style="font-size:10px;">(Maximum width 640 and GIF, JPEG, or PNG are only supported.)</span>*</td>
                          </tr>
                          <tr>
                            <td colspan="2" align="left" valign="top"><input name="prg_file" type="file" id="prg_file" size="35" /></td>
                          </tr>
    					  <?php
    					  }else{
    Where i have sent the image name to the file (the file which displays the image) from the url as you can see.
    And my display file looks like this:
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Enlarge Picture</title>
    </head>
    
    <body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px #EFEFEF solid;">
      <tr>
        <td colspan="3" bgcolor="#EFEFEF">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3" align="center" valign="top"><img src="../chn_thumb/<?php echo trim($_GET['ImageName']);?>" title="Click to close window." style="cursor:pointer;" onclick="window.close();" /></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    Hope that it will help you.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  6. #6
    SitePoint Addict tina88's Avatar
    Join Date
    Jan 2007
    Location
    UK
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks rajug, that is brilliant


Bookmarks

Posting Permissions

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