jQuery插件:图片放大镜--jQuery Zoom

本文转载于http://blog.csdn.net/xinhaozheng/article/details/4085644，

这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,magento电子商场之类的开源项目上.如果想看它的效果,你可以直接访问:

 

http://www.mind-projects.it/projects/jqzoom/demos.php

 

 

觉得不错就下载一个玩玩吧,jQuery出来的插件都是非常容易使用的,也可以当做学习的示例.

 

如何安装:

 

 

先在网页中包含jQuery文件,然后再包含jQZoom的文件,如下:

<script type='text/javascript' src='js/jquery-1.2.6.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>

然后再将jqzoom.css添加到网页中:

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

如何使用?

Using jQZoom is easy,but you need to specify the HTML anchor element,that is going to generate the zoom revealing a portion of the enlarged image. 

使用是很简单的,先指定一个<a>标签,指向一个大的图片,里面包含一个小图片:

<a href="images/BIGIMAGE.JPG" class="MYCLASS"  title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"  >
</a>

 

SMALLIMAGE.JPG:这个是默认用户看见的图片,也就是之后被放大的图片

BIGIMAGE.JPG: 放大镜所看到的图片
MYCLASS: Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class(you can use an ID as well).用来标识这个<a>标签要应用放大镜功能.之后我们可以通过class选择器来选择所有的要应用jQZoom的<a>标签.

MYTITLE/IMAGE TITLE: 这些文本它们会被显示在放大镜窗口上.

 

准备工作做完了就可以通过下面的简单代码来调用jQZoom:

$(document).ready(function(){
	$('.MYCLASS).jqzoom();
});

这样只是使用jQZoom的标签模式,事实上它有更多的参数可以设置,以获得更多的效果,看下面的示例:

$(document).ready(function(){
	var options = {
	    zoomWidth: 300,
	    zoomHeight: 250,
            xOffset: 10,
            yOffset: 0,
            position: "right" //and MORE OPTIONS
};
	$('.MYCLASS).jqzoom(options);
});