PhotoSwipe小白攻略_为移动触摸设备设计的相册/画廊

PhotoSwipe小白攻略

官方网址:http://photoswipe.com

PhotoSwipe小白攻略_为移动触摸设备设计的相册/画廊

GitHub:https://github.com/dimsemenov/PhotoSwipe

简介描述:为移动触摸设备设计的相册/画廊

PhotoSwipe 是专为移动触摸设备设计的相册/画廊,PhotoSwipe提供给用户一个熟悉又直观的相册交互界面。

PhotoSwipe兼容大量的移动设备以及所有流行的JavaScript类库/开发框架. 既有基于jQuery的版本,也有不依赖jQuery的版本,还有兼容jQuery Mobile的版本。当然,All In One,全在源码示例包里。 

PhotoSwipe是一个自身独立的JavaScript库,可以很方便地集成进你的网站。针对移动浏览器(webkit)进行了大量的优化,当然,对于桌面浏览器,以及jQueryMobile,在源码包内也提供了相应的版本。

类库引用

<!-- photoswipe 之前先引用klass,如果需要提高加载速度,可以给 script 加上 defer 标记/属性-->
<script type="text/javascript" src="klass.min.js"></script>
<!-- 重要提示,如果不使用jQuery版本,在IE下面会出错,当然,使用jQuery版本,则需要引入jQuery-->
<script type="text/javascript" src="code.photoswipe-3.0.5.min.js"></script>

调用代码

/* 添加DOMContentLoaded 事件监听,类似于jQuery的 ready函数.
 默认方式 examples/01-default.html
 无缩略图模式请查看.examples/09-exclusive-mode-no-thumbnails.html
*/
// PhotoSwipe.attach 方法接收3个参数(HTML元素集合,可选配置信息,可选多实例时string类型的ID)
document.addEventListener('DOMContentLoaded', function(){
	//设置 PhotoSwipe绑定为 id为Gallery的容器下的所有<a>标签.点击就会激活
	// 此处的对象,就是PhotoSwipe实例,可以使用相应的方法,例如 show(0),hide()等.
	var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );
}, false);

如果使用jQuery,则调用代码如下:

//jQuery 版,对应的js文件也需要变化
// 示例详见examples/02-jquery.html
$(document).ready(function(){
	// 此处的对象,就是PhotoSwipe实例,可以使用相应的方法,例如 show(0),hide()等.
	var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
});

HTML代码

<!-- ul li 之类是用于显示缩略图的,也可以根据需要调整.<a>下面的<img> 元素,即为缩略图,如果不需要,则src设置为空即可 -->
<ul id="Gallery">
	<li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
	<li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
	<li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
	<li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
	<li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
	<li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>

参数说明 

allowUserZoom: 允许用户双击放大/移动方式查看图片. 默认值 = true
autoStartSlideshow: 当PhotoSwipe激活后,自动播放幻灯片. 默认值 = false
allowRotationOnUserZoom: 只有 iOS 支持 - 允许用户在缩放/平移模式下 用手势旋转图像. 默认值  = false
backButtonHideEnabled: 按返回键隐藏相册幻灯片. 主要是 Android 和 Blackberry使用. 支持 BB6, Android v2.1, iOS 4 以及更新版本. 默认值 = true
captionAndToolbarAutoHideDelay: 标题栏和工具栏自动隐藏的延迟时间. 默认值为 = 5000(毫秒). 如果设为 0 则不会自动隐藏(tap/单击切换显隐)
captionAndToolbarFlipPosition: 标题栏和工具栏切换位置(让 caption显示在底部而 toolbar显示在顶部). 默认值 = false
captionAndToolbarHide: 隐藏 标题栏和工具栏. 默认值  = false
captionAndToolbarOpacity: 标题栏和工具栏 的透明度(0-1). 默认值  = 0.8
captionAndToolbarShowEmptyCaptions: 即使当前图片的标题是空,也显示标题栏. 默认值 = true
cacheMode: 缓存模式,Code.PhotoSwipe.Cache.Mode.normal (默认,正常) 或者 Code.PhotoSwipe.Cache.Mode.aggressive(激进,积极). 决定 PhotoSwipe 如何管理图片缓存 cache.
 Aggressive 模式将会积极地地设置非 "当前,上一张,下一张"的图片为空的类型. 对于老版本iOS 浏览器下的大图片内存溢出将会很有用. 大多数情况下,normal模式就可以了。
