对PhotoSwipe的Demo研究了一下，发现PhotoSwipe确实是个很不错的控件
对于图片大小的自适应缩放 并且不像网上很多的幻灯片控件，当只有一张图片的时候会不显示图片
下面记录下学习笔记
https://github.com/codecomputerlove/PhotoSwipe/tree/master/src/examples
这里面是PhotSwipe所有例子的源码文件
想对应的地址如：
http://www.photoswipe.com/latest/examples/07-custom-toolbar.html
https://github.com/codecomputerlove/PhotoSwipe
这里面记录着一些参数的配置详细
大体的用法在官网上面有
http://www.photoswipe.com/
添加如下代码
引入js文件
document.addEventListener('DOMContentLoaded', function(){
var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );
}, false);
添加监听来触发图片显示
//jQuery version
$(document).ready(function(){
var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
});
如果是用jquery的话，这样写
照上面来添加html的图片，也可以动态添加，可以参看example的源码
并且可以根据自己的需求来变幻这段代码的内容
关于Code.PhotoSwipe.attach方法的第二个参数
是一个options，里面的各种配置在之前的配置说明链接里面有详细说明
关于使用jquery mobile ajax异步加载的情况
这是我最近比较头疼的问题，异步页面对于计算宽高实在是太蛋疼了，按照exapmle中05的例子去写
关于自定义Toolbar的情况
可以按照example中07的例子去写，也可以把原来的toolbar隐藏掉，然后自己在下面再加一个自己的东西，因为原来的toolbar是浮动在原图片上的，如果想不占用原空间，可以自己再在下面加自己的
至于如何调用上一个，下一个，可以使用Code.PhotoSwipe.attach返回的photoswipe的实例对象的next()方法和previous()方法等。
关于获取当前的图片索引
可以按照example中06的例子看看各个响应时间可以获取的值
关于只显示图片滑动控件不显示图片列表的情况
正常来说源码内部图片滑动被激活之后，html的那段id为Gallery的整个内容就会被display:none，但是使用扩展模式的话，可能就需要手动的自己写display为none了，没太仔细研究源码，单这也算是可以解决的笨方法吧。
关于动态加载图片
可以参看example中09的例子
但是自己使用过程中遇到要使用el表达式循环，不能在js当中遍历，所以就不知道怎么动态加载了，只好通过jstl来循环el表达式了，还好有两种写法，不过个人更喜欢动态加载的例子
关于设置当前显示图片的索引
通过Code.PhotoSwipe.attach返回的photoswipe对象.show(索引)方法来实现
在离开页面的时候，记得要
window.Code.PhotoSwipe.detatch(myPhotoSwipe);
否则块被重复使用会报错