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