homepage Welcome to WebmasterWorld Guest from 54.237.98.229
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to position this image differently?
we5inelgr



 
Msg#: 4566077 posted 5:44 pm on Apr 18, 2013 (gmt 0)

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:

<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:

<?
$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, $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 <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?

 

rainborick

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4566077 posted 9:06 pm on Apr 18, 2013 (gmt 0)

Something like this might help:

<style type="text/css">
.iwZoomBox { float:left; position:relative; top:0; left:0;
width:300px; z-index:1; overflow:visible; }
.iwZoom { position:relative; top:0; left:0; width:300px; z-index:1; text-align:center; }
.iwZoom:hover > div { display:block; }
.iwZoom div { position:absolute; top:0; left:302px; width:600px; display:none; z-index:2; }
</style>
<div class="iwZoomBox">
<div class="iwZoom">
<img src="thumbnails.html?file=<? echo $photo; ?>&maxw=300&maxh=300" alt=""><br>
<img src="images/magnify.png" alt="">
<div><img src="thumbnails.html?file=<? echo $photo; ?>&maxw=600&maxh=600"></div>
</div><!-- end .iwZoom -->
</div><!-- end .iwZoomBox -->

I took out the <a>nchor tags to simplify things because I couldn't see what they did. Anyway, this should get you started.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved