PhotoSwipe之参数options（3）

原文地址，点击直达，阅读效果更佳

Options

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

索引index

是第一个图像（ slide ）的索引，必须是整型，不可以是一个字符串。

获取动画开始或结束时的对象坐标getThumbBoundsFn

从最初的放大动画开始时（或从最后的缩小动画结束时），函数应该返回一个对象坐标。
对象包含三个属性：

1. x：x坐标，相对于document元素
2. y：y坐标，相对于document元素
3. w：元素的宽度，高度基于最大图像的尺寸自动计算。

例如：缩放动画在页面的左上角开始时，getThumbBoundsFn返回{x:0,y:0,w:50}

该getThumbBoundsFn函数有一个参数：打开（或关闭）画廊的索引项。

在非模态模式下，模板的位置相对于视口（viewport）应该减去x和y。更多信息：FAQ

下面是缩略图位置计算的例子：

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
}

如果小缩略图的尺寸不能匹配大图像的尺寸，可考虑启用缩放+渐进过渡。你可以通添加options的showHideOpacity:true开启（或通过添加hideAnimationDuration:0, showAnimationDuration:0来禁止过渡动画。更多关于此的信息，请查看FAQ

如果你想在动画运行期间隐藏缩略图，可以使用opacity:0,不要使用visibility:hidden和display:none。
为了避免延迟，在动画的开始时，不要强制绘制和布局。

不透明转换showHideOpacity:false

如果设置为false, 背景 opacity 属性和图像的 scale 属性将会是活动的；
如果设置为true, PhotoSwipe的根元素的 opa