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

PhotoSwipe用法的更多相关文章

  1. PhotoSwipe异步动态加载图片

    在开发搜房家居M站的时候,搜房家居装修效果图相册展示效果需要用到PhotoSwipe插件来显示图片.特点:1. 家居提供的接口,每次只能获取一张图片2. 装修效果图的张数不限.3. 从PhotoSwi ...

  2. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  3. jquery插件的用法之cookie 插件

    一.使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  4. Java中的Socket的用法

                                   Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...

  5. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  6. python enumerate 用法

    A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...

  7. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  8. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  9. chattr用法

    [root@localhost tmp]# umask 0022 一.chattr用法 1.创建空文件attrtest,然后删除,提示无法删除,因为有隐藏文件 [root@localhost tmp] ...

随机推荐

  1. Linux操作系统选择

    主流的操作系统 ubuntu centos debian oracle linux 主要使用的操作系统就是上面几个,主要是ubuntu和centos,debian是基于ubuntu改的,oracle ...

  2. fastapi+vue搭建免费代理IP网站部署至heroku

    说明 最近需要用到一些HTTP的代理,用于爬虫去爬取信息,搜索了一些网站,貌似现在这类提供免费代理IP的网站很多,刚好最近看了点vue的视频,弄个网站练练. 部署到heroku,预览地址:点击这里 F ...

  3. 在CorelDRAW2019创建对称绘图模式

    对称绘图模式是CorelDRAW 2018推出的全新功能,在2019的版本中又得到了极大的完善,通过对称绘图模式可以创建平衡.和谐.独一无二的效果,对称在大自然中随处可见,因此设计元素很可能将依靠于它 ...

  4. 关于Camtasia2020安装完成之后无法运行问题的解决方法

    在录像编辑软件Cmtasia更新到了2020版本之后,有部分小伙伴们遇到了这样的问题:在我们安装好软件之后,居然无法运行.今天小编就给大家介绍一下该如何解决这个问题. 方法一: 第一步,选中桌面上Ca ...

  5. sentinel--初级使用篇

    1.官方资料 github官网地址:https://github.com/alibaba/Sentinel wiki:https://github.com/alibaba/Sentinel/wiki/ ...

  6. LeetCode周赛#212

    1631. 最小体力消耗路径 #并查集 #最短路径 题目链接 题意 给定一二维 rows x columns 的地图 heights ,其中 heights[row][col] 表示格子 \((row ...

  7. Linux 上如何清除 RAM 内存高速缓存,缓存和交换空间

    像任何其他的操作系统一样,GNU / Linux已经有效地实施了内存管理甚至更多.但是,如果有任何进程正在蚕食你的内存,你要清除它,Linux提供了一个方法来刷新或清除RAM缓存. 在Linux中如何 ...

  8. 【抓取】6-DOF GraspNet 论文解读

    [抓取]6-DOF GraspNet 论文解读 [注]:本文地址:[抓取]6-DOF GraspNet 论文解读 若转载请于明显处标明出处. 前言 这篇关于生成抓取姿态的论文出自英伟达.我在读完该篇论 ...

  9. 【MySQL/C#/.NET】VS2010报错--“.Net Framework Data Provider。可能没有安装。”

    前言 公司行业是金融软件,之前用的都是Oracle数据库.Oracle数据库用一个词来形容:大而全.MySQL的话,可能是因为开源.便宜,现在越来越主流. 我们也支持MySQL数据库,不过平时不用.最 ...

  10. Jmeter-BeanShell断言的运用二(不同Json格式的字段提取和断言判断)

    前言 为了更加熟悉BeanShell,所以用几个实例来记录说明下,不同的Json格式是怎么提取相应字段和判断断言的.(会持续更新...) 一.第一种Json格式 1.Json响应数据内容如下: { & ...