jQuery provides a basic effect of sliding in and out. However, in other to create other form of effect we will have to apply animate function provided by jQuery. This tutorial will demonstrate of using animate function in jQuery to perform a shrink function at the center of an element that you often see in Gallery and other types of plugin.
It is not difficult to create a method to demonstrate a shrink in and out effect with animate function. The concept used here is to opposite the natural direction of the sliding jQuery provides in order to zoom in the image shows below.
image to be zoom
Yes! Its RAWR! cute ghost, i was lazy to find a proper picture so i just grab him down to play with. Now, in order to shrink him properly, we will have to use the plugin i created just for him. I will also explain what does this simple plugin does. You can have a look at the demo below,
PS: There is another method which is a bit more complex than this one which you can see from here
So, how does the plugin work? Simple! it’s just pure animate function from jquery with css. Illustrator the code below.
$(selector).stop(true,false)
.animate({
height: options.zoomSize+'px',
width: options.zoomSize+'px',
marginTop: ((oriH-options.zoomSize)/2)+'px',
marginLeft: ((oriW-options.zoomSize)/2)+'px'
}, options.duration)
What it does here is to shrink it to the size you define and move opposite accordingly. Let’s assume height: and width: move upwards and right respectively while it shrink. So marginTop: and marginLeft: will move downwards and left respectively so that our eyes will illustrate the shrink on the center of the box! hopes this help!
Usage
An example on how to use this plugin from the demo site. The parameter is optional.
$('#zoomMe').zoom(
{
zoomWidth: 10,
zoomHeight: 10,
duration: 3000
}
);
or
$('#zoomMe').zoom();
Parameter
The optional parameter for this plugin is as follow,
- zoomwidth: the width you wish it to be minimize default its 10
- zoomheight: the height you wish it to be minimize defaults its 10
- duration: time for zoom to be complete defaults its 5000
You can download the plugin from
- jqueryrawrzoom (2.67kb) v1.0 uncompressed.
- jqueryrawrzoomcompressed (2.42kb) v1.0 compressed.
Like this post? Share it!
No related posts.
Hmm… .each() in combination with globals? interesting.
Ever tried $(“.class”).zoom(..) with images of different size but same class?
should also work tho. but i haven’t had the chance to try with different image size yet with this plugin. Tell me if it doesn’t because i believe there is a need for a wrapper around the image to contain the resizing of the image or else the image will move straight to the left screen. Other than that i do believe different size will also zoom properly =)