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.



ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

41 comments

Write comments
February 02, 2010 11:41 PM delete

Great work mate.and cool feature.Keep up the good work;)

Reply
avatar
February 03, 2010 1:45 AM delete

super
do u have any plugins for wordpress for zooming option ???

Reply
avatar
February 03, 2010 7:01 AM delete

@Sudarshan,

Not sure if a plugin is available, but of course you can add the same code yourself to the head region and then add the class jqzoom to any of your images.

Reply
avatar
February 03, 2010 10:38 AM delete

Nice JQuery effect man :) Try out more...

Reply
avatar
February 04, 2010 4:27 AM delete

great hack!
but in de code of the last script is missing the script end-tag

Reply
avatar
February 04, 2010 5:58 AM delete

Wow, I must bookmark this post for sure!

Reply
avatar
February 04, 2010 6:59 AM delete

@Vício

Thanks buddy, updated the post and added that missing line.

Reply
avatar
February 08, 2010 8:54 AM delete

superb hack...! or you can say trick

Reply
avatar
February 09, 2010 9:50 PM delete

Hi Divya,

How do you join these posts and comment together. Is there any tricks for that? I have a template disjointed post and comment. Ho to?

Reply
avatar
February 09, 2010 10:08 PM delete

One you also have combined post in your homepage. How To:-/

Reply
avatar
February 10, 2010 8:58 AM delete

Hey Anup,

To connect them, simply give a same background color to #main-wrapper and #comments in the template-CSS.

Reply
avatar
February 10, 2010 9:18 PM delete

Thanks Divya you are really a blogger helper ;)

Reply
avatar
February 10, 2010 9:23 PM delete

Great post,

Not sure were i would use it but it looks awesome !

Paul.

Reply
avatar
February 11, 2010 5:28 AM delete

nice,also you made a mistake after the code you said

In this demo,This is the larger image and this is the small thumbnail

But both of them are same links...

I was even tricked into thinking that it itself enlarges the image untill i checked ur demo's source and saw that you just posted the wrong link for the larger image link

Reply
avatar
February 11, 2010 5:37 AM delete

Thanks Ayush, I have corrected the link now.

Reply
avatar
February 11, 2010 7:14 AM delete

When I join these comments and post together, older posts, newer post, home links are not visible. What is that causes?

Reply
avatar
A
February 11, 2010 7:18 AM delete

Ufff...What to do?? I am tired of it...:(

Reply
avatar
February 11, 2010 7:42 AM delete

Anup, changing background colors, should not remove any other elements from the blog, are you sure you are getting the buttons back if you undo the changes?

Reply
avatar
February 11, 2010 11:13 AM delete

Yes thank you very much. I got it back, I don't know what's the problem...I will try it again. And inform you when it is solved! Thanks god I haved backuped my template and post befor with your post ;)

One thing, If someone lost in their blog...and after they will get it back, they will not have any more sorrow...;)

Reply
avatar
February 11, 2010 11:18 AM delete

Happy for you Anup :)
No matter what...Back up is a must for everyone !

Reply
avatar
April 29, 2010 7:50 AM delete

i love to see this new future....

Reply
avatar
June 05, 2010 7:34 AM delete

Hi, dear this is not working in my blog why??? juz take a look at my blog please... It would be so kind.
http://skilledbits.blogspot.com

Reply
avatar
July 12, 2010 1:36 AM delete

suggest more this type of blog.

Reply
avatar
July 25, 2010 8:09 PM delete

This is super cool!!!! Love it! Thanks :X

Reply
avatar
August 27, 2010 12:49 AM delete

Thanks for sharing ideas. It's very great and help me a lot!

Reply
avatar
October 18, 2010 10:44 PM delete

Hi! It's work great for our city map! You can look at the link. Thank You very much!

Reply
avatar
October 31, 2010 3:43 PM delete

how to zoom a photos like the one above exzoom.jpg ??

Reply
avatar
November 01, 2010 1:17 PM delete

hai sai,
this is a very nice hack..
but i've tried it so many time, but they still didn't work!
I don't know, maybe my browser fault or else, but in the demo of blogger blog above, it seems doesn't work at all for me..

Reply
avatar
November 01, 2010 1:22 PM delete

Well you need to have java enabled in your browsers. The demos are working fine.

Reply
avatar
November 02, 2010 5:15 AM delete

Ok sai..
i thought it is my browser fault because when i use Chrome it didn't work but it works in other browsers.

Reply
avatar
November 02, 2010 1:11 PM delete

good info . thank you for the post. i'm going to implement on my pic gallaries

Reply
avatar
February 01, 2011 12:27 PM delete

Has anyone tried the innerzoom feature? I am trying to use it but it doesn't work. I think I am going to have to tweak it in order for it to work.

Reply
avatar
May 13, 2011 9:02 PM delete

how to apply it to all images automatically without doing it manually to every single image that I want? Thanks! =)

Reply
avatar
July 07, 2011 1:43 PM delete

Wow, your Blog is fantastic... the tips is very helping me... Thanks...

Reply
avatar
Anonymous
September 13, 2011 8:01 AM delete

Why do you call it hack? This is regular jquery plugin. You didn't fix anything...

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon