源码下载,使用指导地址: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">
</div>
必须项:锚元素包含了你想要缩放的图片:
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的路径