图片预览缩放之PhotoSwiper

PhotoSwiper

导语：

PhotoSwiper插件功能可实现：多张图片预览、缩放、分享、下载。

一、使用步骤

1、引入头文件：photoswipe.css、default-skin.css、photoswipe.min.js、photoswipe-ui-default.min.js文件。
备注：头文件位置在PhotoSwiper online demo中dist文件夹

<link rel="stylesheet" href="lib/dist/photoswipe.css"><link rel="stylesheet" href="lib/dist/default-skin/default-skin.css"><script src="lib/dist/photoswipe.min.js"></script><script src="lib/dist/photoswipe-ui-default.min.js"></script>

2、DOM中添加容器，核心要添加.pswp类。

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"></div><div class="pswp__scroll-wrap">    <!--滑动容器类overflow默认是hidden，容器中是三个item，这部分是固定-->    <div class="pswp__container">        <div class="pswp__item"></div>        <div class="pswp__item"></div>        <div class="pswp__item"></div>    </div>    <!--滑动区域上方操作条：显示图片数量、放大、全屏、分享、关闭和左右查看按钮-->    <div class="pswp__ui pswp__ui--hidden">        <div class="pswp__top-bar">            <div class="pswp__counter"></div>            <!--关闭操作-->            <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>            <!--分享操作-->            <button class="pswp__button pswp__button--share" title="Share"></button>            <!--全屏操作-->            <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>            <!--放大缩小操作-->            <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>            <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->            <!-- 当容器加载时，元素类pswp__preloader--active-->            <div class="pswp__preloader">                <div class="pswp__preloader__icn">                    <div class="pswp__preloader__cut">                        <div class="pswp__preloader__donut"></div>                    </div>                </div>            </div>        </div>        <!--分享条操作-->        <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">            <div class="pswp__share-tooltip"></div>        </div>        <!--左滑操作-->        <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">        </button>        <!--右滑操作-->        <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">        </button>        <div class="pswp__caption">            <div class="pswp__caption__center"></div>        </div>    </div></div>

3.自定义DOM中需浏览的图片如下：（此部分根据需要自行更改）

 <img src="img/image1.jpg" alt="" class="imgStyle"/> <img src="img/image2.jpg" alt="" class="imgStyle"/>

4.JS部分，初始化容器，4个参数：pswpElement、PhotoSwipeUI_Default、imgItems、options

var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, imgItems, options);gallery.init();

• 参数1：pswpElement(DOM中类为.pswp的容器)

  var pswpElement = document.querySelectorAll('.pswp')[0];

• 参数2：PhotoSwipeUI_Default(此部分可自行修改，如果样式采用default-skin.css默认样式，参数2选PhotoSwipeUI_Default)

• 参数3：imgItems（需预览的图片信息包括src，宽，高）

  var imgItems = [{   src: 'https://placekitten.com/600/400',   w: 600,   h: 400},{   src: 'https://placekitten.com/1200/900',   w: 1200,   h: 900}];

• 参数4：options(容器常用操作设置)

  var options = {    history: false,    focus: false,    showAnimationDuration: 0,    hideAnimationDuration: 0,    index:this.index,//用于显示当前点击图片    fullscreenEl : false,//点击图片关闭需要保持此项为false    tapToClose: true,//点击图片关闭    };

4、自定义预览图片信息时，图片可为本地，可为网络图片。

获取DOM中所有图片，并为每张图片添加点击事件，打开容器。

var imgItems = new Array();window.onload = function(){    var imgs = document.getElementsByTagName("img");    var len = imgs.length;    for(var i = 0;i<len;i++){       imgs[i].index = i;//保存当前图片index用于打开插件时显示当前图片       imgs[i].onclick = openPhotoSwipe;//为每张图片添加点击后打开画廊插件事件       loadImage(i,imgs[i].src,call);//添加回调函数用于获取网络图片宽高    }};

• 获取图片的宽高，可直接用naturalWidth获取；
  
• 但是获取网络图片时，如果图片未加载出来时，它的宽高获取的是0，所以在获取网络图片高宽时，用img的onload事件异步加载,用callback回调函数形成闭包;
  

• 初始化数组imgItems时，一开始用的imgItems.push(imgItem);但是遇到的问题时，首次加载图片时顺序不对，分析原因是callback回调函数异步，图片加载时间不同，用时短的在最前面，所以做出优化，用index指定图片指定位置；

  function loadImage(i,url,callback) {   var img =new Image();   img.onload =function(){      img.onload =null;      callback(i,img);   };   img.src = url;}function call(i,img){    var imgItem = {src:img.src,w:img.width,h:img.height};//用imgItems保存图片路径,用.src和.naturalWidth获得图片原始路径和宽高    //imgItems.push(imgItem);//imgItems保存所有需浏览的图片信息，但这种添加的数据是无序    imgItems[i] = imgItem;//通过index指定给数组赋值}