jq封装PhotoSwipe的使用方法

小咪咪 2022-03-26 08:07 237阅读 0赞

官方网站：[http://photoswipe.com/ ][http_photoswipe.com_]  
源码下载：[https://github.com/dimsemenov/photoswipe][https_github.com_dimsemenov_photoswipe]  
国内CDN：[http://www.bootcdn.cn/photoswipe/][http_www.bootcdn.cn_photoswipe]

**引入相关文件**

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

**必要的启动代码**

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
            
            <div class="pswp__bg"></div> 
            <div class="pswp__scroll-wrap">
                
                <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>
                        
                        
                        <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：配置项

下面是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属性

参考[文章][Link 1]  
[文章2][2]

[http_photoswipe.com_]: http://photoswipe.com/
[https_github.com_dimsemenov_photoswipe]: https://github.com/dimsemenov/photoswipe
[http_www.bootcdn.cn_photoswipe]: http://www.bootcdn.cn/photoswipe/
[Link 1]: https://blog.csdn.net/qq_15602525/article/details/81318268
[2]: https://blog.csdn.net/lei95/article/details/79247134