Cool Jquery stuff for beginners part 1

I’ve started playing around with Jquery while working on a personal project, and it’s actually very easy. I’ve stumbled upon some nice stuff that I have decided to share with everyone.

I will do this in several part, one post per coding “trick”.

If you are learning Jquery, you can use those examples to see what can be done and get you started.

All the examples should work if you just copy/paste them in a html page, if additional extensions are required, download them and put them in the same directory as your html page.

Zoom on images with your mouse wheel

Required :

Here is the code

<html>
<head>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//Function called when a mousewheel event happen on the selected area (html here)
	$("html").mousewheel(function(event, delta) {
		if (delta > 0) { //Scroll up
			$("img").css( { //increase the width and height of all img in the area
				"width" : function(index, value) {
					return parseFloat(value) + 10;
				},
				"height" : function(index, value) {
					return parseFloat(value) + 10;
				}
			});
		} else if (delta < 0) { //Scroll Down
			$("img").css( { //decrease the width and height of all img in the area
				"width" : function(index, value) {
					return parseFloat(value) - 10;
				},
				"height" : function(index, value) {
					return parseFloat(value) - 10;
				}
			});
		}
		return false;//cancel the default scroll action on the selected area (html here)
	});
});
</script>
</head>
<body>
<img src="http://www.wordpress-fr.net/wp-content/uploads/2008/08/netmn-planet.png" style="width: 100px; height:100px;"/>
</body>
</html>


Possible improvement as an exercise : If you have tried the script, you will have realized that there is no limit at how much you can zoom in or out. Go ahead and try to add a limit to the zoom, you can also change the zoom “speed” (more zoom per scroll).

Go ahead and have some fun !

Have any tricks you want to share with us ? Mail me or post a comment ! Or follow me on twitter !

This is part 1 of my “Cool Jquery stuff for beginners” series.

You can find part 2 here

Advertisements

4 thoughts on “Cool Jquery stuff for beginners part 1

  1. Love it! I’m about to use it, after I manage to get image height according to its width. The added values are fixed and works perfectly only on square images.

    Thank You! Very Useful.

  2. Pingback: How to: How can I determine the direction of a jQuery scroll event? | SevenNet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s