jQuery放大镜插件jqzoom使用

源码下载，使用指导地址：http://www.mind-projects.it/projects/jqzoom/

使用教程：

　　1.导入库文件

<script src="../js/jquery-1.6.js" type="text/javascript"></script>
<script src="../js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">

　　2.指定HTML锚元素即<a>标签 ，以便这块区域可以生成扩大的图片。

<div class="clearfix">

<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">

<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE">

</a>

</div>

必须项：锚元素包含了你想要缩放的图片：

　　SMALLIMAGE.JPG：代表你想要缩放的小图片

　　BIGIMAGE.JPG：代表缩放后的大图片

　　MYCLASS：代表Anchor类，用来实例化与该类相匹配的jQZoom脚本

　　MYTITLE/IMAGE TITLE：Anchor标题或者图片标题可以用来显示与jQZoom窗口相近的缩放标题。

　　3.加载插件

$(document).ready(function(){

　　 $('.MYCLASS').jqzoom();

　　 });

4.自定义配置插件属性

$(document).ready(function(){
var options = {
zoomType: 'standard',
lens:true,
preloadImages: true,
alwaysOn:false,
zoomWidth: 300,
zoomHeight: 250,
xOffset:90,
yOffset:30,
position:'left'
//...MORE OPTIONS
};
$('.MYCLASS').jqzoom(options);
});

5.支持多个缩略图

　　如果你想创建库，jQzoom可以帮助你管理这个库。

　　@1.声明主要的anchor”rel”属性

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

　　@2.管理你的缩略图“class”和”rel”属性

<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: './imgProd/SMALLIMAGE1.jpg',largeimage: './imgProd/LARGEIMAGE1.jpg'}">
<img src="imgProd/thumbs/THUMBIMG1.jpg">
</a>

jQzoom可以将"zoomThumbActive"添加至缩略图中。默认情况下将这个类指定给被选中的缩略图中。

　　缩略图架构中rel属性非常重要，基本属性如下：

　　　　gallery: 所属 gallery ID

　　　　smallimage: 点击缩略图时执行SMALLIMAG的路径

　　　　largeimage: 指向LARGEIMAG的路径

rel="{gallery: 'gal1', smallimage: './imgProd/SMALLIMAGE1.jpg',largeimage: './imgProd/LARGEIMAGE1.jpg'}"

配置详解：
　　zoomType，默认值：standard
　　　　　　　　　　　　 standard，选中区用半透明图层遮盖遮罩
　　　　　　　　　　　　 reverse， 原图用半透明图层遮盖。
　　　　　　　　　　　　 innerzoom，在小图的区域内显示放大的效果
　　　　　　　　　　　　 drag　　　　可拖拽显示放大效果
　　zoomWidth， 默认值：200，放大窗口的宽度
　　zoomHeight，默认值：200，放大窗口的高度
　　xOffset，　　 默认值：10，放大窗口相对于原图的x轴偏移值
　　yOffset，　　 默认值：0，放大窗口相对于原图的y轴偏移值
　　alwaysOn,　　默认值：false 放大镜是否总是显示存在 'true'一直显示 false 只有移动鼠标时显示
　　position，　　默认值：’right’，放大窗口的位置，值还可以是:’right’ ,’left’ ,’top’ ,’bottom’
　　lens，　　　　默认值：true，若为false，则不在原图上显示镜头
　　imageOpacity，默认值：0.2，当zoomType的值为’reverse’时，这个参数用于指定遮罩的透明度(值越小，透明度越差)
　　title， 默认值：true，在放大窗口中显示标题，值可以为a标记的title值，若无，则为原图的title值
　　preloadImages, 默认值true, 预先加载大图片

　　showEffect，默认值：’show’，显示放大窗口时的效果，值可以为: ‘show’ ,’fadein’
　　hideEffect， 默认值：’hide’，隐藏放大窗口时的效果: ‘hide’ ,’fadeout’ (这两个没有调试)
　　fadeinSpeed，默认值：’fast’，放大窗口的渐显速度(选项: ‘fast’,'slow’,'medium’)
　　fadeoutSpeed，默认值：’slow’，放大窗口的渐隐速度(选项: ‘fast’,'slow’,'medium’)
　　showPreload，默认值：true，是否显示加载提示Loading zoom(选项: ‘true’,'false’)
　　preloadText，默认值：’Loading zoom’，自定义加载提示文本
　　preloadPosition，默认值：’center’，加载提示的位置，值也可以为’bycss’，以通过css指定位置

插件源码下载地址：http://pan.baidu.com/s/1mg2xFZE