PhotoSwipe之FAQ（5）
实现
我不能事先确定图片的大小，我该怎么做？
- 你可以阅读 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，没有任何限制。如果可以，请给我留给友链。