PhotoSwipe - 提供未知大小的图像

Question

我正在阅读有关此问题的常见问题解答区域（提供未知大小的图像），但我无法按照以下方式实施解决方案：

您可以将图像的大小直接存储在其文件名中，并在 PhotoSwipe 初始化期间在前端解析它（API 部分中的 gettingData 事件）。

我正在使用 cloudinary 来存储我的图像。有什么想法吗？

Answer 1

PhotoSwipe 要求您指定图像的宽度和高度尺寸。
使用 Cloudinary 上传图片时，适用以下情况：
成功调用 Cloudinary 上传 API 的结果将包含上传图片的宽度和高度尺寸。
这些尺寸可以保存在您的 Web 应用程序数据库中，并在以后根据请求获取（例如，在渲染使用 PhotoSwipe 的页面时将尺寸与图像路径连接在一起）。

如果您缺少有关现有图像的这些信息，那么您可以使用 Cloudinary 的管理 API 列出已上传图像的详细信息并相应地填充您的数据库。例如在 Ruby 中：

Cloudinary::Api.resource('sample')

更多信息请访问： http://cloudinary.com/documentation/admin_api#details_of_a_single_resource

Answer 2

是的，PhotoSwipe 的创建者让事情变得简单，“要么接受，要么离开”，他说。但它仍然是我见过的最好的手机和桌面灯箱。

更新

我写了一个小的 jQuery 插件，它可以让你使用现有的 fancybox/lightbox html 结构来初始化 PhotoSwipe，而无需图像尺寸。

https://ergec.github.io/jQuery-for-PhotoSwipe/

您有多种选择可以让事情变得更好。

1. 最肮脏的解决方案。这对于几张图片可能已经足够了，但如果您有大约 10 张图片，则等待初始化会花费太多时间。

在页面上嵌入您的全尺寸图片。这将使您可以访问 window load 上的图像尺寸，以便您可以使用实际尺寸构建图像数组，然后 init PhotoSwipe。

2. 您可以使用像http://imagesloaded.desandro.com/ 这样的jQuery 插件来检测图像是否已加载。您可以使用尺寸为 100x100 的小图像占位符在准备好的文档上初始化 PhotoSwipe。然后根据插件的流程，使用 PhotoSwipe API 更新加载的图片。

3. 最先进的解决方案。我上面提到的 imagesLoaded 插件使用 jquery 的延迟对象。 http://api.jquery.com/category/deferred-object/ 随时欢迎您编写自己的插件。