前面的文章 《PhotoSwipe 官方API解读（一）》只是进行了最简单的配置，实现了相册放大后的效果，今天的《PhotoSwipe 官方API解读（二）》将实现多个照片滑动切换的效果。
创建一组幻灯片的对象
数组中的每个对象都应该包含关于幻灯片的数据，它可以是你想要在photo滑动中显示的任何东西——路径到图片，标题字符串，股票数量，评论等等。
默认PhotoSwipe只使用了5个属性:
src(路径图像),w(图片宽度),h(图片高度),msrc(路径小图像占位符,大图片将被加载到顶部),html(自定义html http://photoswipe.com/documentation/custom-html-in-slides.html)。
在导航期间,PhotoSwipe将自己的属性添加到此对象(比如minZoom 和 loaded)。
var slides = [
// slide 1
{
src: 'path/to/image1.jpg', // path to image
w: 1024, // image width
h: 768, // image height
msrc: 'path/to/small-image.jpg', // small image placeholder,
// main (large) image loads on top of it,
// if you skip this parameter - grey rectangle will be displayed,
// try to define this property only when small image was loaded before
title: 'Image Caption' // used by Default PhotoSwipe UI
// if you skip it, there won't be any caption
// You may add more properties here and use them.
// For example, demo gallery uses "author" property, which is used in the caption.
// author: 'John Doe'
},
// slide 2
{
src: 'path/to/image2.jpg',
w: 600,
h: 600
// etc.
}
// etc.
];
你可以直接在PhotoSwipe读取他们之前动态的定义幻灯片对象的属性,使用gettingData事件( API section of docs)。例如，这种技术可以用于为不同的屏幕大小提供不同的图像。
如何从链接列表中构建一系列幻灯片
假定你有像这样的一个列表
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
</a>
<figcaption itemprop="caption description">Image caption</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
</a>
<figcaption itemprop="caption description">Image caption</figcaption>
</figure>
</div>
如果你想点击在缩略图上能打开大图，你需要做以下这些：
1、绑定点击事件到链接/缩略图上。
2、在用户点击缩略图后，找到它的索引。
3、从DOM元素创建一组幻灯片对象——遍历所有的链接并且检索href属性(大图像的url),data-size属性(它的大小),缩略图的src,以及说明内容。
PhotoSwipe并不关心你怎么做。如果你使用像jQuery或者MooTools这样的框架，或者你不需要支持IE8，代码可以被大大简化。（官网有很长一段兼容IE8的demo，在此省略）
