Photoswipe image size/ratio

I'm using a Laravel website, including Photoswipe. Here's my problem: When I click on a photo, it pops up with a predefined height and width (in my case 764X480). I'd like my photos to open with their original ratio, not with a predefined (as I have some panoramas). Is there a way to fix that? And is it possible to set another size? You can check the behaviour on http://www.pixelkomando.com/paysages

Edit

I wrote a small wrapper in jQuery for those who do not want to deal with "coding" (ironic)

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

Original Answer

Unfortunately PhotoSwipe does not have an option to auto detect image dimensions. It's not a bug or a missing feature. It's authors preference, to keep it small and clean pure javascript code. Author's suggestions are here http://photoswipe.com/documentation/faq.html

You may try this. (Source: https://github.com/dimsemenov/PhotoSwipe/issues/796)

var items = [ 
  { src: 'http://........', w:0, h:0 },
  { src: 'http://........', w:0, h:0 }
];

var gallery = new PhotoSwipe( ..... );
gallery.listen('gettingData', function(index, item) {
        if (item.w < 1 || item.h < 1) { // unknown size
        var img = new Image(); 
        img.onload = function() { // will get size after load
        item.w = this.width; // set image width
        item.h = this.height; // set image height
           gallery.invalidateCurrItems(); // reinit Items
           gallery.updateSize(true); // reinit Items
        }
    img.src = item.src; // let's download image
    }
});
gallery.init();

I personally haven't tested it but author kind of approve it by commenting below the code. There ore some other solutions from developers on their github page under Issues tab.

Also you have couple of other options too

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.