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. 配置cobbler步骤

    首先找到下载包的地址 (使用的是centos6) http://download.opensuse.org/repositories/home:/libertas-ict:/cobbler26/Cen ...

  2. UnitTest_墨振文档

    目录 一.框架介绍 1 二.四大组件 2 三.ddt数据驱动 3 一.框架介绍 unittest框架是python 自带的一个作为单元测试的测试框架,在最初叫pyUnit,相当与Java语言中的Jun ...

  3. Guitar Pro吉他指弹入门——美式指弹

    说起指弹吉他,很多身边的琴友首先反应到的是押尾桑,岸部真明,伍伍慧等等指弹艺术家的日式指弹.笔者在初涉指弹的时候,也是如此,但是随着学习的加深,首先认识到了汤米大神(Tommy Emmanuel),然 ...

  4. 如何将MathType恢复出厂设置

    必大家都知道,我们日常使用的手机是自带恢复出厂设置功能的,其实除了手机,咱们今天要说的这款公式编辑器MathType,也是可以进行恢复出厂设置操作的哦,下面就让小编给大家介绍一下吧. 一.打开Math ...

  5. 二 HTML文档基本结构

    2.1 HTML5文档结构: HTML5文档结构包括头部(head).主体(body)两大部分. 2.1.1<!DOCTYPE>声明 引用官方的DTD文件,在HTML5之前版本,如xHTM ...

  6. 【性能测试】【locust】快速入门

    简介 locust是一个开源的分布式用户负载压力测试工具,对网站(其他系统,例如接口等)进行负载测试,并确定可以处理多少的并发用户,locust特点利用了协程支持,达到高数量级别的并发,以及基于事件驱 ...

  7. mongodb分页查询,排序

    mongodb代码 根据时间倒序,查看10条 db.表名.find({"_id":"xxx"}).sort({"inserted":-1}) ...

  8. VueCli 4.0+ 版本安装插件与VueCLI 旧版本的不同

    通过VueCli 脚手架 4+ 版本创建的项目,在引入插件文件并配置时,是通过 import {Create* } ,旧版本是直接导入全部,在配置相应的文件时,重新new 一个:然后再通过Vue 进行 ...

  9. 【译】用 React 和 D3 创建图表

    本文翻译自:https://dzone.com/articles/charts-with-modern-react-and-d3 本文将介绍如何利用 D3JS 和 ReactJS 来创建基础图表. R ...

  10. 企业安全06-Apache Log4j Server 反序列化命令执行漏洞(CVE-2017-5645)

    CVE-2017-5645 Apache Log4j Server 反序列化命令执行漏洞(CVE-2017-5645) 一.漏洞原理 Apache Log4j是一个用于Java的日志记录库,其支持启动 ...