PhotoSwipe外掛的使用

kimingw發表於2016-12-06

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檔案就好了）

相關文章