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

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=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使用