首页 > 代码库 > jQuery放大镜插件jqzoom使用

jQuery放大镜插件jqzoom使用

2024-07-31 22:48:20   222人阅读

源码下载，使用指导地址：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">
  1. <a href=http://www.mamicode.com/"images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">  
  2.     <img src=http://www.mamicode.com/"images/SMALLIMAGE.JPG" title="IMAGE TITLE">  
  3. </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
 

jQuery放大镜插件jqzoom使用


联系
我们