当前位置: 首页 > 工具软件 > PhotoSwipe > 使用案例 >

PhotoSwipe之FAQ(5)

石喜
2023-12-01

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

实现

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

使用另外一个图库脚本(12),或者找到一个方法:

  • 你可以阅读 PHP VersionRubyNode.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进行区域裁剪。

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

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

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

请看 issue#657

如何实现内联画廊展示

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

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

我可以在WordPressMagentojoomla等模板上使用PhotoSwipe吗?

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

 类似资料: