PhotoSwipe

PhotoSwipe 介绍

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

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

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

类库引用

调用代码

/* 添加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实例，可以使用相应的方法,hide()等.

var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false,enableKeyboard: false });

});

html代码

</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内显示，可能非全屏。

网站地址:http://photoswipe.com

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

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

PhotoSwipe官方网站

官方网站：http://photoswipe.com

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

PhotoSwipe

PhotoSwipe

PhotoSwipe 介绍

参数说明

PhotoSwipe官方网站

相关文章