#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3

    Question How to position this image enlarge differently?


    Hi all,

    I've got this working so that a thumbnail of the image is displayed, and when moused over the magnifying glass, the image is displayed in a nonthumbnail size (i.e. larger):

    code on the page displaying the image:
    Code:
    <img src="thumbnails.html?file=<? echo $photo; ?>&maxw=300&maxh=300" border="0"><br>
    <a class="nonThumbnail" href="#thumb"><img src="images/magnify.png" border="0"><span><img src="thumbnails.html?file=<? echo $photo; ?>&maxw=600&maxh=600"></span></a>
    code in thumbnails.html:
    PHP Code:
    <?
    $sImagePath 
    $_GET["file"];

    $iThumbnailWidth = (int)$_GET['width'];
    $iThumbnailHeight = (int)$_GET['height'];

    $iMaxWidth = (int)$_GET["maxw"];
    $iMaxHeight = (int)$_GET["maxh"];

    if (
    $iMaxWidth && $iMaxHeight$sType 'scale';
    else if (
    $iThumbnailWidth && $iThumbnailHeight$sType 'exact';

    $img NULL;

    $sExtension strtolower(end(explode('.'$sImagePath)));
    if (
    $sExtension == 'jpg' || $sExtension == 'jpeg' || $sExtension == 'pjpeg') {

        
    $img = @imagecreatefromjpeg($sImagePath)
            or die(
    "Cannot create new JPEG image");

    } else if (
    $sExtension == 'png') {

        
    $img = @imagecreatefrompng($sImagePath)
            or die(
    "Cannot create new PNG image");

    } else if (
    $sExtension == 'gif') {

        
    $img = @imagecreatefromgif($sImagePath)
            or die(
    "Cannot create new GIF image");

    }

    if (
    $img) {

        
    $iOrigWidth imagesx($img);
        
    $iOrigHeight imagesy($img);

        if (
    $sType == 'scale') {

            
    $fScale min($iMaxWidth/$iOrigWidth,
                  
    $iMaxHeight/$iOrigHeight);

            if (
    $fScale 1) {

                
    $iNewWidth floor($fScale*$iOrigWidth);
                
    $iNewHeight floor($fScale*$iOrigHeight);

                
    $tmpimg imagecreatetruecolor($iNewWidth,
                                   
    $iNewHeight);

                
    imagecopyresampled($tmpimg$img0000,
                
    $iNewWidth$iNewHeight$iOrigWidth$iOrigHeight);

                
    imagedestroy($img);
                
    $img $tmpimg;
            }     

        } else if (
    $sType == "exact") {

            
    $fScale max($iThumbnailWidth/$iOrigWidth,
                  
    $iThumbnailHeight/$iOrigHeight);

            if (
    $fScale 1) {

                
    $iNewWidth floor($fScale*$iOrigWidth);
                
    $iNewHeight floor($fScale*$iOrigHeight);

                
    $tmpimg imagecreatetruecolor($iNewWidth,
                                
    $iNewHeight);
                
    $tmp2img imagecreatetruecolor($iThumbnailWidth,
                                
    $iThumbnailHeight);

                
    imagecopyresampled($tmpimg$img0000,
                
    $iNewWidth$iNewHeight$iOrigWidth$iOrigHeight);

                if (
    $iNewWidth == $iThumbnailWidth) {

                    
    $yAxis = ($iNewHeight/2)-
                        (
    $iThumbnailHeight/2);
                    
    $xAxis 0;

                } else if (
    $iNewHeight == $iThumbnailHeight)  {

                    
    $yAxis 0;
                    
    $xAxis = ($iNewWidth/2)-
                        (
    $iThumbnailWidth/2);

                } 

                
    imagecopyresampled($tmp2img$tmpimg00,
                           
    $xAxis$yAxis,
                              
    $iThumbnailWidth,
                           
    $iThumbnailHeight,
                           
    $iThumbnailWidth,
                           
    $iThumbnailHeight);

                
    imagedestroy($img);
                
    imagedestroy($tmpimg);
                
    $img $tmp2img;
            }    

        }

        
    header("Content-type: image/jpeg");
        
    imagejpeg($img);

    }
    ?>
    This works fine as far as creating the thumbnail and the larger image with mouseover via the <a> tag.

    However, the larger image (displayed on mouseover) is positioned underneath and to the side of the original (thumbnail) image.

    What I'd like to do is have the larger nonthumbnail image displayed to the right of the thumbnail with the tops of the two images even with each other.

    How can that repositioning be done?
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,169
    Rep Power
    184
    CSS & JavaScript, commonly referred to as "DHTML". Do a online search for "dhtml element position" and you should find several examples, on how to do this.

IMN logo majestic logo threadwatch logo seochat tools logo