Photoswipe image size/ratio

Question

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

Answer 1

Just put in the CSS "object-fit: contain":

.pswp img {
    max-width: none;
    object-fit: contain;
}

It will solve your problem

Answer 2

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.

Answer 3

As Marko stated

.pswp img {
    max-width: none;
    object-fit: contain;
}

It works well and but I would add !important to the object-fit property.

Also if you don't want the to use a placeholder image then add the following because it will hide the black/grey box that appears around the image before the size gets recalculated.

.pswp__img--placeholder--blank{
    display: none !important;
}