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