`
流浪鱼
  • 浏览: 1684641 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

PhotoSwipe简介

 
阅读更多

官方介绍
PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。

为谁而用
让移动站点的相册体验和原生App一样的设计师和开发者。

绝佳特性
PhotoSwipe提供给用户一个熟悉又直观的相册交互界面。

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

源码示例
http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-3.0.5.zip

Github
https://github.com/codecomputerlove/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> 

 如果使用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内显示,可能非全屏。

 

可以参考http://blog.csdn.net/renfufei/article/details/10360855

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    h5 - PhotoSwipe图片放大功能集成和使用

    **PhotoSwipe简介** PhotoSwipe是一款强大的开源JavaScript库,专为移动设备和桌面设备上的HTML5网页设计,用于展示图片画廊。它提供了优雅的图片缩放、平移、滑动效果,并且具有良好的性能和用户体验。PhotoSwipe...

    Photoswipe

    Photoswipe是一款专为移动设备设计的JavaScript图片查看器插件,它使得用户可以在手机或平板电脑上方便地浏览和放大图片,同时支持多张图片的连续浏览,提供了一种优质的移动端图片展示体验。这款插件以其高效、轻量...

    PhotoSwipe的使用案例

    **PhotoSwipe:H5端JavaScript实现图片放大滑动查看** PhotoSwipe是一款强大的开源JavaScript插件,主要用于移动设备和桌面浏览器上的HTML5页面中,提供优雅的图片查看体验。这款插件设计精巧,性能优秀,支持触摸...

    PhotoSwipe演示-绝对可以使用

    《PhotoSwipe:打造卓越移动端图片展示体验》 PhotoSwipe是一款专为移动设备设计的轻量级、高性能的图片查看库,它提供了丰富的交互功能和出色的性能优化,使得用户在手机或平板上浏览图片时可以获得类似原生应用...

    PhotoSwipe 支持android手势放大

    **PhotoSwipe:强大的移动设备图片浏览器** PhotoSwipe是一款开源的JavaScript图片查看库,特别适合在移动设备上使用,尤其在Android平台上。它以其流畅的手势支持、高效的性能和丰富的自定义选项而广受好评。标题...

    封装photoswipe实现图片预览

    基于photoswipe图片预览基于photoswipe图片预览基于photoswipe图片预览基于photoswipe图片预览基于photoswipe图片预览基于photoswipe图片预览基于photoswipe图片预览

    PhotoSwipe4使用

    **PhotoSwipe4 使用详解** PhotoSwipe4 是一个流行的开源JavaScript库,专为移动Web应用程序设计,用于在手机或平板电脑上展示图片画廊。它以其轻量级、高性能和易于定制的特点,在HTML5 webapp中广泛应用。在这个...

    H5 PhotoSwipe简单例子

    H5 PhotoSwipe简单例子 H5 PhotoSwipe简单例子 H5 PhotoSwipe简单例子 H5 PhotoSwipe简单例子

    photoswipe图片插件使用.zip

    Photoswipe是一款强大的开源图片查看器插件,尤其适用于移动端网页,它可以为用户提供类似原生应用的图片浏览体验。这个插件允许你展示一个9宫格的图片预览,当用户点击小图时,会弹出全屏的大图,并且支持左右滑动...

    PhotoSwipe4.1.1Demo-图片浏览插件仿微信朋友圈程序文件

    PhotoSwipe是一个图片放大插件,兼容pc和移动端,经历过多个版本的迭代且一直在不断更新,踩过的坑不知凡几,在移动端有着巨大的优势。 1、可控制多种风格如: 标题、分享、全屏按钮,点击事件、是否加入字幕,...

    photoswipe-3.0.5

    - `README.md`:项目简介和安装、使用方法。 使用Photoswipe时,开发者首先需要在HTML中引入相关的CSS和JavaScript文件,然后创建一个包含图片的列表,并通过JavaScript初始化Photoswipe实例。通过配置选项,可以...

    PhotoSwipe4

    下面将详细介绍**PhotoSwipe4**的相关知识点及其在实际应用中的实现细节。 ### 1. 图片滑动效果 **PhotoSwipe4**的核心功能是实现平滑的图片滑动效果,用户可以通过轻扫屏幕来切换图片,同时保持良好的性能和响应...

    PhotoSwipe-master.zip

    《使用PhotoSwipe实现高效图片浏览体验》 在Web开发中,提供流畅的图片浏览功能是提升用户体验的关键之一。尤其在社交媒体、电子商务或者个人博客等场景,用户经常需要查看多张图片,这就对图片浏览插件提出了高...

    photoswipe 图片旋转实现.zip

    Photoswipe是一款流行的开源轻量级图片查看库,主要用于移动端网页,提供滑动、缩放、导航等交互功能。然而,其官方默认配置并不包含图片旋转的功能,特别是在PC端。为了在PC端实现图片旋转,我们需要对Photoswipe...

    photoswipe插件案例

    Photoswipe是一款强大的开源轻量级图片查看器插件,尤其适用于移动端网页,它提供了类似原生应用的图片浏览体验。这个插件允许用户在网页上点击图片后进行平移、缩放、左右滑动等操作,提升了用户体验。下面将详细...

    photoswipe之移动端图片放大查看,保存到本地

    Photoswipe是一款轻量级、高性能的JavaScript库,专为移动端设计,用于实现优雅的图片滑动和放大查看功能。在移动设备上,用户通常需要更近一步地查看图片细节,Photoswipe为此提供了一个用户友好的解决方案。这个库...

    PhotoSwipe插件

    **PhotoSwipe插件详解** PhotoSwipe是一款非常流行的开源JavaScript库,专为HTML5网页设计,用于实现优雅且高性能的图片查看器。它支持触摸滑动、键盘导航,并提供了丰富的自定义选项,使得在H5页面中展示图片变得...

    PhotoSwipe.js_支持移动手机的纯js

    **PhotoSwipe.js:移动优化的JavaScript图片画廊解决方案** 标题中的"PhotoSwipe.js"是一款流行的、专为移动设备优化的JavaScript库,它主要用于创建高性能、交互性强的图片画廊。这款开源工具允许开发者在网站上...

Global site tag (gtag.js) - Google Analytics