February 2, 2010

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.





41 comments:

Beben said...

cool...:)

TheShadow said...

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

sudharsan @ technoskillonline said...

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

uFuk said...

nice

Sai @ Blogger Widgets said...

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

Anup@ Hack Tutors said...

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

Jaka Utama said...

nice b-(
Unic Article

Vício said...

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

Reza Winandar said...

Wow, I must bookmark this post for sure!

Sai @ Blogger Widgets said...

@Vício

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

Kashif Arif said...

superb hack...! or you can say trick

Anup @ Hack Tutors said...

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?

Anup @ Hack Tutors said...

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

Sai - Blogger Help said...

Hey Anup,

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

Anup @ Hack Tutors said...

Thanks Divya you are really a blogger helper ;)

Paul Crowe said...

Great post,

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

Paul.

aayush said...

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

Sai @ BloggerStop.Net said...

Thanks Ayush, I have corrected the link now.

Anup@ Hack Tutors said...

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

A said...

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

Divya Sai said...

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?

Anup @ Hack Tutors said...

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

Divya Sai said...

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

scandals said...

i love to see this new future....

M. Naveed Baig Jokhio said...

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

சசிகுமார் said...

:))

Ravi said...

suggest more this type of blog.

Zaffi Zuhri said...

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

Divya Sai said...

Glad you liked it :)

MK Myth said...

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

Neftekamsk said...

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

Technologue said...

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

cEro said...

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

Sai - Blogger Widgets said...

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

cEro said...

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

vicky said...

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

Felipe said...

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.

crowjagarichu said...

:)

Ahmad Nuzul said...

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

HeDoDi said...

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

Anonymous said...

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

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy