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 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to position this image 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
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    There's no information on the positioning in that given code. Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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