I came across this the other day: http://www.prlog.org/10136911-free-a...-you-want.html.
Place the cursor on the image and it is enlarged (the image, not the cursor).
Anyone know if this is easy to do or not?
Thanks.
Printable View
I came across this the other day: http://www.prlog.org/10136911-free-a...-you-want.html.
Place the cursor on the image and it is enlarged (the image, not the cursor).
Anyone know if this is easy to do or not?
Thanks.
jQuery is great with this and it's quite easy to do.
Here is what the code could look like:
Now all you need is the jQuery js file.HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<style type="text/css">
img {
width:320px;
height:240px;
}
</style>
<script type="text/javascript">
$(function() {
$('img').hover(function() {
$(this).stop().animate({'width':'640px','height':'480px'},'slow');
},function() {
$(this).stop().animate({'width':'320px','height':'240px'},'slow');
});
});
</script>
</head>
<body>
<img src="http://www.autoclub.com.au/uploaded_images/citroen-c-metisse-concept-722498.jpg" alt="" />
</body>
</html>
Thanks ever so much Snookerman and Medyman!! Very grateful for this.
You're a very helpful lot here. Hope when I'm clever, I will be too.
Thanks again.
You're welcome! Remember to go to the first post in this thread, edit, go advanced and add the Resolved prefix to the title.
Simonjones...
The code that Snookerman suggested is fine in principle. But, it's not very flexible for multiple implementations. If you're only trying to do the effect on one image, then it's fine because you can hard code the dimensions. But, if you're doing it on several images, his approach is a bit cumbersome.
I took the liberty of coding a more dynamic script below. It still uses jQuery and Snookerman's code. But I've made all the dimensions into variables. At the top of the script, you would specify the scale by which you want to "zoom" in thegrowByvariable. Then, for any image that you wanted the effect to apply to, you would give it a class of "zoom". The script takes care of everything else:
Example:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Scaling Images with jQuery</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img.zoom').hover(function() {
growBy = .35 // Percentage
origWidth = $(this).width();
origHeight = $(this).height();
zoomWidth = origWidth + (origWidth*growBy);
zoomHeight = origHeight + (origHeight*growBy);
console.log(zoomWidth + " + " + zoomHeight);
$(this).stop().animate({'width':''+zoomWidth+'','height':''+zoomHeight+''},'normal');
},function() {
$(this).stop().animate({'width':''+origWidth+'','height':''+origHeight+''},'normal');
});
});
</script>
</head>
<body>
<img src="http://tinyurl.com/57xe5g" class="zoom" />
</body>
</html>
Medyman, there is a problem with your script. Since your hover function gets the width and height of the image every time it runs, it will keep adding to the values and after a few times hovering the image, it will get huge. You can see this by checking the console since you've forgot to remove the console.log bit. Here is the fix:
I also removed the console.log and added a semicolon that you forgot after the growBy variable. It should now work fine.Code:<script type="text/javascript">
$(document).ready(function(){
growBy = .35; // Percentage
origWidth = $('img.zoom').width();
origHeight = $('img.zoom').height();
$('img.zoom').hover(function() {
zoomWidth = origWidth + (origWidth*growBy);
zoomHeight = origHeight + (origHeight*growBy);
$(this).stop().animate({'width':''+zoomWidth+'','height':''+zoomHeight+''},'normal');
},function() {
$(this).stop().animate({'width':''+origWidth+'','height':''+origHeight+''},'normal');
});
});
</script>
Ahh, good catch Snookerman. You're very right. If the user mouses-over and then back on really quickly, the width and height get recalibrated. But your proposed solution will again only work for a single instance.
If I have time later, I'll post some revised code.
Simon, the below code, in my estimation, should work nicely. It's not really well tested so there might still be some errors in my logic. I'm sure Snookerman will correct them if there are.
Again, all you need to do after properly linking to these scripts is addclass="zoom"to any image you want to apply this effect to.
Code:<script type="text/javascript">
$(document).ready(function(){
// Scale
zoom = .5
// Variables
var h; var w;
// Hover
$('img.zoom').mouseover(zoomIn);
$('img.zoom').mouseout(zoomOut);
// Zoom In
function zoomIn() {
h = $(this).height();
w = $(this).width();
$(this).stop().animate({'width':''+(w + (w*zoom))+'','height':''+(h + (h*zoom))+''},'normal');
}
// Zoom Out
function zoomOut() {
$(this).unbind('mouseover')
$(this).stop().animate({'width':''+w+'','height':''+h+''},'normal', 'swing', function() {
$(this).mouseover(zoomIn);
});
}
});
</script>