Create zoom effect for images in blogspot ~ Zenplate

2009/04/23

Create zoom effect for images in blogspot

Posted by vuluganck | Category: Css Image | at Thursday, April 23, 2009

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>

11 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 :); 23 April 2009 at 21:59
R said...: Unfortunately, it didnt work for me .. help ??
I am sure I followed all the steps correctly :S; 2 January 2010 at 17:50
vuluganck said...: @R
I think you have forgot this step : change the <body> by <body onload="setupZoom()"> instead.; 2 January 2010 at 19:28
tunetworker 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?; 27 January 2010 at 01:43
Anonymous said...: it doesnt work; 2 March 2010 at 20:44
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/; 30 April 2010 at 10:46
Ade Truna said...: love it, thank you, best regard here in Bandung; 16 August 2010 at 13:41
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?; 10 September 2010 at 00:03
MrPatrickMr said...: Thx realy usefull for me!; 14 October 2010 at 20:59
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...; 23 October 2010 at 20:12
Top 1 Oli Sintetik Mobil-Motor Indonesia said...: I'll try it sir,
thanks; 4 August 2011 at 07:40