Image Zoom [JQZoom] For Blogger Blogs

Here's a creative and innovative way to display large pictures in limited area:
that's JQzoom !

Purpose of this hack:

While the smaller thumbnail image is displayed in your post, the corresponding larger image is displayed inside a floating window only when the reader hovers his/her mouse cursor over the thumbnail-image. The image displaying-style inside the floating-window is exactly like that of a view through a magnifying lens or that of a microscopic view.

To get a clear idea of the hack, 

check out the Live Demo... (in a Blogger blog).

And another standalone DEMO

Now follow these instructions to add this hack to your Blogger/BlogSpot blog:

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).

Browser Support:

 6+ |  2+ | 1.0 |  2+ |  9+ |

This hack is similar to Blogger-LightBox, where the zoom effect is seen in the entire image (where image-zoom is observed only on mouse click instead of mouse-hover).

Project Author:

Renzi Marco from Mind Projects, presently working on the next release of

jqzoom with thumbnail image switch.

R. Marco is an Italian Engineer skilled in php, CodeIgniter, javascript, JQuery, XML and SOAP... He is actually looking for a full-time job in a collaborative and innovative web team. Hire Him.