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

               

指势触控

简介

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

使用方法

1、引入文件

1. <!-- 必须先引用klass,如需要提高加载速度,可以给 script加上defer 标记/属性-->  
2. <script type="text/javascript" src="klass.min.js"></script>  
3. <!-- 重要提示,如果不使用jQuery版本，在IE下面会出错，当然，使用jQuery版本，则需要引入jQuery-->  
4. <script type="text/javascript" src="code.photoswipe-3.0.5.min.js"></script>  

调用代码

/* 添加DOMContentLoaded 事件监听,类似于jQuery的 ready函数.  

1.  默认方式 examples/01-default.html 
2.  无缩略图模式请查看.examples/09-exclusive-mode-no-thumbnails.html 
3. */  
4. // PhotoSwipe.attach 方法接收3个参数(HTML元素集合,可选配置信息,可选多实例时string类型的ID)  
5. document.addEventListener('DOMContentLoaded', function(){  
6.     //设置 PhotoSwipe绑定为 id为Gallery的容器下的所有<a>标签.点击就会激活  
7.     // 此处的对象，就是PhotoSwipe实例，可以使用相应的方法,例如 show(0),hide()等.  
8.     var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );  
9. }, false);  

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

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

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

2、HTML

<!-- ul li 之类是用于显示缩略图的,也可以根据需要调整.<a>下面的<img> 元素,即为缩略图,如果不需要，则src设置为空即可 -->   

1. <ul id="Gallery">  
2.     <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>  
3.     <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>  
4.     <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>  
5.     <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>  
6.     <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>  
7.     <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>  
8. </ul>  

参数说明

自定义函数

1. getToolbar: function(){  
2.     /*返回 要在Toolbar之中显示的HTML字符串*/  
3. },  
4. getImageSource: function(el){  
5.     /* 告诉 gallery如何获取图片的src, 
6.      默认情况下,gallery假设你使用<a>标签包装了<img>缩略图，而<a>标签的href属性即为完整图片的URL。 
7.      此时可以使用本方法来返回对应元素的图片的路径。可以是各种各样的。比如rel属性什么的。有jQuery那就更简单了。 
8.     */  
9.     return el.getAttribute('rel');   
10. },  
11. getImageCaption: function(el){  
12.     /** 
13.     如同 getImageSource 方法一样，此方法返回图片的标题，默认情况下gallery查找图片的alt 属性。 
14.     */  
15. },  
16. getImageMetaData: function(el){  
17.     /** 
18.     如果你监听了 onDisplayImage,那么你可以通过此函数获取额外的元信息.并在 onDisplayImage中使用 
19.     */  
20.     return {  
21.         longDescription: el.getAttribute(el, 'data-long-description')  
22.     }  
23. }  
24. 
    

针对android 手机一次点按，会引起一层关闭后,底上的层依然会触发点击事件的问题，我们的解决方案如下:

1. // 在android 手机上多个层次触发点击,我们采用的是用定时器进行拦截  
2.   
3. var event_timeout = 500;// 预防多次事件触发   
4. // 阻止短时间内连续事件  
5. var multiClickPrevent = false;  
6. function preventMultiClick(){  
7.     if(multiClickPrevent){  
8.       return false;  
9.     }  
10.     multiClickPrevent = true;  
11.     window.setTimeout(function(){  
12.         multiClickPrevent = false;  
13.     },event_timeout);  
14.     return true;  
15. };  
16.   
17. // 适配浏览器  
18. var useragent = navigator.userAgent;  
19. var likeIOS = useragent.match(/iPad|iPhone|iPod/i);  
20. var likeAndroid = useragent.match(/android/i);  
21. var specialClick = "click";  
22. if(likeIOS){  
23.     specialClick = "touchstart click";  
24. } else if(likeAndroid){  
25.     specialClick = "touchstart click";  
26. }  
27.   
28. / 示例  
29. $(".t_right").live(specialClick,function(){  
30.     if(preventMultiClick()){   
31.         // 执行其他操作  
32.     } else {  
33.         // else 就是拒绝操作啦,可以直接返回 false 之类的  
34.         return false;  
35.     }  
36. });  
37. // 示例  
38. $("body").live(specialClick,function(){  
39.     if(preventMultiClick()){  
40.         // 执行其他操作  
41.     }  
42. });  

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

           

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow