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;
                    },