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">
  1. <href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">  
  2.     <img src="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)