PhotoSwipe - 提供未知大小的图像

Question

我正在阅读有关此问题的常见问题解答区域（提供未知大小的图像），但是如下所示我实施解决方案时遇到了麻烦：

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

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

Answer 1

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

如果您遗漏了有关现有图片的此信息，则可以使用Cloudinary的Admin API列出已上传图片的详细信息并相应地填充您的数据库。例如在Ruby中：

Cloudinary::Api.resource('sample')

更多信息可在以下网址找到： http://cloudinary.com/documentation/admin_api#details_of_a_single_resource

Answer 2

是PhotoSwipe的创造者保持简单，＆＃34;要么接受要么离开它＆＃34;他说。但它仍然是我见过的最好的手机和桌面灯箱。

<强>更新

我写了一个小的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/我们随时欢迎您编写自己的插件。