9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Tuesday, December 4, 2012

Jquery Photo Zoom Plugin

Introducing a new jQuery PhotoZoom plugin, it helps you to view bigger images on mouse over component, this is very useful for media related web applications. You can customize the PhotoZoom container based on your web page design. Very easy to implement just include the plugin using script tag and give required selector, take a look this live demo.
Jquery Photo Zoom Plugin


Download Script
     Live Demo

Author
Arun Kumar Sekar
Arun Kumar Sekar

Engineer, Plugin Expert
Chennai, INDIA

The Basic Setup
Include the jQuery and PhotoZoom plugin libraries into your document using script tag.
<script src="jquery.js"></script>
<script  src="photoZoom.min.js"> </script>
<script>
$(document).ready(function()
{
$('body').photoZoom();
});
</script>
//HTML Code
<body>
<img src='one.jpg'/>
<img src='two.jpg'/>
......
......
</body>

You can customize container design by modifying CSS elements.
$("body").photoZoom(
{
zoomStyle : {
"border":"1px solid #ccc",
"background-color":"#fff",
"box-shadow":"0 0 5px #888"
}
});

Here you can reuse onMouseOver and onMouseOut events.
$("body").photoZoom(
{
onMouseOver : function(currentImage){
// do something
},
onMouseOut : function(currentImage){
// do something
}
});
Comments
{ 55 comments }
Alexander said...

Very nice! Thanks!

Motyar said...

Good. Nice work Arun.

Motyar said...

One more thing. There is a jump on page when you hover on image.
You can fix it by adding this style

html {
overflow-y: scroll;
}

Manish said...

but how are you showing this plugin on facebook page.

kiran said...

Nice But need to resize images according to screen size without browser scrollbar.As now bigger images not visble full lenght.

Renato said...

If the image is too big, will inevitably occupy the whole screen and it will become impossible to see it all.

Vipul said...

What a plugin. I use in Facebook but i lost in the instilling of windows. Thanks arun for posting it again online. Photo zoom is best and it saves time when surfing Facebook.

Anonymous said...

Nice man , excellent ajout

Unknown said...

it doesn't use thumbnails? bandwidth hog... slow load time... no good

RatkoWitch CeLkA said...

Move the mouse between two images and it will blink.

George Gurrola said...

sweet...

João Roberto Pinto Ribeiro said...

Cool plugin. Thanks Arun.

Mahesh Verma said...

useful thanks. it is good looking gallery tutorial :) i will try.

Anonymous said...

very nice but bottom image should visible on top of cursor

Zinal said...

Very Nice Post.

Tullio said...

this is telepathy, I tried just a script like this.

Ian said...

Thanks Arun,

Very Easy! Do you have a non-.min version avaiable?

Regards

Ian (Southampton UK)

Len Pearson said...

It allows you to perspective larger pictures on mouse over factor, this is very useful for press appropriate web programs.

Maulik Kanani said...

boss where is "http://www.9lessons.info/2011/02/facebook-comments-plugin-for-wordpress-and-blogger/" this link?

Demo for facebook comment social plugin for wordpress...

Anup said...

Good Work

Baker Mcmillan said...

jQuery PhotoZoom plug-in, it allows you to viewpoint larger pictures on mouse over aspect, this is very useful for press appropriate web programs.

Ram Punit said...

Thanks

Claudiu said...

Great plugin.

but you should do something when the image is to big.

Ideally, the image shouldn't disappear if the pointer is over it.

Ashik Basheer said...

Nice post buddy.. Can you write a tutorial on how to add a comment system as in your site? Will be very useful for many bloggers.

Thank you.

Arun said...

Hey Guys, thanks for your comments i appreciate.Take a try with latest copy from Github. It's upgraded.. Keep watching 9lessons.

Jit Dutta said...

can I use it in wordpress? as a plug in or something like this... how to add this plug in in wp blog?

Deepak said...

great job..!!!
thanks for this script.

ravi said...

thanks for sharing dude, easy tutorial

Anonymous said...

nice

Slade Washington said...

This is very useful for media related web applications. You can customize the PhotoZoom container based on your web page design.

Anonymous said...

nice

Vijendra Dhanotiya said...

This post is very useful for media related web applications.Thank's For sharing, this article is very useful for me.

hiren patel said...

hi,
its really great explainations of the plugin.

thanks again,
hiren patel
renruhak.org

Apoorv said...

nice blog...will use this thing in my upcoming blog...thanks to the authors..

MΛᄃZZIПGΣЯ said...

great

Sudip Majhi said...

How to use this on my Blogger blog?

SYED ali said...

Nice explantion photo zoom plug-in

NICE...ARUN...GREAT POSR said...

NICE
thanks for this script.

Anonymous said...

Nice Dude!

Anonymous said...

nice

konteynerler said...

That is very helpful for me thanks. I'm always looking forward to your works. You are great...

manish sharma said...

Hi !!

How Can I decide the size of zoomed photo ?

jaydeepsinh jadeja said...

Nice,
working fine but when i use this in table format then last two row's image can't zooming can you say why this happen.i use this in .aspx page.

prefabrik said...

Great work. i've been loooking forward that blog and for my development everything was so helpful and educational.
At that works demo i liked the photos very mch. Thanks for that work.

Congratulations.

Jyothi Jv said...

Thank You very much:) Nice Explaination...

Anton Vodonosov said...

Doesn't work with jquery 1.9, because the .live method is removed (http://api.jquery.com/live/). Could you please change it to use jquery .on method instead, as recommended by jquery docs?

Otherwise a good tool, thanks for sharing.

Saurabh said...

Nice stuff. will definately use this in my next project.. (y)

Anonymous said...

good script

Ziza Aziz said...

you are the best of the best best of the bestest

Ziza Aziz said...

you are the best of the best of the bestest

Index Apk said...

the best pluggin...
thank you boss

Mr Frank said...

very nice bro

dizi fragman izle said...

thanks. good post admin

fragman izle said...

its very nice and amazing projected.

Apk Baru said...

I will put this code on my blog... thank you bro

Post a Comment