Jquery Photo Zoom Plugin
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
}
});

68 comments:

  1. 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;
    }

    ReplyDelete
  2. but how are you showing this plugin on facebook page.

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

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

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

    ReplyDelete
  6. Nice man , excellent ajout

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

    ReplyDelete
  8. Move the mouse between two images and it will blink.

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

    ReplyDelete
  10. very nice but bottom image should visible on top of cursor

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

    ReplyDelete
  12. Thanks Arun,

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

    Regards

    Ian (Southampton UK)

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

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

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

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

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

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

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

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

    ReplyDelete
  21. thanks for sharing dude, easy tutorial

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

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

    ReplyDelete
  24. hi,
    its really great explainations of the plugin.

    thanks again,
    hiren patel
    renruhak.org

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

    ReplyDelete
  26. How to use this on my Blogger blog?

    ReplyDelete
  27. Nice explantion photo zoom plug-in

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

    ReplyDelete
  29. Hi !!

    How Can I decide the size of zoomed photo ?

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

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

    ReplyDelete
  32. Thank You very much:) Nice Explaination...

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

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

    ReplyDelete
  35. you are the best of the best best of the bestest

    ReplyDelete
  36. you are the best of the best of the bestest

    ReplyDelete
  37. the best pluggin...
    thank you boss

    ReplyDelete
  38. its very nice and amazing projected.

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

    ReplyDelete
  40. http://console/index.html#page1
    http://console/index.html#page2
    i want to maintain state for this pages ..Can you help me?
    thanks in advance...

    ReplyDelete
  41. Nice work, it has been very useful.

    Thanks from Spain

    ReplyDelete
  42. thanks u very much .am looking for this plugin.

    ReplyDelete
  43. Nice work, it has been very useful. Thank

    ReplyDelete
  44. Nice 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. :(

    ReplyDelete
  45. i have implemented this script on my blog,, and work 100%

    ReplyDelete
  46. Really a great plugin
    Wish more like that

    ReplyDelete
  47. thanks u very much .am looking for this plugin

    ReplyDelete