#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    3
    Rep Power
    0

    Question Need help with dhtml and php resizing image onclick


    I'm having a little problem with my script. The script takes thumnailed pictures and enlarges them when clicked the problem i'm having is i cant figure how to change the image size when it loads the new image. It stays the same size as the first image that was loaded. If anyone could help me out it would be greatly appreciated
    Sorry for the long Script
    thanks in advance
    the src
    Header Script Dhtml
    Code:
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    <!--
    
    function canManipulateImages() {
    	if (document.images)
    		return true;
    	else
    		return false;
    }
    function loadPosterImage(imageURL) {
    	if (gImageCapableBrowser) {
    		document.imagePoster.src = imageURL;
    		return false;
    	}
    	else {
    		return true;
    	}
    }
    gImageCapableBrowser = canManipulateImages();
    // -->
    </SCRIPT>
    </head>
    php script

    PHP Code:
    <?
        
         $size 
    getimagesize ('images/' .$pic1 ); ?> 
    <?

    if ($size[0] > $size[1])
    {        
    ?>
          <a href="http://avalonmodels.com"> <img src="images/<? echo "$pic1"?>" name="imagePoster" border="0" alt="" width="432" height="288"></a> 
          <?  
    } else { 
    ?>
          <a href="http://avalonmodels.com"> <img src="images/<? echo "$pic1"?>" name="imagePoster" border="0" alt="" width="288" height="432"></a> 
          <? 

    ?>
          &nbsp;</td>
        <td width="28">&nbsp;</td>
      </tr>
      <tr> 
        <td height="122">&nbsp;</td>
        <td width="108" align="center" valign="top"> 
        <?
        
            
    if ($pic1 == "")
    {        
          echo 
    ""
          
    ?>
        <?  
    } else { 
    ?>
        
           <? $size getimagesize ('images/'.$pic1 ); } ?> 
          <? 


    if ($size[0] > $size[1])
    {        
    ?>
          <div align="center"><font face="Arial" size="2"> <font color="#FFFFFF"><a href="images/<? echo "$pic1"?>" onclick="return(loadPosterImage('images/<? echo "$pic1"?>'))"> 
            <img src="images/<? echo "$pic1"?>" alt="" border="0" align="top" width="108" height="72"><br>
            <br>
            </a></font><i>(Click To Enlarge)</i></font> 
            <?  
    } else { 
    ?>
            <font face="Arial" size="2"> <font color="#FFFFFF"><a href="images/<? echo "$pic1"?>" onclick="return(loadPosterImage('images/<? echo "$pic1"?>'))"> 
            <img src="images/<? echo "$pic1"?>" alt="" border="0" align="top" width="72" height="108"><br>
            <br>
            </a></font><i>(Click To Enlarge)</i></font> 
            <? 

    ?>
  2. #2
  3. 300lb Bench!
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Aug 2001
    Location
    New York
    Posts
    2,353
    Rep Power
    62
    I'll give you my thoughts, but you might do better posting this question in the javascript forum.

    Most sites have two versions of an image. When the user clicks on the small version, that simply takes them to the same or a new page and displays the new image. Personally, I'd take this route rather than trying to resize an image.

    If you try to resize an image, what that means is the user is downloading the image with a lot of information. Otherwise taking a small image and making it bigger will result in pixilation. So you'll start of by taking a large image and making it small, then making it big if the user wants. If the user doesn't want to look at the larger image, you're still forcing him/her to download the larger image, which can slow down the rendering of your page. Hope that helps.

IMN logo majestic logo threadwatch logo seochat tools logo