指势触控
简介
PhotoSwipe 是专为移动触摸设备设计的相册/画廊，支持触控网页上所有内容放大缩小，兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。
使用方法
1、引入文件
<!-- 必须先引用klass,如需要提高加载速度,可以给script加上defer标记/属性--> <scripttype="text/javascript"src="klass.min.js"></script> <!--重要提示,如果不使用jQuery版本，在IE下面会出错，当然，使用jQuery版本，则需要引入jQuery--> <scripttype="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()等. varmyPhotoSwipe=Code.PhotoSwipe.attach(window.document.querySelectorAll('#Gallerya'),{enableMouseWheel:false,enableKeyboard:false}); },false);
如果使用 jQuery ，则调用代码如下：
//示例详见examples/02-jquery.html$(document).ready(function(){ //此处的对象，就是PhotoSwipe实例，可以使用相应的方法,例如show(0),hide()等. varmyPhotoSwipe=$("#Gallerya").photoSwipe({enableMouseWheel:false,enableKeyboard:false}); });
2、HTML
<!--ulli之类是用于显示缩略图的,也可以根据需要调整.<a>下面的<img>元素,即为缩略图,如果不需要，则src设置为空即可--><ulid="Gallery"> <li><ahref="images/full/01.jpg"><imgsrc="images/thumb/01.jpg"alt="Image01"/></a></li> <li><ahref="images/full/02.jpg"><imgsrc="images/thumb/02.jpg"alt="Image02"/></a></li> <li><ahref="images/full/03.jpg"><imgsrc="images/thumb/03.jpg"alt="Image03"/></a></li> <li><ahref="images/full/04.jpg"><imgsrc="images/thumb/04.jpg"alt="Image04"/></a></li> <li><ahref="images/full/05.jpg"><imgsrc="images/thumb/05.jpg"alt="Image05"/></a></li> <li><ahref="images/full/06.jpg"><imgsrc="images/thumb/06.jpg"alt="Image06"/></a></li> </ul>参数说明
自定义函数getToolbar:function(){ /*返回要在Toolbar之中显示的HTML字符串*/ }, getImageSource:function(el){ /*告诉gallery如何获取图片的src, 默认情况下,gallery假设你使用<a>标签包装了<img>缩略图，而<a>标签的href属性即为完整图片的URL。 此时可以使用本方法来返回对应元素的图片的路径。可以是各种各样的。比如rel属性什么的。有jQuery那就更简单了。 */ returnel.getAttribute('rel'); }, getImageCaption:function(el){ /** 如同getImageSource方法一样，此方法返回图片的标题，默认情况下gallery查找图片的alt属性。 */ }, getImageMetaData:function(el){ /** 如果你监听了onDisplayImage,那么你可以通过此函数获取额外的元信息.并在onDisplayImage中使用 */ return{ longDescription:el.getAttribute(el,'data-long-description') } }
针对android 手机一次点按，会引起一层关闭后,底上的层依然会触发点击事件的问题，我们的解决方案如下:
//在android手机上多个层次触发点击,我们采用的是用定时器进行拦截 varevent_timeout=500;//预防多次事件触发 //阻止短时间内连续事件 varmultiClickPrevent=false; functionpreventMultiClick(){ if(multiClickPrevent){ returnfalse; } multiClickPrevent=true; window.setTimeout(function(){ multiClickPrevent=false; },event_timeout); returntrue; }; //适配浏览器 varuseragent=navigator.userAgent; varlikeIOS=useragent.match(/iPad|iPhone|iPod/i); varlikeAndroid=useragent.match(/android/i); varspecialClick="click"; if(likeIOS){ specialClick="touchstartclick"; }elseif(likeAndroid){ specialClick="touchstartclick"; } /示例 $(".t_right").live(specialClick,function(){ if(preventMultiClick()){ //执行其他操作 }else{ //else就是拒绝操作啦,可以直接返回false之类的 returnfalse; } }); //示例 $("body").live(specialClick,function(){ if(preventMultiClick()){ //执行其他操作 } });
官网：/
GitHub：/dimsemenov/photoswipe （亲测好用）
