PhotoSwipe 官方API解读（二）

前面的文章 《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">
            ![](small-image.jpg)
        </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">
            ![](small-image.jpg)
        </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，在此省略）