这个插件相当棒!功能也很强大,可以自行体会。
官方网址:http://www.photoswipe.com/
github地址:https://github.com/codecomputerlove/PhotoSwipe
实例demo下载:http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-3.0.5.zip
库文件引用:
<!-- 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="data:images/thumb/01.jpg" alt="Image 01" /></a></li>
<li><a href="images/full/02.jpg"><img src="data:images/thumb/02.jpg" alt="Image 02" /></a></li>
<li><a href="images/full/03.jpg"><img src="data:images/thumb/03.jpg" alt="Image 03" /></a></li>
<li><a href="images/full/04.jpg"><img src="data:images/thumb/04.jpg" alt="Image 04" /></a></li>
<li><a href="images/full/05.jpg"><img src="data:images/thumb/05.jpg" alt="Image 05" /></a></li>
<li><a href="images/full/06.jpg"><img src="data: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内显示,可能非全屏。
自定义函数:
getToolbar: function(){
/*返回 要在Toolbar之中显示的HTML字符串*/
},
getImageSource: function(el){
/* 告诉 gallery如何获取图片的src,
默认情况下,gallery假设你使用<a>标签包装了<img>缩略图,而<a>标签的href属性即为完整图片的URL。
此时可以使用本方法来返回对应元素的图片的路径。可以是各种各样的。比如rel属性什么的。有jQuery那就更简单了。
*/
return el.getAttribute('rel');
},
getImageCaption: function(el){
/**
如同 getImageSource 方法一样,此方法返回图片的标题,默认情况下gallery查找图片的alt 属性。
*/
},
getImageMetaData: function(el){
/**
如果你监听了 onDisplayImage,那么你可以通过此函数获取额外的元信息.并在 onDisplayImage中使用
*/
return {
longDescription: el.getAttribute(el, 'data-long-description')
}
}
针对Android 手机一次点按,会引起一层关闭后,底上的层依然会触发点击事件的问题,我们的解决方案如下:
// 在android 手机上多个层次触发点击,我们采用的是用定时器进行拦截 var event_timeout = 500;// 预防多次事件触发
// 阻止短时间内连续事件
var multiClickPrevent = false;
function preventMultiClick(){
if(multiClickPrevent){
return false;
}
multiClickPrevent = true;
window.setTimeout(function(){
multiClickPrevent = false;
},event_timeout);
return true;
}; // 适配浏览器
var useragent = navigator.userAgent;
var likeIOS = useragent.match(/iPad|iPhone|iPod/i);
var likeAndroid = useragent.match(/android/i);
var specialClick = "click";
if(likeIOS){
specialClick = "touchstart click";
} else if(likeAndroid){
specialClick = "touchstart click";
} / 示例
$(".t_right").live(specialClick,function(){
if(preventMultiClick()){
// 执行其他操作
} else {
// else 就是拒绝操作啦,可以直接返回 false 之类的
return false;
}
});
// 示例
$("body").live(specialClick,function(){
if(preventMultiClick()){
// 执行其他操作
}
});
PhotoSwipe图片展示插件的更多相关文章
-
jq图片展示插件highslide.js简单dom
今天用用了一款图片展示插件highslide.js,感觉用起来很是舒畅,几乎不用怎么写代码,只需要知道如何写参数就行了. 那么这么牛叉的插件我们该如何用哪,下面我就跟大家讲解一下. 一.引入 首先 ...
-
【JavaScript 插件】图片展示插件 PhotoSwipe 初识
前言: 考虑自己网站的图片展示,而且要支持移动端和PC端.自己写的代码也不尽如意,要写好的话也需要时间,于是就想到了使用相关插件. 准备: PhotoSwipe 官网地址:http://photosw ...
-
强大的图片展示插件,JQuery图片预览展示插件
只需要引入JQuery.js , viewer.css 和 viewer.js <!DOCTYPE html> <html lang="en"> <h ...
-
photoswipe图片滑动插件使用
第一步: 引入jss和css文件 <!-- Core CSS file --> <link rel="stylesheet" href="path/t ...
-
PhotoSwipe 图片浏览插件使用方法
一.简介 PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产 ...
-
Lightbox 图片展示插件
html <a href="<?php echo RESOURCES_BASE_FOLDER;?>image/default_pic.jpg" target=&q ...
-
十个jQuery图片画廊插件推荐
jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuery的重要性不能被忽视.下面为你介绍了10个最有美感,创新性和创造性的jQu ...
-
PhotoSwipe.js 相册展示插件学习
PhotoSwipe.js官网:http://photoswipe.com/,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的,还是很实用的. 一 ...
-
使用iScroll和photoswipe写手机浏览图片的插件的几点经验
首先,当我知道我得到一个任务需要写一个在手机上能浏览图片的插件时,我第一想到了iScroll.它的左右滑动,上下滑动的效果在安卓手机上也能让用户有良好的体验,自己写也能方便控制. 我的需求是,插件要能 ...
随机推荐
-
find the peak value
A peak element is an element that is greater than its neighbors. Given an input array where num[i] ≠ ...
-
SQL效率的几点心得
这几天一直在写SQL,有时候对比同样效果的SQL语句,可是查询所需要的时间有时候相差很多,下面总结遇到的几个点: 1.between and 在有些时候自己比较喜欢使用这个语句,因为可以通过把数据 ...
-
GuideActivity.java引导界面:
这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api. 而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等.那 ...
-
python urllib、urlparse、urllib2、cookielib
1.urllib模块 1.urllib.urlopen(url[,data[,proxies]]) 打开一个url的方法,返回一个文件对象,然后可以进行类似文件对象的操作.本例试着打开google i ...
-
sea.js介绍
网址:http://seajs.org/docs/ SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等Ja ...
-
【Python】 更多数据类型collections&;简易数据文件shelve
■collections collections在python内建的数据类型基础上新增一些实用的数据类型,其目的在于增加代码的可读性?(虽然我自己没怎么用过..) ① deque 双端队列 q = d ...
-
神奇的Scala Macro之旅(三)- 实际应用
在上一篇中,我们示范了使用macro来重写 Log 的 debug/info 方法,并大致的介绍了 macro 的基本语法.基本使用方法.以及macro背后的一些概念, 如AST等.那么,本篇中,我们 ...
-
记python使用grpc
using grpc in Python gRPC是基于http/2的RPC框架,使用ProtoBuf作为底层数据序列化.Nginx服务器2018年3月17日引入gRPC支持. gRPC 是用来实现跨 ...
-
debian apache2 多端口对应多文件 虚拟端口配置
apache2单IP多端口创建虚拟站点如下: 1.转到配制目录虚拟站点配制目录 cd /etc/apache2/ 2.配置新增多的端口 编辑上级目录中的端口配制文件sudo gedit ports ...
-
SpringMVC处理模型数据
目录结构 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi= ...