Log in

View Full Version : Resolved Growing Image


simonjones
12-13-2008, 03:41 PM
I came across this the other day: http://www.prlog.org/10136911-free-avi-to-video-converter-leawo-avi-converter-converts-avi-to-video-in-any-format-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.
Snookerman
12-13-2008, 04:50 PM
jQuery (http://jquery.com/) is great with this and it's quite easy to do.
Medyman
12-13-2008, 05:06 PM
When using WebKit browsers, you can actually do that using CSS alone. To dream of the day when that's supported in all browsers.

I would second Snookerman's suggest of jQuery. You'll specifically want to look into the animate (http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback) and CSS (http://docs.jquery.com/CSS) methods.
Snookerman
12-13-2008, 05:10 PM
Here is what the code could look like:

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

Now all you need is the jQuery js file (http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=).
simonjones
12-13-2008, 05:52 PM
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.
Snookerman
12-14-2008, 01:11 PM
You're welcome! Remember to go to the first post in this thread, edit, go advanced and add the Resolved prefix to the title.
Medyman
12-14-2008, 02:53 PM
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 the growBy variable. 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:

<!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>
Snookerman
12-14-2008, 04:03 PM
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:

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

I also removed the console.log and added a semicolon that you forgot after the growBy variable. It should now work fine.
Medyman
12-14-2008, 04:56 PM
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.
Medyman
12-14-2008, 06:12 PM
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 add class="zoom" to any image you want to apply this effect to.


<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>
Snookerman
12-14-2008, 06:38 PM
I'm sure Snookerman will correct them if there are.
Hehe, don't want to get the besserwisser tag now.

I can't believe I overlooked that my revised suggestion was not dynamic, since that was the point, so I started working on it, getting close but just not there. So when you posted this I was quite relieved and I noticed we took approximately the same approach. However, to maintain my besserwisser status, there are some issues. I tested it and the growing problem remains, although with a limit and also, sometimes the images don't react to the hovering.

I'll try to put both our codes together and hopefully I'll be able to sleep tonight without thinking about this code :D.
Medyman
12-14-2008, 06:58 PM
I spent about 5 minutes on it, so I expect there to be issues. Though, I think this will suffice for 95% of use cases. The problem occurs some someone starts hovering on/off fairly fast and repeatedly. I tend to dismiss the import of coding to fit those fringe situations. The only practical instance when that would occur is during testing. If a casual web surfer is just being obnoxious, I don't really care to waste my time catering to that audience.

But by all means, make it perfect. Actually, in order to do so, I think you'll need to extend the jQuery object and create a plugin. That would be the easiest way, anyway.
Snookerman
12-14-2008, 07:35 PM
Hehe, I think I'll take a look at it later, I'm too tired now. One thing I realized is that we never actually asked Simon if he actually needs this or if he just has one picture he wants to zoom. In any case, this might be helpful for other coders viewing this thread.
jscheuer1
12-15-2008, 07:59 AM
See also:

http://www.dynamicdrive.com/forums/showthread.php?p=175361#post175361
Snookerman
12-15-2008, 08:27 AM
That's a great script, but do you know how to make images in natural size, zoom in and preferably with jQuery for those (read: me) who don't know much JavaScript. What we're trying to do here is zooming in on images without have to specify a smaller size for each one, which is more dynamic.
jscheuer1
12-15-2008, 04:21 PM
The example link (from post 1 in this thread) used just one image with both the smaller and larger dimensions specified as numeric variables.

I looked at that code, it was horrible. And, you don't have to specify anything.

With my script, when the image is first moused over, it initializes by getting both the actual dimensions and those set in the attributes. No javascript knowledge is required. It's quite dynamic, and degrades well if not supported.

Now, ddadmin has suggested that I use Math.cos() to make the arc of expansion/contraction more of a curve. If that's what you are talking about, I'm not seeing how to make that work, yet. But I think I got the math right, it's just that the difference isn't great enough to be detected by the human (at least my) eye.