PhotoSwipe.js 相册展示插件学习

PhotoSwipe是一个开发用于手机和Touch设备，功能强大的图片/照片集展示控件。它采用HTML、CSS+JavaScript实现，没有依赖任何JavaScript框架。

可以设置淡入/淡出的效果，激活放大功能，缩放图片等。PhotoSwipe支持的设备包括：iPhone、iPad、Android、Blackberry和桌面浏览器。它还有一个可选基于jQuery实现的版本。

优点：

• 界面美观，简易的人性化操作

• 兼容移动设备，图像展示友好。

• 纯JS，不依赖其它JS库，轻量级！比FancyBox小太多太多了

官方网站：http://www.photoswipe.com/

源码示例：http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-3.0.5.zip

Github：https://github.com/codecomputerlove/PhotoSwipe

在线demo：http://www.photoswipe.com/latest/examples/04-jquery-mobile.html

如何使用

一、引入Css和Js文件：

<!-- photoswipe 之前先引用klass,如果需要提高加载速度,可以给 script 加上 defer 标记/属性-->  
<script type="text/javascript" src="klass.min.js"></script>

<!-- 重要提示,如果不使用jQuery版本，在IE下面会出错，当然，使用jQuery版本，则需要引入jQuery-->  
<script type="text/javascript" src="code.photoswipe-3.0.5.min.js"></script>

二、然后页面结构可以是这样子的：

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

其实在这段html代码中除了页面结构外，真正有用的只有 id="Gallery"和<a href="图片路径"></a>（在后面会有说明），其他的class神马的只是起到美化最初的页面结构的作用（和你真正想要的效果的页面不同，也就是说，你只要按照上述页面的结构进行排版，你想要的页面效果是插件js自身完成的，是不需要你写效果布局的）。

页面需要的js和页面结构都有了，下面就是使用插件了。

三、你可以采用两种方式进行插件的声明：

1、是用浏览器默认的方式addEventListener()的方式进行

document.addEventListener("DOMContentLoaded", function () {
    Code.photoSwipe('a', '#Gallery'); //此处就涉及到上述页面结构中的  id="Gallery"和<a href="..."></a>，其中id="Gallery"是容器，
    　　　　　　　　　　　　　　　　　　　　　　 //<a href="图片路径"></a>,此处href中一定是当前所指向的图片的路径
}, false);

2、使用Jquery的方式：

$(document).ready(function(){
    $("#Gallery a").photoSwipe();
});

属性对照表

如果不需要展示第一个页面直接展示第二个页面，可以这样设置：

$(document).ready(function(){    
    // Set up PhotoSwipe, setting "preventHide: true"
    var thumbEls = Code.photoSwipe('a', '#Gallery', { preventHide: true });
    Code.PhotoSwipe.Current.show(0);
});

当然这个插件还有很多其他的监听函数：

document.addEventListener('DOMContentLoaded',function(){
    //onBeforeShow 在gallery将要展示之前调用该方法
  Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeShow,function(e){
    console.log("onBeforeShow");
})；

// onshow 在gallery展示的时候调用
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShow,function(e){
    console.log("onShow");
});

// onBeforeHide 在gallery隐藏之前
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeHide, function(e){            
　　console.log('onBeforeHide');            
});

// onHide 在Gallery隐藏的时候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onHide, function(e){
   console.log('onHide');           
});

// onShowNext  在展示下一个的时候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShowNext, function(e){
    console.log('onShowNext');
});

// onShowPrevious 在展示上一个的时候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShowPrevious, function(e){
    console.log('onShowPrevious');
});

// onDisplayImage 在图片展示
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onDisplayImage, function(e){
   console.log('onDisplayImage');
});

// onResetPosition 当Gallery的大小和位置发生变化时或者设备的方向或者窗口大小改变时，出发该方法
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onResetPosition, function(e){
   console.log('onResetPosition');
});

// onSlideshowStart 当gallery开始滑动展示的时候（此方法可能是我理解有误，实验过程中一直没有触发过
的），原文是：When the gallery has started the slideshow
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onSlideshowStart, function(e){
   console.log('onSlideshowStart');
});

// onSlideshowStop 当Gallery活动结束的时候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onSlideshowStop, function(e){
   console.log('onSlideshowStop');
});

// onBeforeCaptionAndToolbarShow 在顶部状态栏和底部的工具栏展示之前触发
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarShow, function(e){
   console.log('onBeforeCaptionAndToolbarShow');
});

// onBeforeCaptionAndToolbarHide 在顶部状态栏和底部的工具栏隐藏之前触发
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarHide, function(e){
   console.log('onBeforeCaptionAndToolbarHide');
});

// onViewportClick 在gallery中点击屏幕的时候触发，此时一般会触发onBeforeCaptionAndToolbarShow或者onBeforeCaptionAndToolbarHide 方法
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onViewportClick, function(e){
       console.log('onViewportClick');
    });
},false);

参考文章：

http://photoswipe.com/documentation/getting-started.html

http://blog.csdn.net/renfufei/article/details/10360855