安装
先添加最新发布的jQuery，再添加jQZoom脚本，记住顺序，参考以下代码
01.<script type='text/javascript' src='js/jquery-1.5.xx.js'></script>
02.<script type='text/javascript' src='js/jquery.jqzoom-core.js'></script>
02.<script type='text/javascript' src='js/jquery.jqzoom-core.js'></script>
在文件头添加jqzoom.css
<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">
如何使用jQZoom
jQZoom的使用非常简单，但是你需要指定HTML锚元素 ，以便这块区域可以生成扩大的图片。
01.<a class="MYCLASS" title="MYTITLE" href="images/BIGIMAGE.JPG">
02. <img title="IMAGE TITLE" src="images/SMALLIMAGE.JPG">
03.</a>
02. <img title="IMAGE TITLE" src="images/SMALLIMAGE.JPG">
03.</a>
锚元素包含了你想要缩放的图片：
- SMALLIMAGE.JPG：代表你想要缩放的小图片
- BIGIMAGE.JPG：代表缩放后的大图片
- MYCLASS：代表Anchor类，用来实例化与该类相匹配的jQZoom脚本
- MYTITLE/IMAGE TITLE：Anchor标题或者图片标题可以用来显示与jQZoom窗口相近的缩放标题。
加载插件
1. $(document).ready(function(){
2. $('.MYCLASS').jqzoom();
3. });
2. $('.MYCLASS').jqzoom();
3. });
这将实例化默认的jQzoom模式。你可以设置更多的选项来创建用户自定义的效果。具体实例如图所示。
1. $(document).ready(function(){
2. var options = {
3. zoomType: 'standard',
4. lens:true,
5. preloadImages: true,
6. alwaysOn:false,
7. zoomWidth: 300,
8. zoomHeight: 250,
9. xOffset:90,
10. yOffset:30,
11. position:'left'
12. //...MORE OPTIONS
13. };
14. $('.MYCLASS').jqzoom(options);
15. });
2. var options = {
3. zoomType: 'standard',
4. lens:true,
5. preloadImages: true,
6. alwaysOn:false,
7. zoomWidth: 300,
8. zoomHeight: 250,
9. xOffset:90,
10. yOffset:30,
11. position:'left'
12. //...MORE OPTIONS
13. };
14. $('.MYCLASS').jqzoom(options);
15. });
支持多个缩略图
如果你想创建库，jQzoom可以帮助你管理这个库。
1.声明主要的anchor”rel”属性
01.<a class="MYCLASS" title="MYTITLE" href="images/BIGIMAGE.JPG" rel="gal1">
02. <img title="IMAGE TITLE" src="images/SMALLIMAGE.JPG">
03.</a>
02. <img title="IMAGE TITLE" src="images/SMALLIMAGE.JPG">
03.</a>
2.管理你的缩略图“class”和”rel”属性
01.<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: './imgProd/SMALLIMAGE1.jpg',largeimage: './imgProd/LARGEIMAGE1.jpg'}">
02. <img src="imgProd/thumbs/THUMBIMG1.jpg">
03.</a>
02. <img src="imgProd/thumbs/THUMBIMG1.jpg">
03.</a>
jQzoom可以将"zoomThumbActive"添加至缩略图中。默认情况下将这个类指定给被选中的缩略图中。
缩略图架构中rel属性非常重要，基本属性如下：
gallery: 所属 gallery ID
smallimage: 点击缩略图时执行SMALLIMAG的路径
largeimage: 指向LARGEIMAG的路径
rel="{gallery: 'gal1', smallimage: './imgProd/SMALLIMAGE1.jpg',largeimage: './imgProd/LARGEIMAGE1.jpg'}"
具体配置信息：见图
▲
