首页>前端教程>jQuery教程

带缩略图的产品放大镜jquery插件

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

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

zoom.jpg

效果演示

案例下载

链接: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图片预览放大镜插件

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


4
保存到:

相关文章

Top