Growing Image

**simonjones** · 12-13-2008, 03:41 PM

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.

**Snookerman** · 12-13-2008, 04:50 PM

jQuery 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 and CSS methods.

**Snookerman** · 12-13-2008, 05:10 PM

Here is what the code could look like:

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>

Now all you need is the jQuery js file.

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

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>

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

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>

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.

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>

Thread: Growing Image

Thread Tools

Search Thread

Growing Image

The Following User Says Thank You to Snookerman For This Useful Post:

The Following User Says Thank You to Medyman For This Useful Post:

The Following User Says Thank You to Snookerman For This Useful Post:

Thank You

The Following User Says Thank You to Snookerman For This Useful Post:

The Following User Says Thank You to Medyman For This Useful Post:

The Following User Says Thank You to Snookerman For This Useful Post:

The Following User Says Thank You to Medyman For This Useful Post:

The Following User Says Thank You to Medyman For This Useful Post:

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions