PhotoSwipe插件的使用

时间：2022-04-21 10:01:33

1、首先引入插件

<link rel="stylesheet" href="css/photoswipe.css">

<link rel="stylesheet" href="css/default-skin.css"/>

<script src="js/photoswipe.min.js"></script>

<script src="js/photoswipe-ui-default.min.js"></script>

（注意css文件夹要有default-skin.svg和default-skin.png）

2、接着HTML

<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>

                    <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>

（注意这里我只有Close按钮，个人偏好）

3、最后配置js

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

                    var items =  [

                                 {

                                     src: 'https://placekitten.com/600/400',

                                     w: 600,

                                     h: 400

                                 },

                                 {

                                     src: 'https://placekitten.com/1200/900',

                                     w: 1200,

                                     h: 900

                                 }

                    ]

                    var options = {

                        history: false,

                        focus: false,

                        showAnimationDuration: 0,

                        hideAnimationDuration: 0

                    };

                    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

                    gallery.init();

（自己设置一个按钮，里面是这些js文件就好了）

相关文章