Image Zoom For Blogs using JQZoom

This can be very useful for reading a text image if the picture appears to be small.It gives us a small new zoomed window as we move our mouse through the image.

For example this will look like this:




Follow these steps

1. Login to blogger

2. Take Layout > Edit HTML

3. Put the code immediately after the head tag

<br /> <br /><!--JQZOOM-STARTS--> <br /><script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js" type="text/<span class=" id="IL_AD4">javascript</span>"></script> <br /><script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery.jqzoom1.0.1.js" type="'text/javascript'"></script> <br /><link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jqzoom.css" type="text/css"> <br /><script type="text/javascript"> <br /> <br />$(function() { <br />var options = <br />{ <br /><div style="color: blue;">zoomWidth: 275,</div><div style="color: blue;">zoomHeight: 275</div>} <br />$(".jqzoom").jqzoom(options); <br /> <br />var options2 = <br />{ <br /><div style="color: blue;">zoomWidth: 275,</div><div style="color: blue;">zoomHeight: 275,</div>zoomType:'reverse' <br />} <br /> <br />$(".jqzoom2").jqzoom(options2); <br /> <br />}); <br /></script> <br /><!--JQZOOM-STOPS-HELP@-http://bloggerstop.net--> <br /> <br /> <br />


4. Save the template.
5. Now you can use the zoom effect to your image by adding class "jqzoom" to your a href tag when adding a new image in the posts.

like this
<br /><a href="DIRECT_LINK_TO_THE_LARGER_IMAGE" style="color: blue;">title="IMAGE_TITLE"</span>><img src="DIRECT_LINK_TO_THE_SMALLER_IMAGE" /></a> <br />


Note
In this you have to use a smaller image and a larger image.The smaller image is displayed and larger image is for showing zoomed image.