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