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&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&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&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&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>
I don’t typically use animate, so I’ll leave it to you to fill in the specifics, but jQuery lets you stuff as many functions in an event as you can handle–and even allows for chaining, meaning you can grab the selector and just keep going (so long as you are still on or can get back to the right object). So that’s what I’d do: go find the image and animate it, too.
(Numbers are just guesses. And I changed formatting to save space.)
Now, there might be a lag, I’m not sure. If so, you could try unchaining it and just making it into two (
$(this).animate()and$(this).find()), but this might suffer from the same fate. My gut says you want to refigure your CSS so that the DIV is only as big as the image plus padding, and so animating the image is all you need to do.