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!
ReplyDeleteGood. Nice work Arun.
ReplyDeleteOne more thing. There is a jump on page when you hover on image.
ReplyDeleteYou can fix it by adding this style
html {
overflow-y: scroll;
}
but how are you showing this plugin on facebook page.
ReplyDeleteNice But need to resize images according to screen size without browser scrollbar.As now bigger images not visble full lenght.
ReplyDeleteIf the image is too big, will inevitably occupy the whole screen and it will become impossible to see it all.
ReplyDeleteWhat 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.
ReplyDeleteNice man , excellent ajout
ReplyDeleteit doesn't use thumbnails? bandwidth hog... slow load time... no good
ReplyDeleteMove the mouse between two images and it will blink.
ReplyDeletesweet...
ReplyDeleteCool plugin. Thanks Arun.
ReplyDeleteuseful thanks. it is good looking gallery tutorial :) i will try.
ReplyDeletevery nice but bottom image should visible on top of cursor
ReplyDeleteVery Nice Post.
ReplyDeletethis is telepathy, I tried just a script like this.
ReplyDeleteThanks Arun,
ReplyDeleteVery 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.
ReplyDeleteboss where is "http://www.9lessons.info/2011/02/facebook-comments-plugin-for-wordpress-and-blogger/" this link?
ReplyDeleteDemo for facebook comment social plugin for wordpress...
Good Work
ReplyDeletejQuery PhotoZoom plug-in, it allows you to viewpoint larger pictures on mouse over aspect, this is very useful for press appropriate web programs.
ReplyDeleteThanks
ReplyDeleteGreat plugin.
ReplyDeletebut 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.
ReplyDeleteThank you.
Hey Guys, thanks for your comments i appreciate.Take a try with latest copy from Github. It's upgraded.. Keep watching 9lessons.
ReplyDeletecan I use it in wordpress? as a plug in or something like this... how to add this plug in in wp blog?
ReplyDeletegreat job..!!!
ReplyDeletethanks for this script.
thanks for sharing dude, easy tutorial
ReplyDeletenice
ReplyDeleteThis is very useful for media related web applications. You can customize the PhotoZoom container based on your web page design.
ReplyDeletenice
ReplyDeleteThis post is very useful for media related web applications.Thank's For sharing, this article is very useful for me.
ReplyDeletehi,
ReplyDeleteits 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..
ReplyDeleteHow to use this on my Blogger blog?
ReplyDeleteNice explantion photo zoom plug-in
ReplyDeleteNICE
ReplyDeletethanks for this script.
Nice Dude!
ReplyDeletenice
ReplyDeleteThat is very helpful for me thanks. I'm always looking forward to your works. You are great...
ReplyDeleteHi !!
ReplyDeleteHow Can I decide the size of zoomed photo ?
Nice,
ReplyDeleteworking 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.
ReplyDeleteAt that works demo i liked the photos very mch. Thanks for that work.
Congratulations.
Thank You very much:) Nice Explaination...
ReplyDeleteDoesn'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?
ReplyDeleteOtherwise a good tool, thanks for sharing.
Nice stuff. will definately use this in my next project.. (y)
ReplyDeletegood script
ReplyDeleteyou are the best of the best best of the bestest
ReplyDeleteyou are the best of the best of the bestest
ReplyDeletethe best pluggin...
ReplyDeletethank you boss
very nice bro
ReplyDeletethanks. good post admin
ReplyDeleteits very nice and amazing projected.
ReplyDeleteI will put this code on my blog... thank you bro
ReplyDeletehttp://console/index.html#page1
ReplyDeletehttp://console/index.html#page2
i want to maintain state for this pages ..Can you help me?
thanks in advance...
Nice work, it has been very useful.
ReplyDeleteThanks from Spain
That is what i need, Thanks
ReplyDeletethanks u very much .am looking for this plugin.
ReplyDeleteusefull stuff.thanks.
ReplyDeleteGood script.
ReplyDeleteNice work, it has been very useful. Thank
ReplyDeleteNice Plugin but have an big issue, when adding too many images on page. All the images appearing in first view working properly, but after scroll the last row image or first view not zooming properly. :(
ReplyDeleteverry nice article bro, good job
ReplyDeletei have implemented this script on my blog,, and work 100%
ReplyDelete