Zoom Your Images In Blogger Posts

Zoom Your Images In Blogger Posts is the script you would have seen in many websites to show of there image demos as large one as its very nice way to show there images and templaes.Today i will tell you how to install this script in your blog so as the images in your post can be clicked and viewed in larger size.

Firstly Download these two scripts to your computer FancyZoom.js and FancyZoomHTML.js


Upload these files to your server which you use to upload js files or check from here.

Login To Blogger Now Goto LAYOUT > Edit Html and Find </head> tag

Place the below codes before it.

<script src='http://Your_upload_url/FancyZoom.js' type='text/javascript'></script>

<script src='http://Your_upload_url/FancyZoomHTML.js' type='text/javascript'></script>


Change the scripts url above in red to yours where you uploaded these js files.

Now find this code <body> in your template codes.

And replace it with the below code:

<body onload="setupZoom()">

Now Click SAVE TEMPLATE

Now whenever you embed image in your post use cods like this below-


<a href="http://img2.pict.com/ef/2a/93/d6ba88943e19c2608b3e7b88f8/yZOfg/800/holocaustremembranceday.gif"><img height="200" src="http://img2.pict.com/ef/2a/93/d6ba88943e19c2608b3e7b88f8/yZOfg/800/holocaustremembranceday.gif" width="300" border="0" /></a>


Width="300" and height="200" are the size of images that are shown in the post,so that the shown images are smaller that the original images.Means whats the actual size of the image make it small in post so that when someone click it will zoom up to its original size.

When you click theses images they will be zoomed on your same screen and click zoomed image again to make it small again.

For Demo check the image on this blogger and click it, to zoom it and then click again zoomed image to make it small.

I hope you would like this hack for sure. Best Of Luck !!

Labels: ,