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

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

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. 
    

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. });