图片显示--放大镜效果(JQuery)

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: 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 assign the "jqzoom" class to the image or images you would like to zoom,and specify for each one,the alt attribute,to wich you are going to assign the big image path.

<img src="your_path/imagename_small.jpg" class="jqzoom"  alt="your_path/imagename_big.jpg">

4)Load the plugin at window load

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

 You can also specify some options:

jQuery(document).ready(function(){
			      $("img.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")
					});
				});

 

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

DEMO演示：http://bbs.okajax.com/demo/17/

 

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

评论

3 楼 wlhok 2008-05-25  

很好很强大！
收藏。

2 楼 icefire 2008-05-23  

是不错
不过不知道能不能不用alt="your_path/imagename_big.jpg来放地址，改成别的形式。

1 楼 winebibber 2008-05-23  

不错，挺好的一个plugin。