doubleTapSpeed: 双击的最大间隔. 默认值 = 300(毫秒)
doubleTapZoomLevel: 当用户双击的时候,放大的倍数, 默认的 "zoom-in"(拉近) 级别. 默认值 = 2.5
enableDrag: 允许拖动上一张/下一张图片到当前界面. 默认值 = true
enableKeyboard: 允许键盘操作(左右箭头切换,Esc退出,Enter自动播放,空格键 显/隐标题栏/退出). 默认 = true
enableMouseWheel: 允许鼠标滚轮操作. 默认 = true
fadeInSpeed: 淡入效果元素的速度(持续时间),毫秒. 默认 = 250
fadeOutSpeed: 淡出效果元素的速度(持续时间),毫秒. 默认 = 250
imageScaleMethod: 图片缩放方法(模式). 可选值: "fit", "fitNoUpscale" 和 "zoom". 模式"fit" 保证图像适应屏幕. "fitNoUpscale" 和 "fit"类似但是不会放大图片. "zoom"将图片全屏, 但有可能图片缩放不是等比例的. 默认 = "fit"
invertMouseWheel: 反转鼠标滚轮。默认情况下,鼠标向下滚动将切换到下一张,向上切换到上一张 . 默认 = false
jQueryMobile: 指示 PhotoSwipe 是否集成进了 jQuery Mobile 项目. 默认情况下, PhotoSwipe will try and work this out for you
jQueryMobileDialogHash: jQuery Mobile的window,dialog页面 所使用的hash标签。 默认值 = "&ui-state=dialog"
loop: 相册是否自动循环. 默认 = true
margin: 两张图之间的间隔,单位是像素. 默认 = 20
maxUserZoom: 最大放大倍数. 默认 = 5.0 (设置为0将被忽略)
minUserZoom: 图像最小的缩小倍数. 默认 = 0.5 (设置为0将会忽略)
mouseWheelSpeed: 响应鼠标滚轮的灵敏度. 默认 = 500(毫秒)
nextPreviousSlideSpeed: 当点击上一张,下一张按钮后,延迟多少毫秒执行切换. 默认 = 0 (立即切换)
preventHide: 阻止用户关闭 PhotoSwipe. 同时也会隐藏 工具栏上的"close"关闭按钮. 在独享的页面使用 (示例是源码中的 examples/08-exclusive-mode.html). 默认 = false
preventSlideshow: 阻止自动播放模式. 同时也会隐藏工具栏里的播放按钮. 默认 = false
slideshowDelay: 自动播放模式下,多长时间播放下一张. Default = 3000(毫秒)
slideSpeed: 图片滑进视图的时间. 默认 = 250(毫秒)
swipeThreshold: 手指滑动多少像素才触发一个  swipe 手势事件. 默认 = 50
swipeTimeThreshold: 定义触发swipe(滑动)手势的最大毫秒数,太慢了则不会触发滑动,只会拖动当前照片的位置. 默认 = 250
slideTimingFunction: 滑动时的 Easing function . 默认 = "ease-out"
zIndex: 初始的zIndex值. 默认 = 1000
enableUIWebViewRepositionTimeout: 检查设备的方向是否改变。默认 = false
uiWebViewResetPositionDelay: 定时检查设备的方向是否改变的时间 默认 = 500(毫秒)
preventDefaultTouchEvents: 阻止默认的touch事件,比如页面滚动。 默认 = true
target: 必须是一个合法的DOM元素(如DIV)。默认是window(全页面)。而如果是某个低级别的DOM,则在DOM内显示,可能非全屏。

海计划公众号
(0)
上一篇 2020/03/06 08:34
下一篇 2020/03/06 08:34

