Auto Zoom image Posted by vuluganck | at Monday, June 01, 2009

Hello, today you will see the next tip about image effect using Jquery-Auto zoom image.As it's name, you don't have to click on it to enlarge the image, it will be automatically enlarged.I have published 1 tip about zoom image,too, it's called FancyZoom, it is very useful for you if you don't like this kind of image zoom tip.

• View live demo


• Download the file

You like that? But before we start, I have to tell you that you should use this tip just for small images.If you are the expert about Jquery with the function, you can option the style in the file you will download below. I will make it very easy here.


Log in your blogger account, go to your source code and find the ]]></b:skin> then add this code before it :

img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}

Next, find the </head> tag and add 2 script before it:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="zenzoom.js">

/* Expando Image Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

</script>

Note: After you downloaded the file(click on "Download the file"button) ,extract it you will see the zenzoom.js file,you just have to upload this file to your favorite host such as 110mb.com or hotlinkfiles.com to get the direct link.
Ok you uploaded it ? now copy the direct URL and paste instead of the red code.Do not delete the credit or anything, if you delete, it will not work anymore.

Finally , you have 1 step left to be finished.When you post new article, add this code,just paste the URL link in the pink code:

<img class="expando vacation" border="0" src="Image URL here" width="100" height="66">

That's all, you have create the cool effect for your images,you love it ? Share this post to your friends and please do me a back link, I will very thanks if you do that.Have a gooday with this tip my friends.
Zen

Requirements: Jquery
Website : dynamicdrive.com
Author: John Scheuer
Convert to Blogger: Zenplate