jQuery放大镜插件jqzoom使用
浏览数：30 /
时间：2015年06月09日
源码下载，使用指导地址：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
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
