jQZoom Version 2.0

New Features

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, //zooming div default width(default width value is 200) yzoom: 300, //zooming div default width(default height value is 200) offset: 40, //zooming div default offset(default offset value is 10) position: "right", //zooming div position(default position value is "right") preload: 1 // 1 by default }); });

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.