PhotoSwipe插件的使用
1、首先引入插件
<link rel="stylesheet" href="css/photoswipe.css">
<link rel="stylesheet" href="css/default-skin.css"/>
<script src="js/photoswipe.min.js"></script>
<script src="js/photoswipe-ui-default.min.js"></script>
(注意css文件夹要有default-skin.svg和default-skin.png)
2、接着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>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</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>
(注意这里我只有Close按钮,个人偏好)
3、最后配置js
var pswpElement = document.getElementsByClassName('pswp')[0];
var items = [
{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400
},
{
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}
]
var options = {
history: false,
focus: false,
showAnimationDuration: 0,
hideAnimationDuration: 0
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
(自己设置一个按钮,里面是这些js文件就好了)
PhotoSwipe插件的使用的更多相关文章
- 使用iScroll和photoswipe写手机浏览图片的插件的几点经验
首先,当我知道我得到一个任务需要写一个在手机上能浏览图片的插件时,我第一想到了iScroll.它的左右滑动,上下滑动的效果在安卓手机上也能让用户有良好的体验,自己写也能方便控制. 我的需求是,插件要能 ...
- PhotoSwipe异步动态加载图片
在开发搜房家居M站的时候,搜房家居装修效果图相册展示效果需要用到PhotoSwipe插件来显示图片.特点:1. 家居提供的接口,每次只能获取一张图片2. 装修效果图的张数不限.3. 从PhotoSwi ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
- 微信公众平台开发教程--方培工作室,PHP语言版本
准备工作 微信公众平台的注册 介绍如何注册一个微信公众账号. 入门教程 微信公众平台开发入门教程 内容:1.申请SAE作为服务器; 2.启用开发模式; 3.微信公众平台PHP SDK; 4.接收发送消 ...
- PhotoSwipe.js 相册展示插件学习
PhotoSwipe.js官网:http://photoswipe.com/,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的,还是很实用的. 一 ...
- 移动端图片放大滑动查看-插件photoswipe的使用
最近在开发项目的时候,遇到一个需求,需要移动端实现放大查看图片的功能,然后我就在网上搜索了一下资料,看到了photoswipe这个插件,后来试了试,确实挺好用的,它可以实现手势放大缩小查看图片,左右滑 ...
- 【JavaScript 插件】图片展示插件 PhotoSwipe 初识
前言: 考虑自己网站的图片展示,而且要支持移动端和PC端.自己写的代码也不尽如意,要写好的话也需要时间,于是就想到了使用相关插件. 准备: PhotoSwipe 官网地址:http://photosw ...
- H5端js实现图片放大滑动查看-插件photoswipe的使用
最近在开发项目的时候,遇到一个需求,需要移动端实现放大查看图片的功能,然后我就在网上搜索了一下资料,看到了photoswipe这个插件,后来试了试,确实挺好用的,它可以实现手势放大缩小查看图片,左右滑 ...
- PhotoSwipe图片展示插件
这个插件相当棒!功能也很强大,可以自行体会. 官方网址:http://www.photoswipe.com/ github地址:https://github.com/codecomputerlove/ ...
随机推荐
- [LeetCode] Single Number III 单独的数字之三
Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...
- hihocoder-1014 Trie树
hihocoder 1014 : Trie树 link: https://hihocoder.com/problemset/problem/1014 题意: 实现Trie树,实现对单词的快速统计. # ...
- 个人作业-Week1
问题1:程序员的优劣是否在软件开发中已经不重要了??用户实际关心的 外形,使用的乐趣和效率,自我形象,个人满足感,回忆,这么多条中,仅有效率与代码有关,而实际上用户比起效率却更在意其他这些“幺蛾子”. ...
- Bzoj1269 [AHOI2006]文本编辑器editor
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3678 Solved: 1380 Description 这些日子,可可不和卡卡一起玩了,原来可可正 ...
- Picture intermediate frame ----- increase smooth
By YutaiHou
- Linux下如何查找.sh后缀的文件
find / -name *.sh或locate *.shfind 与locate的区别:locate 配合数据库查看文件位置 find 实际搜寻硬盘查询文件名称
- js获取手机验证码倒计时的实现
方案一 <div class="div user-input"> <input type="number" class="code& ...
- 导致页面顶部空白一行解决方法 【】
2016年11月7日10:57:10 模板文件生成html文件之后会在body开头处加入一个可见的控制符,导致页面头部会出现一个空白行.原因是页面的编码是UTF-8 + BOM. ...
- 如何使用DOS命令(cd命令)
如何使用DOS命令 DOS是Disk Operation System(磁盘操作系统)的简称,是个人计算机上的一类操作系统.它直接操纵管理硬盘的文件,一般都是黑底白色文字的界面.顾名思义,DOS主要是 ...
- Fatal signal xx (SIGSEGV) at
Fatal signal 11问题的解决方法 http://blog.csdn.net/tankai19880619/article/details/9004619 如何定位Android NDK开发 ...