分享

Jquery Mobile PhotoSwipe插件 图片滑动浏览插件

 _心香一瓣_ 2015-04-01
1.插件官网:http://www./
2.插件演示地址:
3.简介:
PhotoSwipe是一个开发用于手机和Touch设备,功能强大的图片/照片集展示控件。它采用HTMLCSS+JavaScript实现,没有依 赖任何JavaScript框架。可以设置淡入/淡出的效果,激活放大功能,缩放图片等。PhotoSwipe支持的设备包括:iPhoneiPad AndroidBlackberry和桌面浏览器。它还有一个可选基于jQuery实现的版本。
3.PhotoSwipe插件配置参数
  
属性
  
描述
默认值
  
allowUserZoom
  
是否允许用户使用放大镜
true
  
fadeInSpeed
  
浏览的时候图片淡入的速度
250
  
fadeOutSpeed
  
浏览的时候图片淡出的速度
250
  
autoStartSlideshow
  
浏览图片的时候自动开启幻灯模式
false
  
backButtonHideEnabled
  
用户单击后退按钮是是否隐藏界面
true
  
captionAndToolbarHide
  
是否隐藏标题与工具栏
false
  
captionAndToolbarAutoHideDelay
  
设置自动隐藏标题与工具栏的等待时间
5000毫秒
  
captionAndToolbarOpacity
  
工具栏透明度
0.8  80%

  
(function(window, $, PhotoSwipe){
  
              
  
              $(document).ready(function(){
  
                  
  
                   $('div.gallery-page')
  
                       .live('pageshow',  function(e){
  
                           
  
                            var
  
                                 currentPage  = $(e.target),
  
                                 options  = {allowUserZoom:true},
  
                                 photoSwipeInstance  = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));
  
                                 
  
                            return  true;
  
                           
  
                       })
  
                       
  
                       .live('pagehide',  function(e){
  
                           
  
                            var
  
                                 currentPage  = $(e.target),
  
                                 photoSwipeInstance  = PhotoSwipe.getInstance(currentPage.attr('id'));
  
  
                            if  (typeof photoSwipeInstance != "undefined" &&  photoSwipeInstance != null) {
  
                                 PhotoSwipe.detatch(photoSwipeInstance);
  
                            }
  
                           
  
                            return  true;
  
                           
  
                       });
  
                  
  
              });
  
         
  
         }(window, window.jQuery,  window.Code.PhotoSwipe));
  

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多