jq封装PhotoSwipe的使用方法

官方网站：http://photoswipe.com/
源码下载：https://github.com/dimsemenov/photoswipe
国内CDN：http://www.bootcdn.cn/photoswipe/

引入相关文件

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

（如果开发中需要调试就不要用压缩版）

必要的启动代码

<!-- Root element of PhotoSwipe. Must have class pswp. -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <!-- Background of PhotoSwipe. It's a separate element as animating opacity is faster than rgba(). -->
        <div class="pswp__bg"></div> <!-- Slides wrapper with overflow:hidden. -->
        <div class="pswp__scroll-wrap">
            <!-- Container that holds slides. PhotoSwipe keeps only 3 of them in the DOM to save memory. Don't modify these 3 pswp__item elements, data is added later on. -->
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div> <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar">
                    <!-- Controls are self-explanatory. Order can be changed. -->
                    <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 -->
                    <!-- element will get class pswp__preloader--active when preloader is running -->
                    <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>
    </div>

这段代码可以在任何地方附加,但最好在body标签关闭之前。
我单独写在了一个html中PhotoSwipeStart.html，然后在主页面中用js引入：

$(function () {
    photoSp();
})
function photoSp() {
    $('.photoswipe').load('PhotoSwipeStart.html');
}

注意： pswp__bg, pswp__scroll-wrap, pswp__container 和 pswp__item elements 的顺序不能变。

创建PhotoSwipe对象

执行PhotoSwipe构造函数，它包含4个参数

1. $el： 就是上面html代码的.pswp元素
2. PhotoSwipe UI 类名：如果使用的是photoswipe-ui-default.js，那么这个参数就是“PhotoSwipeUI_Default”
3. 需要滑动的数组（这个需要自己按一定的规则构建）
4. Options：配置项

(function () {
    function Init(params) {
        //图片从第index张开始预览
        this.index = params.index;
        //需要滑动的数组
        this.list = params.list;
        //配置项（就这样了，我一般不会修改就写在里面了，如果需要修改再拿出去）
        this.options = {
            captionEl: false,
            fullscreenEl: true,
            history: false,
            shareEl: false,
            tapToClose: true,
            bgOpacity: 0.7
        };
        //photoswipe对象
        this.photoswipe = null;
        this.el = document.getElementsByClassName('pswp')[0];
        this.open();
    }
    Init.prototype.open = function () {
        this.options.index = this.index;
        this.options.getThumbBoundsFn = function (index) {
            // find thumbnail element
            var thumbnail = list[index].target
            // get window scroll Y
            var pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            // optionally get horizontal scroll
            // get position of element relative to viewport
            var rect = thumbnail.getBoundingClientRect()
            // w = width
            return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }
        }
        var width = window.innerWidth
        var height = window.innerHeight
        this.list.forEach(function(item) {
            var ratio = item.w / item.h
            if (width > height) {
                item.w = height * ratio
                item.h = height
            } else {
                item.h = width / ratio
                item.w = width
            }
        })
        this.close();
        this.photoswipe = new PhotoSwipe(this.el, PhotoSwipeUI_Default, this.list, this.options);
        this.photoswipe.init();
    }
    Init.prototype.close = function() {
        if(this.photoswipe) {
            this.photoswipe.close();
        }
    }

    $.extend({
        photoOpen: function (params) {
            new Init(params);
        }
    })
}($))

下面是list如何构建

$('.box').on('click', '.img-container', function (e) {
                e.stopPropagation();
                var index = e.currentTarget.dataset.index;
                var picture = productionList[index].U_Picture;
                var pictureArr = picture ? picture.split('$') : ['/img/timg.jpg'];
                var len = pictureArr.length;
                if (len > 1) {
                    pictureArr.splice(len - 1, 1);
                }
                var img = document.getElementsByTagName('img')[index];
                var list = [];
                pictureArr.forEach(function (item, index) {
                    var pictureObj = {};
                    pictureObj.src = item;
                    pictureObj.w = img.width,
                    pictureObj.h = img.height,
                    pictureObj.target = img;
                    list.push({
                        src: item,
                        w: img.width,
                        h: img.height,
                        target: img
                    });
                })
                $.photoOpen(0, list);
            })

list里要有src、w、h、target属性

参考文章
文章2