文档章节

Html5添加移动手机和桌面设备使用的模块化JavaScript图片画廊插件教程

大街小巷
 大街小巷
发布于 2016/01/11 15:14
字数 356
阅读 24
收藏 2

一、使用方法
<link rel="stylesheet" href="path/to/photoswipe.css">
<link rel="stylesheet" href="path/to/default-skin/default-skin.css">
<script src="path/to/photoswipe.min.js"></script>
<script src="path/to/photoswipe-ui-default.min.js"></script>    

二、Html结构
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
 
<div class="pswp__bg"></div>
 
<div class="pswp__scroll-wrap">
 
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
 
<div class="pswp__ui pswp__ui--hidden">
 
<div class="pswp__top-bar">
 
<div class="pswp__counter"></div>
 
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
 
<button class="pswp__button pswp__button--share" title="Share"></button>
 
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
 
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

<div class="pswp__preloader"></div>

<div class="pswp__preloader__icn"></div>

<div class="pswp__preloader__cut"></div>

<div class="pswp__preloader__donut"></div>
</div>
 
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"></div>

<div class="pswp__share-tooltip"></div>

 
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
 
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
 
<div class="pswp__caption">

<div class="pswp__caption__center"></div>

</div>
 
</div>
 
</div>
 
</div>
注意:代码中的pswp__bg、pswp__scroll-wrap、pswp__container和pswp__item的顺序不可以改变。

三、初始化插件
var pswpElement = document.querySelectorAll('.pswp')[0];
var items = [
{
src: 'https://placekitten.com/600/400',
width: 600,
height: 400
     },
     {
src: 'https://placekitten.com/1200/900',
width: 1200,
height: 900
    }
];
var options = {
index: 0
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();     
 
KeyMob是最具价值的移动广告联盟;是国内最早专注于为移动应用APP开发者创造优质体验和手机广告收益最大化的平台。

© 著作权归作者所有

共有 人打赏支持
大街小巷
粉丝 8
博文 208
码字总数 130367
作品 0
长沙
私信 提问
开源中最好的 Web 开发的资源

学习HTML 5编程和设计 ★ HTML5 Rocks : Major Feature Groups 的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码 很不错的 HTML5 Dashboard – Mozilla,效果很炫。 WhatWG Developers, 一个清...

红薯
2011/06/09
8.4K
36
面向移动设备的HTML5开发框架梳理

很久以前整理了篇将手机网站做成手机应用的JS框架。时隔一年多,很多新的技术已经出现,下面再来总结下还有哪些框架是适合面向手机设备的开发的。 1、jQuery Mobile jQuery Mobile 是 jQuery...

凯文加内特
2015/01/26
0
0
20 款免费的 JavaScript 游戏引擎

使用 HTML5,CSS3 和 Javascript 可以帮助面向对象开发者开发拥有各种特性的游戏,比如:3D 动画效果,Canvas,数学,颜色,声音,WebGL 等等。最明显的优势在于使用 HTML5 开发的游戏能在任...

oschina
2014/02/20
17.5K
13
开源中最好的Web开发的资源

个人感觉这个收集贴收集成相当的全。 学习HTML 5编程和设计 ★ HTML5 Rocks: Major Feature Groups 的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码 很不错的 HTML5 Dashboard– Mozilla,效...

MrMign
2011/11/01
1K
5
18 款超酷的 HTML5 和 JavaScript 游戏引擎库

现在的游戏开发变得越来越复杂,需要制作各种炫丽的效果,还要制作各种基于 2D 或者 3D 的场景。为了节省游戏开发者的时间,让开发者集中精力在游戏的创新上,出现了许许多多的游戏引擎。而现...

oschina
2014/04/17
26.6K
13

没有更多内容

加载失败,请刷新页面

加载更多

关于360插件化Replugin Activity动态修改父类的字节码操作

近期在接入360插件化方案Replugin时,发现出现崩溃情况。 大概崩溃内容如下: aused by: java.lang.ClassNotFoundException: Didn't find class "x.x.x.xActivity" on path: 我自己在插件代码......

Gemini-Lin
22分钟前
0
0
mybatis缓存的装饰器模式

一般在开发生产中,对于新需求的实现,我们一般会有两种方式来处理,一种是直接修改已有组件的代码,另一种是使用继承方式。第一种显然会破坏已有组件的稳定性。第二种,会导致大量子类的出现...

算法之名
昨天
15
0
单元测试

右键方法 Go To --> Test,简便快速生成测试方法。 相关注解 @RunWith(SpringRunner.class) 表示要在测试环境中跑,底层实现是 jUnit测试工具。 @SpringBootTest 表示启动整个 Spring工程 @A...

imbiao
昨天
4
0
欧拉公式

欧拉公式表达式 欧拉公式的几何意 cosθ + j sinθ 是个复数,实数部分也就是实部为 cosθ ,虚数部分也就是虚部为 j sinθ ,对应复平面单位圆上的一个点。 根据欧拉公式和这个点可以用 复指...

sharelocked
昨天
5
0
burpsuite无法抓取https数据包

1.将浏览器和burpsuite的代理都设置好 2.在浏览器地址栏输入: http://burp 3.下载下面的证书,并将证书导入浏览器 cacert.der

Frost729
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部