PhotoSwipe用法
阅读原文时间:2023年07月09日阅读:1

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


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%。

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

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章