Grow your CSS skills. Land your dream job.

How to position this image enlarge differently?

  • # April 18, 2013 at 1:38 pm

    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:

    $iThumbnailWidth = (int)$_GET;
    $iThumbnailHeight = (int)$_GET;

    $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, $img, 0, 0, 0, 0,
    $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, $img, 0, 0, 0, 0,
    $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, $tmpimg, 0, 0,
    $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 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?

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".