初学PhotoSwipe笔记

最近在研究，在网上看用的比较广泛的图片滑动展示的控件

对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/
添加如下代码

<script type="text/javascript" src="klass.min.js"></script>
<script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script>

引入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的话，这样写

<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的图片，也可以动态添加，可以参看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);

否则块被重复使用会报错