Please look at the following test page : sample page showing two images.
You see small images which get a bit enlarged when you move over the image.
I have used jQuery to do this, but ran into the following problem.
The only way I got the wanted effect was to enlarge the white <div> and making the image a percentage of the encapsulation <div>. If the <div> gets enlarged, the image automatically gets enlarged too.
Howerver, as you see on the sample page, the percentage a have choosen, enlarges to image so, that a 1 pixel out of alignment is visible (the right border is 1 pixel larger than the other pixels).
I could, of course, choose another percentage, but in stead want to ask the following question (being a programmer, I want to know how to solve similar problems, not this one in particular).
I would like to be able to AND enlarge the <div> AND enlarge the <IMG> during the same hover action - that way I could make sure that the enlarged image is the correct size.
I tried a couple of things, but never got the result - can anybody help me here ? Any help would be highly appreciated. I am learning to use jQuery and need to see some ways how to do things before I really can start using it.
The code of the page is below : (snippet from an existing page where I now want to include the enlarging effect - colours are just to see the different -areas).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>enlarge image with jquery</title>
<script type="text/javascript" src="http://www.sitestepper.com/versie2009/_js/jquery-1.4.min.js"></script>
<style>
html,body { margin:0; padding:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; }
* { margin:0; padding:0; }
img { border:none }
.grid7x12jq {
width:990px;
height:260px;
margin:10px 0 10px 10px;
padding:9px 0px;
clear:both;
background-color:#ffddff;
}
.grid7x12jq .griditem {
position:relative;
width:137px;
height:267px;
float:left;
border:none;
padding:0px;
margin-right:2px;
margin-bottom:16px;
background-color:#caffff;
}
.grid7x12jq .imgbox {
position:absolute;
left:0px;
top:0px;
border:none;
width:137px;
height:129px;
margin:0;
padding:0;
clear:both;
}
.grid7x12jq .artbox {
position:absolute;
left:0px;
top:138px;
text-align:center;
font-size:11px;
border:none;
padding:0px;
width:137px;
height:48px;
line-height:14px;
margin:0px;
}
.band-foto {
position:absolute;
left:10px;
top:10px;
width:118px;
height:118px;
background-color:white;
border:1px solid black;
}
.band-foto img {
width:88%;
height:88%;
padding:7px;
/*position:absolute;*/
}
</style>
</head>
<body>
<h1>jQuery Test - Enlarge images</h1>
<script type='text/javascript' src='http://www.sitestepper.com/versie2009/_js/jquery-1.4.1.min.js'></script>
<div class='grid7x12jq'>
<div class='griditem'>
<div class='imgbox'>
<div class='band-foto'>
<a href='http://www.adin.be/en/2ndpage.asp?dtn=07032-0181&amp;titel=Estate collier with brilliant and emeralds'><img
src='http://www.adinimages.com/low/07032-0181.P00.JPG' height='100%' width='100%' alt='Estate collier with brilliant and emeralds'/></a>
</div>
</div>
<div class='artbox'>
<div style='height:30px;'>
estate collier with bri...
</div>
3 photos ca.1970<br/>
<a href='http://www.adin.be/en/2ndpage.asp?dtn=07032-0181&amp;titel=Estate collier with brilliant and emeralds'>view product</a><br/>
online price:<br/>€ 99999<br/><br/>
<form class='addbasketbutton' action='http://www.adin.be/en/action_-_sh_put_in_basket_(01).asp?BskDT=07032-0181' method='post'>
<input type='submit' value='Add to basket'/>
</form>
</div>
</div>
<div class='griditem'>
<div class='imgbox'>
<div class='band-foto'>
<a href='http://www.adin.be/en/2ndpage.asp?dtn=07032-4420&amp;titel=Estate collier with brilliant and emeralds'><img
src='http://www.adinimages.com/low/07032-4420.P00.JPG' height='100%' width='100%' alt='Estate collier with brilliant and emeralds'/></a>
</div>
</div>
<div class='artbox'>
<div style='height:30px;'>
estate collier with bri...
</div>
3 photos ca.1970<br/>
<a href='http://www.adin.be/en/2ndpage.asp?dtn=07032-4420&amp;titel=Estate collier with brilliant and emeralds'>view product</a><br/>
online price:<br/>€ 99999<br/><br/>
<form class='addbasketbutton' action='http://www.adin.be/en/action_-_sh_put_in_basket_(01).asp?BskDT=07032-4420' method='post'>
<input type='submit' value='Add to basket'/>
</form>
</div>
</div>
</div>
<div class='clear'></div>
<script type="text/javascript">
$(document).ready(
function()
{
$('.band-foto').hover(
function()
{
$(this)
.animate({ left:'5px', top:'5px', width:'130px', height:'130px'}, 'fast');
} ,
function(){
$(this)
.animate({ left:'10px', top:'10px', width:'118px', height:'118px'}, 'fast');
}
);
}
);
</script>
</body>
</html>