பிளாக்கரில் உள்ள image களை Zoom செய்யலாம்.

 



STEP #1
Log in to Blogger and go to Layout -> Edit HTML
then, find (CTRL+F) this code in your template:

</head>

And immediately ABOVE/BEFORE it, paste this code:

<!--JQZOOM-STARTS-->
<script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery.jqzoom1.0.1.js" type='text/javascript'></script>
<link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jqzoom.css" type="text/css" />
<script type="text/javascript">

$(function() {
var options =
{

zoomWidth: 275,

zoomHeight: 275

}
$(".jqzoom").jqzoom(options);

var options2 =
{

zoomWidth: 275,

zoomHeight: 275,

zoomType:'reverse'
}

$(".jqzoom2").jqzoom(options2);

});
</script>
<!--JQZOOM-STOPS-HELP@-http://bloggerstop.net-->

Default width and height of zoom-window is fixed as 275x275 pixels. You may change the values if you want.

STEP #2
Save your template.

STEP #3
Now whenever you want to add this image-zoom effect to your images, simply add the class "jqzoom" to your a href tag.

So, if this is the usual code you use to display an image in your blog:

<a href="DIRECT_LINK_TO_THE_LARGER_IMAGE" title="IMAGE_TITLE"><img src="DIRECT_LINK_TO_THE_SMALLER_IMAGE"/></a>

Now to implement the hack, the new code becomes:

<a href="DIRECT_LINK_TO_THE_LARGER_IMAGE" class="jqzoom" title="IMAGE_TITLE"><img src="DIRECT_LINK_TO_THE_SMALLER_IMAGE"/></a>

In the DEMO, this is the larger image used while this one is the thumb-nail.

NOTE #1: To display the images with Reverse Opacity Effect (second image in the DEMO), add class="jqzoom2" instead of class="jqzoom"

NOTE #2 (IMPORTANT): For this hack, you should have two sizes of the same image. The smaller image is displayed in the blog, and the larger image is hyperlinked to the smaller image (displayed in the floating window).
You may use any image-editor (MS-Paint/Adobe photoshop) to create the smaller thumbnail-image (displayed it in the blog posts).