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的創建者使事情保持簡單，“要么接受要么放棄”。 但這仍然是我在手機和台式機上見過的最好的燈箱。

更新

我寫了一個小jQuery插件，可以讓您在不使用現有fancybox / lightbox html結構圖像尺寸的情況下初始化PhotoSwipe。

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

您有幾種選擇可以使事情變得更好。

1.最臟的解決方案。 這對於幾個圖像可能已經足夠好了，但是如果您有大約10幅圖像，則將花費太多時間等待初始化。

在頁面上嵌入完整尺寸的圖像。 這將使您能夠在window load訪問圖像尺寸，以便可以使用實際尺寸構造圖像陣列，然后init PhotoSwipe。

2.您可以使用jQuery插件（例如http://imagesloaded.desandro.com/）來檢測是否加載了圖像。 您可以使用尺寸為100x100之類的小圖像占位符在准備好的文檔上初始化PhotoSwipe。 然后根據插件的過程，使用PhotoSwipe API更新加載的圖像。

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