2009/04/23

Create zoom effect for images in blogspot


When you visit the the 4rums you will see 1 great effects for image, yes you can zoom it smaller or larger. It also helps your blog/site to load faster if the images are too large.So today i will introduce you this tip for blogspot by js file - it's called FancyZoom.

This is the demo, click on the image to see :






1st , log in Blogger > Layout > Edit HTML then add this code below before </head> tag:

<script src='http://zendersto.110mb.com/FancyZoom.js' type='text/javascript'/>
<script src='http://zendersto.110mb.com/FancyZoomHTML.js' type='text/javascript'/>


Ok now next step, you have to change the <body> by <body onload="setupZoom()"> instead

Save! You have already created zoom effect for images.However ,to zoom image you have from now , you don't have to use the tag <img src="Image link" /> to add image anymore , but you have to use this new form :

<a href="Image link"><img src="image link" width="300" border="0" height="200" />

Note:
Image link : support jpg, png, gif ...
Width : thumbnail width.
Height: thumbnail height.
Border: thumbnail border.


For example :
<a href="http://img.tamtay.vn/files/_Andy_/photos/78996/47a46afa_when_the_love_falls2_resize.jpg"><img src="http://img.tamtay.vn/files/_Andy_/photos/78996/47a46afa_when_the_love_falls2_resize.jpg" width="300" height="200" border="0" /></a>

12 comments:

Magic Toolbox said...

Watch this video to install a similar effect that we make, called Magic Thumb:

http://www.blogger.com/post-edit.g?blogID=6775738713871362509&postID=8422325793497734614

It is free for non-commercial use.

We also make other image zoomers and magnifiers :)

R said...

Unfortunately, it didnt work for me .. help ??
I am sure I followed all the steps correctly :S

vuluganck said...

@R
I think you have forgot this step : change the <body> by <body onload="setupZoom()"> instead.

Ozo said...

Do i have to use: a href="Image link"><img src="image link" width="300" border="0" height="200" / EVERY time i post an image?

Anonymous said...

it doesnt work

yo87 said...

Well, i already try it. it's work fine with me. Thanks a lot. i applied it into my blog.

http://footballcrazie.blogspot.com/

Ade Truna said...

love it, thank you, best regard here in Bandung

Anonymous said...

Hello Seems this effect is exactly what Im looking for, but i already have many pictures in my blog do i have to change the link for every posted picture by far or it's not needed?

MrPatrickMr said...

Thx realy usefull for me!

koleksikornia said...

Thank you so much Zen

i was really happy to use it when it works on my blog..!!!thank you very much..
my blog looks so awesome with it.
you can see it here http://koleksikornia.blogspot.com


Now i'm trying to use a fancy Zoom for the next trying..
hope it will success...

Top 1 Oli Sintetik Mobil-Motor Indonesia said...

I'll try it sir,
thanks

Anonymous said...

awesome

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

 
.