站在巨人们的肩膀上

顾名思义，这是一个slick+zoom+hammer的gallery插件，因为在网上找不到现成满足主管需求的插件，于是花了蛮久时间去研究了这三个插件，然后组合到了一起。
当然现在只是初步捆绑起来，性能上还有很多的问题，比如移动端上的流畅度、手势处理hammer的优化，等待时间的加载动画、gif问题等，这些就留给以后有时间慢慢去优化吧。

先贴效果图吧(图片暂时不会排版)：
Alt pc端
mobile

现在就来介绍这个组合插件，一个个来介绍吧。

slick

这个插件很不错，基本上做到了作者所声称的

the last carousel you’ll ever need

功能非常丰富，体积也不大，在50k以内，该项目的github地址上已经把详细的教程都写在上面。这里就贴下我项目中用到的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$(document).on('ready', function() {
      $(".slick-regular").slick({
        infinite: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        swipe: true,
        prevArrow: false,
        nextArrow: false,
        dots: true,
        asNavFor: ".slick-thumbnail", //关联别的slick
         responsive: [{

            breakpoint: 1024,
            settings: {
              slidesToShow: 1,
            }

          }, {
            breakpoint: 600,
            settings: {
              slidesToShow: 1,
              dots: true,
              fade: false
            }

          }, {
            breakpoint: 300,
            settings: "unslick" // destroys slick
        }]

      });
      $(".slick-thumbnail").slick({
        infinite: false,
        slidesToShow: 4,
        slidesToScroll: 1,
        verticalSwiping: true,
        vertical: true,
        asNavFor: ".slick-regular",//和上面的对应
      });

具体的用法还可以到官网查询。

Zoom

这是我无意间发现的还不错的图片弹出放大插件，功能简单粗暴，js源码也比较易懂，后期可以借鉴其中的思路自己写一套适合自己用的插件。用法我直接上html了：

1
2
3
4
5
6
<div class="gallery">
	<div><a href="img/1.jpg"><img src="img/1.jpg"></a></div>
	<div><a href="img/2.jpg"> <img src="img/2.jpg"></a></div>
	<div><a href="img/3.jpg"><img src="img/3.jpg"></a></div>
	<div><a href="img/4.jpg"><img src="img/4.jpg"></a></div>
</div>

需要注意的是gallery这个class是必须的，当然你也可以在zoom.js中改写。唯一有点麻烦的就是<img>之前需要用<a></a>包裹一遍。

hammer

这个插件就厉害了，移动端的全手势库。我也是靠这个功能在移动端实现放大缩小图片的。但是hammer的教程挺难懂的，可以说写得略随意了。
建议需要对着官网的demo撸一遍。
我在这个项目中用到的方法也是从官网的某个demo中抄袭过来，然后改写了一下。

在这里再次感谢：slick、Zoom、hammer

最后贴上项目地址：