有学生要仿电商网站，需要一个带缩略图的产品放大镜的插件，我觉得这个还不错，推荐给大家。

这个插件有好几种效果，但是在初始化插件的时候，把几种效果的初始化放在一个js文件里面了，所以我专门做了一个案例，提取了一个效果，可供大家参考。

效果演示

案例下载

链接：https://pan.baidu.com/s/1nwx210P 密码：doey

一、引入外部文件

必须要的三个文件是：

<link rel="stylesheet" href="css/xzoom.css">

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

<script type="text/javascript" src="js/xzoom.js"></script>

如果需要点击大图看到灯箱效果，可以用fancybox或者magnific-popup效果，那么就需要根据自己的需求引入不同的文件，这个案例用的是magnific-popup效果，所以再额外引入了这两个文件。

<link rel="stylesheet" href="css/magnific-popup.css">

<script type="text/javascript" src="js/magnific-popup.js"></script>    

二、添加HTML代码

<div class="large-5 column">
  <div class="xzoom-container"> 
      <img class="xzoom5" id="xzoom-magnific" src="images/gallery/preview/1.jpg" xoriginal="images/gallery/original/1.jpg" />
      <div class="xzoom-thumbs"> 
          <a href="images/gallery/original/1.jpg"><img class="xzoom-gallery5" width="80" src="images/gallery/thumbs/1.jpg"  xpreview="images/gallery/preview/1.jpg" title="悦诗风吟"></a> 
          <a href="images/gallery/original/2.jpg"><img class="xzoom-gallery5" width="80" src="images/gallery/preview/2.jpg" title="悦诗风吟"></a> 
          <a href="images/gallery/original/3.jpg"><img class="xzoom-gallery5" width="80" src="images/gallery/preview/3.jpg" title="悦诗风吟"></a> 
          <a href="images/gallery/original/4.jpg"><img class="xzoom-gallery5" width="80" src="images/gallery/preview/4.jpg" title="悦诗风吟"></a> 
      </div>
  </div>
</div>

html结构很简单，准备好缩略图，阅览图，高清图就可以了。

三、初始化插件

如果不需要灯箱效果，直接简单初始化就可以了。

 $('.xzoom5, .xzoom-gallery5').xzoom({
	 tint: '#ccc', 
	 Xoffset: 15,
	 //scroll:false,
	 tintOpacity:0,
	 lens:'#000',
	 lensOpacity:0.2,
	 hover:true  //改变经过缩略图的事件
	 //title:true
	
	 });

有很多的参数可以设置，比如默认的鼠标点击缩略图，可以改成鼠标经过缩略图等等。

如果需要灯箱效果，则还需要加上灯箱效果的初始化。

$('#xzoom-magnific').bind('click', function(event) {
                var xzoom = $(this).data('xzoom');
                xzoom.closezoom();
                var gallery = xzoom.gallery().cgallery;
                var i, images = new Array();
                for (i in gallery) {
                    images[i] = {src: gallery[i]};
                }
                $.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}});
                event.preventDefault();
            });

原始插件来自于htmlleaf：多功能jquery图片预览放大镜插件

有更详细的帮助文档可以查看。