photoswipe.js——移动端图片文字放大缩小

指势触控

简介

       PhotoSwipe 是专为移动触摸设备设计的相册/画廊，支持触控网页上所有内容放大缩小，兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。

使用方法

1、引入文件

 <script type="text/javascript" src="klass.min.js">script>

 <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的容器下的所有标签.点击就会激活

如果使用 jQuery ，则调用代码如下：

// 示例详见examples/02-jquery.html   

 $(document).ready(function(){
     // 此处的对象，就是PhotoSwipe实例，可以使用相应的方法,例如 show(0),hide()等.
     var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
 });

2、HTML

  

 <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>

参数说明

自定义函数

      默认情况下,gallery假设你使用标签包装了缩略图，而标签的href属性即为完整图片的URL。

针对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()){
         // 执行其他操作
     }
 });

官网：http://photoswipe.com/
GitHub：https://github.com/dimsemenov/photoswipe （亲测好用）