I was reading the faq area about this (serving images of unknown size), but i'm in trouble to implement the solution as follow bellow:
You can store size of an image directly in its filename and parse it on frontend during PhotoSwipe initialization (gettingData event in API section).
I'm using cloudinary to store my images. Any ideas?
PhotoSwipe requires you to specify the image's width and height dimensions.
When using Cloudinary to upload an image, the below applies:
The result to a successful API call to Cloudinary's upload API will contain the uploaded image's width and height dimensions.
These dimensions can be saved inside your web application database and be fetched later upon request (e.g. concatenating the dimensions together with the image path when rendering the page where PhotoSwipe is used).
In case you're missing this information regarding existing images, then you can use Cloudinary's Admin API to list the details of already uploaded images and populate your DB accordingly. For example in Ruby:
Cloudinary::Api.resource('sample')
More information can be found at: http://cloudinary.com/documentation/admin_api#details_of_a_single_resource
Yes creator of PhotoSwipe keeps things simple, "either take it or leave it" he says. But still it's the best lightbox i've ever seen for mobiles and for desktops.
update
I wrote a small jQuery plugin that will let you init PhotoSwipe without image dimensions usin existing fancybox/lightbox html structure.
https://ergec.github.io/jQuery-for-PhotoSwipe/
You have couple options to make things better.
1. Dirtiest solution. This may be good enough for a couple of images but will take too much time to wait for init if you have some 10s of images.
Embed your full size images on page. This will give you access to image dimensions on window load so you can construct your array of images with actual dimensions then init PhotoSwipe.
2. You can use jQuery plugins like http://imagesloaded.desandro.com/ to detect if images are loaded or not. You can init PhotoSwipe on document ready using a small image placeholders with dimensions like 100x100. Then based on the process of the plugin, use PhotoSwipe API to update loaded images.
3. Most advanced solution. imagesLoaded plugin i mentioned above uses jquery's deferred objects. http://api.jquery.com/category/deferred-object/ you're always welcome to write your own plugin.
