PhotoSwipe - 未知大小

Question

的服務圖像我正在讀關於這個常見問題區域（服務未知大小的圖像），但我就麻煩了實施該解決方案爲波紋管如下：

您可以存儲的大小圖像直接在其文件名中，並在PhotoSwipe初始化期間解析它在前端（API部分中的獲取數據事件）。

我正在使用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的創造者讓事情變得簡單，「要麼接受，要麼離開它。」他說。但它仍然是我見過的最好的手機和桌面燈箱。

更新

我寫了一個小的jQuery插件，可以讓你初始化PhotoSwipe沒有圖像尺寸全光照現有的fancybox /收藏夾的HTML結構。

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

你有幾個選項，使事情做得更好。

1. 最簡單的解決方案。這可能對於一些圖像來說足夠好，但是如果您有幾十張圖像，則需要花費太多時間來等待init。

在頁面上嵌入全尺寸的圖片。這將使您可以訪問window load上的圖像尺寸，以便您可以構建具有實際尺寸的圖像陣列，然後使用init PhotoSwipe。

2. 您可以使用jQuery插件，像http://imagesloaded.desandro.com/如果圖像加載或不檢測。您可以使用尺寸爲100x100的小圖像佔位符來初始化文檔上的PhotoSwipe。然後根據插件的過程，使用PhotoSwipe API更新加載的圖像。

3. 最先進的解決方案。我上面提到的imagesLoaded插件使用jquery的延遲對象。 http://api.jquery.com/category/deferred-object/你總是歡迎編寫你自己的插件。