PhotoSwipe用法

1、自動識別data-size問題，添加以下代碼

gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
                    gallery.listen('imageLoadComplete',
                    function (index, item) {
                        var linkEl = item.el.children[0];

                        if (!linkEl.getAttribute('data-size') || linkEl.getAttribute('data-size') == 'auto') {
                            var img = new Image();
                            img.src = linkEl.getAttribute('href');

                            linkEl.setAttribute('data-size', img.naturalWidth + 'x' + img.naturalHeight);
                            item.w = img.naturalWidth;
                            item.h = img.naturalHeight;
                            gallery.invalidateCurrItems();
                            gallery.updateSize(true);
                        }
                    });
                    gallery.init();

2、buttons不顯示問題

　　原因是：請求svg響應錯誤，要設置mime Type。對於vs2010，要使用iis express作為調試服務器，或者使用cdn的css。

　　參看：http://www.cnblogs.com/zhaoyihao/p/7326116.html

<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.css'>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.css'>

 3、大圖片loading樣式更改

　　在default-skin.css中加入css樣式，讓loading的gif放在正中間，loading過程中加上遮罩層。

.pswp__preloader--active {

    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
}

.pswp__preloader .pswp__preloader__icn {

    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -7px;
}

　　頁面中的loading div從top-bar中摘出來，放在pswp__ui上面，因為遮罩層要求狂傲都是100%。

<div class="pswp__preloader">
                <div class="pswp__preloader__icn">
                    <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut">
                        </div>
                    </div>
                </div>
            </div>

　　ui-default.js中的函數改一下，這一部分代碼是獲取loading的div，因為我們更換了它的位置，導致獲取不到了，要改為從pswp__scroll-wrap的child中獲取該div。

_toggleLoadingIndicator = function(hide) {
                    if (_loadingIndicatorHidden !== hide) {
                        _loadingIndicator = framework.getChildByClass(pswp.scrollWrap, 'pswp__preloader');
                        _togglePswpClass(_loadingIndicator, 'preloader--active', !hide);
                        _loadingIndicatorHidden = hide;
                    }
                },

　　小圖片到大圖片之間的延時默認是1秒，有一個切換效果，改為1ms。

_defaultUIOptions = {
                    barsSize: { top: 44, bottom: 'auto' },
                    closeElClasses: ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar'],
                    timeToIdle: 4000,
                    timeToIdleOutside: 1000,
                    loadingIndicatorDelay: 1, // 2s

                    addCaptionHTMLFn: function(item, captionEl /*, isFake */ ) {
                        if (!item.title) {
                            captionEl.children[0].innerHTML = '';
                            return false;
                        }
                        captionEl.children[0].innerHTML = item.title;
                        return true;
                    },