您可能感兴趣的内容

  • JS原生实现连续滚动文字基础知识入门_滚动入门指南

    前言:最近在工作中遇到,文字在大屏中,出现底部有留白导致不连续的现象,很奇怪,故写这篇文章细究其原因
    关键字:
    offsetTop scrollTop offsetHeight
    来看下代码怎么做到的
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

    2020/03/20
  • ng-alain小白知识_一个基于 Antd 中后台前端解决方案

    ng-alain小白知识 官方网址:https://ng-alain.com/ GitHub:https://github.com/ng-alain/ng-alain/ 简介描述:…

    2020/03/07
  • 树状图基础指南_在线流程图制作工具

    树状图基础指南 官方网址:http://www.lizibuluo.com/tree/ 简介描述:在线流程图制作工具 「树状图」是一个可以可以用来在线制作树状流程图(思维导图,或组…

    2020/03/11
  • JS 中 this 在各个场景下的指向新手入门_this小白知识

    1. this 的奥秘很多时候, JS 中的 this 对于咱们的初学者很容易产生困惑不解。 this 的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this 表示类方法中当前对象的实例。大多数情况下,this 不能在方法之外使用,这样就比较不会造成混淆。在J要中情况就有所不同: this表示函数的当前执行上下文,JS 中

    2020/03/29
  • Node学习笔记:优化crud增删改查使用教程_优化小白教程

    本篇文章结合前文《Node学习笔记 Mongodb和Mongoose》对 curd 示例 进行优化MongoDB 安装安装文件下载地址:[https://www.mongodb.com/download-center/community]Windows 平台安装 MongoDB:https://www.runoob.com/mongodb/mongodb-w

    2020/03/20
  • react-router刷新页面Cannot GET 问题入门百科_刷新使用攻略

    最近在做项目的时候遇到了如下错误Cannot GET /myTrip并在控制台看到了如下的报错我先是按照控制台的错误搜索,得出的结果都是对meta头部进行设置,允许资源请求,但是问题依然没有解决,偶然间改变了想法,会不会是路由的问题呢,一搜还真是,这是因为没有历史记录
    添加HashRouter即可import { HashRouter } from ‘rea

    2020/03/26
  • 25个超有用的Python代码段小白入门_Python小白知识

    Python是一种通用的高级编程语言。用它可以做许多事,比如开发桌面 GUI 应用程序、网站和 Web 应用程序等。作为一种高级编程语言,Python 还可以让你通过处理常见的编程任务来专注应用程序的核心功能。并且,编程语言的简单语法规则进一步简化了代码库的可读性和应用程序的可维护性。与其他编程语言相比,Python 的优势在于:与主要平台和操作系统兼容;有

    2020/03/22
  • flv.js实战入门攻略使用flv.js做直播_直播小白知识

    为什么要在这个时候探索flv.js做直播呢?原因在于各大浏览器厂商已经默认禁用Flash,之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用直播功能,这样的用户体验很致命。在介绍flv.js之前先介绍下常见的直播协议以及给出我对它们的延迟与性能所做的测试得出的数据。如果你看的很吃力可以先了解下音视频技术的一些基础概念。常见直播协议RTMP

    2020/04/05
  • XSS自动点按钮有什么危害?如何让按钮不被 JS 自动点击?基础教程_攻击基础指南

    前言XSS 自动点按钮有什么危害?在社交网络里,很多操作都是通过点击按钮发起的,例如发表留言。假如留言系统有 XSS,用户中招后除了基本攻击外,还能进行传播 —— XSS 自动填入留言内容,并模拟点击发表按钮,于是就能发布带有恶意代码的留言。好友看了中招后,又传播给他们的好友。。。从而形成蠕虫扩散。那么有没有一种机制,让「发表留言」必须通过用户的「真实点击」

    2020/03/26
  • nginx:支持https入门攻略_nginx入门知识

    1.查看nginx模块nginx -V注意是大写的V,小写的v是查看版本号的命令。如果看到with-ssl那就是有的2.注册ssl证书并下载免费的ssl证书有: Let‘s Encrypt SSL证书,Symantec DV SSL证书, 腾讯云SSL证书(1年免费)以及网易云(1年免费),下载完压缩包会有pem公钥以及key私钥,上传到linux的ngin

    2020/04/03
  • 玉伯博客小白知识_支付宝前端,seajs作者

    玉伯博客小白知识 官方网址:https://github.com/lifesinger/blog/issues 简介描述:支付宝前端,seajs作者 玉伯,淘宝前端类库 KISSY…

    2020/03/06
  • 网站设计如何减少页面加载时间菜鸟指南_加载使用指南

    百度将网站的加载速度加入影响排名的因素中,这就是网站设计应该努力减少网站加载时间的重要原因。如果一个电子商务网站每天销售10万元,延迟1秒的页面加载时间可能会导致每年损失250万元。47%的用户希望网站在2秒内加载,而超过3秒的延迟可能会让40%的用户放弃网站,那么网站设计如何减少页面加载时间?1、插件 安装了太多的插件,占用了很多服务器资源让网站设计

    2020/03/23
  • 解锁设计优质API的五种秘籍入门基础教程_api使用教程

    如今,随着我们构建软件方式的变化,以及API平台的爆炸式激增,各大公司都必须以更快的速度构建出自己的产品、并推向市场。目前,几乎所有的软件需求都需要通过API来提供相应的解决方案,其中包括:支付类API、通信类API、以及传输类API等数千种。那么我们该如何设计并构建出一个优质的API呢?无论您的目标是要构建一个开源的API、一种API平台、还是能帮助其他开

    2020/03/24
  • cells在Javascript中有什么作用?小白知识_表格基础知识教程

    在Javascript中,cells可以获取表格中某一行所有单元格的集合,可以通过索引获取集合中的指定td单元格。下面本篇文章就来给大家介绍一下Javascript的cells,希望对大家有所帮助。cells可以获取表格中某一行所有单元格的集合,可以通过索引获取集合中的指定单元格,即返回表格中所有

    元素。语法:tableObject.

    2020/03/20
  • Adobe Fonts入门指南_提供的免费桌面和 Web 字体

    Adobe Fonts入门指南 官方网址:https://fonts.adobe.com/ 简介描述:提供的免费桌面和 Web 字体 原名为Typekit,向用户提供大量的免费字体…

    2020/03/06
  • sprite.js使用帮助_由360奇舞团开源的跨终端 canvas 绘图框架

    sprite.js使用帮助 官方网址:http://spritejs.org GitHub:https://github.com/spritejs/spritejs 简介描述:由3…

    2020/03/10