2009/06/01

Auto Zoom image

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.



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

5 comments:

Emtoi’s Blog said...

Thank you!
Demo http://webparkgirls.blogspot.com/2009/06/sexy-bollywood-celebrity-kareena-kapoor.html

My Best Choices said...

Thank you!

Demo http://mcmasterr.blogspot.com

enjoy..

Tejas Surya said...

Do you mean everytime we need to change the image url code as mentioned? I don't think it's deasible. With my website I will be posting many images and changinf the code for each and every image is ridiculous.

It's not even working at the above demo sites. Is there any other way you just put the code once and forget about it. All the images in the post should automatically zoom.

PrAbHaKaRaN said...

not working sir

MrPatrickMr said...

Thx bro.
now on my blog ( http://FIlmeaufYouTube.blogspot.com/ )

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.