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();
原因是:请求svg响应错误,要设置mime Type。对于vs2010,要使用iis express作为调试服务器,或者使用cdn的css。
参看:http://www.cnblogs.com/zhaoyihao/p/7326116.html
在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%。
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;
},
手机扫一扫
移动阅读更方便
你可能感兴趣的文章