jQZoom allows you to realize a small magnifier window close to the image or images on your web page easily.

I decided to build this jQuery plugin to embed detailed big images in my B2B.So now in few steps you can have your jQZoom in your website,eCommerce or whatever you want.Author: Ing. Renzi Marco ,December 2007

1)Simply include the jqzoom.css in your page.

<link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">

2)Include jQzoom and jQuery code

<script type="text/javascript" src="your_path/jquery.js"></script> <script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>

3)Now create a container(div is better!!) for the image or images you would like to zoom and assign to it the "jqzoom" class.Specify for each image,the jqimg attribute,to wich you are going to assign the big image path.

<div class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg"></div>

4)Load the plugin at window load

$(document).ready(function(){ $(".jqzoom").jqueryzoom(); });

You can also specify some options:

$(document).ready(function(){ $(".jqzoom").jqueryzoom({ xzoom: 300, //缩放div默认宽度(默认宽度为200) yzoom: 300, //缩放div默认高度(默认高度为200) offset: 10, //缩放div默认停靠偏移位置(默认停靠偏移位置10) position: "right", //显示默认位置(显示默认位置为 "right") preload:1, lens:1 }); });

5)Sit and wait for people to tell you that what you have done is really cool!!!!:-)

Demo

Now move the mouse over the images.