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.
Download Script 
Live DemoAuthor
Arun Kumar Sekar
Engineer, Plugin Expert
Chennai, INDIA
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>
<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"
}
});
{
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
}
});
{
onMouseOver : function(currentImage){
// do something
},
onMouseOut : function(currentImage){
// do something
}
});
Very nice! Thanks!
Good. Nice work Arun.
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;
}
but how are you showing this plugin on facebook page.
Nice But need to resize images according to screen size without browser scrollbar.As now bigger images not visble full lenght.
If the image is too big, will inevitably occupy the whole screen and it will become impossible to see it all.
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.
Nice man , excellent ajout
it doesn't use thumbnails? bandwidth hog... slow load time... no good
Move the mouse between two images and it will blink.
sweet...
Cool plugin. Thanks Arun.
useful thanks. it is good looking gallery tutorial :) i will try.
very nice but bottom image should visible on top of cursor
Very Nice Post.
this is telepathy, I tried just a script like this.
Thanks Arun,
Very Easy! Do you have a non-.min version avaiable?
Regards
Ian (Southampton UK)
It allows you to perspective larger pictures on mouse over factor, this is very useful for press appropriate web programs.
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...
Good Work
jQuery PhotoZoom plug-in, it allows you to viewpoint larger pictures on mouse over aspect, this is very useful for press appropriate web programs.
Thanks
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.
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.
Hey Guys, thanks for your comments i appreciate.Take a try with latest copy from Github. It's upgraded.. Keep watching 9lessons.
can I use it in wordpress? as a plug in or something like this... how to add this plug in in wp blog?
great job..!!!
thanks for this script.
thanks for sharing dude, easy tutorial
nice
This is very useful for media related web applications. You can customize the PhotoZoom container based on your web page design.
nice
This post is very useful for media related web applications.Thank's For sharing, this article is very useful for me.
Such a cool and complete post. Very nice post !
Regards,
Selvakumar,
5funs
hi,
its really great explainations of the plugin.
thanks again,
hiren patel
renruhak.org
nice blog...will use this thing in my upcoming blog...thanks to the authors..
great
How to use this on my Blogger blog?
Nice explantion photo zoom plug-in
NICE
thanks for this script.
Nice Dude!
nice
That is very helpful for me thanks. I'm always looking forward to your works. You are great...
Hi !!
How Can I decide the size of zoomed photo ?
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.
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.