PhotoSwipe之FAQ（5）

实现

我不能事先确定图片的大小，我该怎么做？

使用另外一个图库脚本（1，2），或者找到一个方法：

你可以阅读 PHP Version，Ruby，Node.js中关于下载图片尺寸的部分内容。
您可以将图像的尺寸直接存储在其文件名中，并在photoswipe初始化期间（参照API部分中gettingdata事件）在前端对其进行分析。
大部分CMS系统在数据库中存储图片的尺寸，并且有API去检索它。
大部分web API(FaceBook,500px,Instagram,Flickr,Twitter,YouTube,Vimeo etc)返回图片的尺寸

尺寸（大小）用于逐步加载,占位符,最初的放大过渡,平移,缩放,标题定位。讨论在GitHubissue#741

我的缩略图是正方形的，但是大图片有不同的尺寸，如何处理打开/关闭时的过渡动画？

如果缩略图与大图片的长宽比不能匹配，不要为每个图库项对象去定义msrc属性，启用不透明过渡选项showHideOpacity:true,getThumbBoundsFn:false
如果缩略图与大图片的长宽比匹配，但是缩略图区域被css裁剪了。需要添加showHideOpacity:true,并确保getThumbBoundsFn属性返回缩略图区域的坐标。

我强烈推荐去展示与大图片比率相匹配的缩略图。或者通过css进行区域裁剪。

为什么还没有解决这个问题，这里有两种方法可以扩大动画区域。

动画有clip属性。但它每次都强制重绘，这使得动画极度不平稳。
使用两个有overflow:hidden的div来包裹展开的图像。在动画期间，通过transform:translate重新定位它们，以便其裁剪部分正确。此方法不强制绘制或布局，但在每个幻灯片的标记中需要另外的元素。测试原型表明，它只在高端移动设备（Nexus5和Chrome）上运行流畅。也许有一天我会实现它。

我的标题很长，我可以添加并滚动他们吗？

请看 issue#657

如何实现内联画廊展示

注意,这是一个实验性的特性,现在它不允许在移动的画廊上垂直滚动页面(因为它在touch事件中会调用prevetDefault())。实现嵌入式和文档流的画廊,遵循这些步骤:

把.pswp模板放入在一个有position定位的父元素。
设置modal:false,closeOnScroll:false选项。
修改 getThumbBoundsFn (如果你使用它)减去模板父母的边界矩形(作者应该是指margin)。
构建 PhotoSwipe。
监听 updateScrollOffset 事件并添加模板的边界矩形偏移量。
初始化PhotoSwipe

在线案例

<div style="position: relative;" class="parent">
    <div id="gallery" class="pswp"> ... </div>
</div>

var items = [...];
var template = document.getElementById("gallery"); // .pswp
var options = {
    ...,
    modal: false,
    closeOnScroll: false,
    getThumbBoundsFn: function(index) {
        // rect was the original bounds
        var rect = {x: ..., y: ..., w: ...},

        var templateBounds = template.parentElement.getBoundingClientRect();
        rect.x -= templateBounds.left;
        rect.y -= templateBounds.top;

        return rect;
    }
};
var photoSwipe = new PhotoSwipe(template, PhotoSwipeUI_Default, items, options);
photoSwipe.listen('updateScrollOffset', function(_offset) {
    var r = template.getBoundingClientRect();
    _offset.x += r.left;
    _offset.y += r.top;
});
photoSwipe.init();

如何使用自定义标识符替代URL索引？

每个图像的URL：

http://example.com/#&gid=1&pid=custom-first-id
http://example.com/#&gid=1&pid=custom-second-id

被替换之前的URL:

http://example.com/#&gid=1&pid=1
http://example.com/#&gid=1&pid=2

启用history:true,galleryPids:true选项并添加pid（图片的唯一标识）属性到每一个图库项。
pid 可以是整数或字符串，例如：

var slides = [
    {
        src: 'path/to/1.jpg',
        w:500,
        h:400,
        pid: 'custom-first-id'
    },
    {
        src: 'path/to/2.jpg',
        w:300,
        h:700,
        pid: 'custom-second-id'
    },
    ... 
];

注意，PhotoSwipe在初始化打开之前，不会执行任何代码。这就是你需要在初始化页面加载的时候自己去解析这个URL的原因。文档入门部分的默认代码包含此功能。（如果你需要一些修改功能，请使用photoswipeParseHash）
在PhotoSwipe v4.0.8之前，galleryPids选项不可用。

Bugs

有时候`gif`图片在IOS8会被卡住

IOS Safari 有一个bug，禁止gif图片被移动到窗口之外（或带有overflow:hidden属性的元素之外）。我的建议是：在PhotoSwipe中应该避免使用gif动图。因为在一些移动浏览器里，它会降低动画性能。但是如果你真的需要使用它，也不是不可，这里有hack技术

打开带有非常大尺寸或像素的图像可能会导致移动浏览器崩溃。

大多数情况下，发生在低内存限制的移动设备（IOS Safari和在比较老的安卓上，默认浏览器）上。崩溃常规原因是有太多大图片（通常大于2000*1500px）,PhotoSwipe在图片上启用硬件加速，这比使用正常尺寸的图片将消耗更多的内存。因此当你运行在底限制的浏览器上时，动画为延迟甚至崩溃。

因此，提供响应式图片或者不使用大尺寸图片。理想情况下，在900*600像素的手机上，你应该提供1200px宽的图像。注意，如果这在IOS模拟器上运行流畅，并不意味着，在真实的设备上不会崩溃。

在更罕见的情况下，如果在页面上的某个进程（可以是初始页面加载/呈现，或页面上的某些复杂动画）中打开Photosweep，则会发生崩溃，请尝试延迟Photosweep初始化（初始化），直到呈现页面为止（文档准备就绪后18-300毫秒），特别是在显示大型图像时。

其他

更新日志在哪里？关于通知更新，我该怎样做？

每次PhotoSwipe更新，在GitHub releases页面有更新详情。Releases页面有一个Atom提要，你可以在使用IFTTT更新提要时，设置电子邮件通知。

另外，你可以加入我的电子邮件通讯(每年3到4次发送),
在推特关注PhotoSwipe和在GitHub上star和watchPhotoSwipe.

我可以在`WordPress`，`Magento`或`joomla`等模板上使用`PhotoSwipe`吗？

你可以自由的使用PhotoSwipe，没有任何限制。如果可以，请给我留给友链。