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为 gal lery的容器下的所有<a> 标签 .点击就会激活
// 此处的对象，就是 photoswipe 实例，可以使用相应的 方法 ,例如 show(0),hide()等.
var my photoswipe = Code. photoswipe .attach( window.document.querySelectorAll('# gal lery a'),{ enableMouseWheel: false,enableKeyboard: false } );
},false);如果使用 jQuery ，则 调用 代码 如下：
//jQuery 版,对应的js 文件 也需要变化
// 示例详见examples/02-jquery.html
$(document).ready(function(){
// 此处的对象，就是 photoswipe 实例，可以使用相应的 方法 ,hide()等.
var my photoswipe = $("# gal lery a"). photoswipe ({ enableMouseWheel: false,enableKeyboard: false });
});
HTML代码
<!-- ul li 之类是用于 显示 缩略图 的,也可以根据需要调整.<a>下面的<img> 元素,即为 缩略图 ,如果不需要，则src设置为空即可 -->
<ul id=" gal lery">
<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 和 Black Berry 使用. 支持 BB6,Android v2.1,iOS 4 以及更新版本. 默 认值 = true
captionAndToolb ara utoHideDelay: 标题 栏和工具栏 自动 隐藏的延迟时间. 默 认值为 = 5000(毫秒). 如果设为 0 则不会 自动 隐藏(tap/单击切换显隐)
captionAndToolbarFlipPosition: 标题 栏和工具栏切换位置(让 caption 显示 在 底部 而 toolbar 显示 在顶部). 默 认值 = false
captionAndToolbarHide: 隐藏 标题 栏和工具栏. 默 认值 = false
captionAndToolbarOpacity: 标题 栏和工具栏 的透明度(0-1). 默 认值 = 0.8
captionAndToolbarShowEmptyCaptions: 即使当前 图片 的 标题 是空,也 显示 标题 栏. 默 认值 = true
cacheMode: 缓存模式,Code. photoswipe .Cache.Mode. nor mal ( 默 认,正常) 或者 Code. photoswipe .Cache.Mode.aggressive(激进,积极). 决定 photoswipe 如何管理 图片 缓存 cache.
Aggressive 模式将会积极地地设置非 "当前，上一张,下一张"的 图片 为空的类型. 对于老版本iOS 浏览器下的大 图片 内存溢出将会很有用. 大多数情况下， nor mal模式就可以了。
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(毫秒)
nextPrev IoU sSlideSpeed: 当点击上一张,下一张按钮后,延迟多少毫秒执行切换. 默 认 = 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
ena bleu IWebViewRepositionTimeout: 检查设备的方向是否改变。 默 认 = false
uiWebViewResetPositionDelay: 定时检查设备的方向是否改变的时间 默 认 = 500(毫秒)
preventDefaultTouchEvents: 阻止 默 认的touch事件，比如 页面 滚动。 默 认 = true
target: 必须是 一个 合法的DOM元素(如div)。 默 认是window(全 页面 )。而如果是某个低级别的DOM，则在DOM内 显示 ，可能非全屏。
网站地址 : http://photoswipe.com
GitHub: https://github.com/dimsemenov/PhotoSwipe
网站描述: 为移动触摸设备设计的相册/画廊
PhotoSwipe官方网站
官方网站： http://photoswipe.com
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。