Learning jQuery

Well one of the popular post of my blog is "How to Zoom image on mouseover using jQuery", which shows how to zoom an image using jQuery. But today, I found a image zoom jQuery plugin which does the same thing but in a different way. You can download this plugin from here.

Things to note here is that this the plugin "Zoom" appends html inside the element it is assigned to, so that element has to be able to accept html like a, span, li, div, etc. That means your image tag must be placed inside any of these tags like a, span, li, div to make this plugin work. After that is done, just call the zoom() function on the parent element, not on the image element. For example, I have placed the image tag inside the span tag.

<span class='zoom' id='ex'>
<img src='flowers.jpg' width='500' height='300' />
</span>

Now, the zoom() function should be associated with span element, not with image. See below.

$(document).ready(function(){
   $('#ex').zoom();
});

This plugin by default supports the zoom on mouse over but there is another option available with this plugin. You can also zoom the image by pressing the mouse and holding it. This option is called "Grab" in this plugin. See below code.

$(document).ready(function(){
  $('#ex2').zoom({ grab: true });
});

Feel free to contact me for any help related to jQuery, I will gladly help you.

This plugin is developed by "Jack Moore". You can visit his website here. Visit official website for this plugin.