PhotoSwipe 官方API解读（三）

本节解释options:
配置项接收键值对的形式，并且作为一个参数添加到PhotoSwipe的构造函数中。

var options = {
    index: 3,
    escKey: false,
    // ui option
    timeToIdle: 4000
};
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();
// Note that options object is cloned during the initialization.
// But you can access it via `gallery.options`.
// For example, to dynamically change `escKey`:
gallery.options.escKey = false;
// `options.escKey = false` will not work

core核心
1、index : (整数) 从0开始 必须是整数，不能是字符串
2、getThumbBoundsFn (function类型)
这个函数会返回一个坐标对象：缩放动画从哪里开始放大或者从哪里开始缩小。
这个对象包含三个属性:x(相对于文档的X位置),y(相对于文档的Y位置),w(元素的宽度）。高度将根据大图像的大小自动计算。例如如果你返回{ x:0,y:0,w:50 }缩放动画会从页面的左上角开始。
这个函数有一个参数，index, 即打开或关闭的项的索引。
在非模态框的模式下，x和y中应该减去这个模板相对于viewport的位置。
一个计算缩略图位置的例子：

getThumbBoundsFn: function(index) {
    // find thumbnail element
    var thumbnail = document.querySelectorAll('.my-gallery-thumbnails')[index];
    // get window scroll Y
    var pageYScroll = window.pageYOffset || document.documentElement.scrollTop; 
    // optionally get horizontal scroll
    // get position of element relative to viewport
    var rect = thumbnail.getBoundingClientRect(); 
    // w = width
    return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
    // Good guide on how to get element coordinates:
    // http://javascript.info/tutorial/coordinates
}

如果小缩略图和大图的尺寸不一致，可以考虑使用zoom+fade的动画。