dynamic image dimensions

as you said in the docs its not possible, i even tried and went half way through…just one tiny piece missing. here my attempt:

        var images = [
              { src: "http://foo.com/bar.gif", w:0, h:0}
        ];
        var pswpElement = document.querySelectorAll('.pswp')[0];

        var options = {
            index: 0,
            showHideOpacity: true
        };

        var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, images, options);

        gallery.listen('imageLoadComplete', function(index, item) {
            var img = new Image();

            item.w = img.width;
            item.h = img.height;
        });

        gallery.init();

sadly it only works good for the lazyloaded images “left” and “right” but not for the current one requested. in my use case i cant encode the size into the filename as the images are thumbnailed to fit in a box (e.g. image 760+420 should fit in a box of 400x250) and i dont know the resulting dimension, i even dont care 😉. i dont want to make backend requests to get the size, thats not performant. as the example above is half way working i think its possible by PhotoSwipe itself (and it should be a feature anyway 😉 )

i think the easiest fix would be to start all displaying stuff after the event is done?

[dimsemenov]

Related section in FAQ.

In documentation there is an example on how to add or edit slides dynamically, see http://photoswipe.com/documentation/api.html (at the bottom). You may preload image, retrieve its size, and append (or replace) the dummy image.

Or if you have just 1 or 2 images, you can preload it, and only then initialize PhotoSwipe.

For now there are no plans to add such feature in core, as PhotoSwipe displays and animates image before it’s loaded.

[carl-jin]

i tried like this , its working for me

    // .......
      let items= [
              { src: ".....", w:0, h:0}
        ];
        let gallery = new PhotoSwipe(this.$pswpElement, PhotoSwipeUI_Default, items, options)
        gallery.listen('imageLoadComplete', function (index, item) {
          if (item.h < 1 || item.w < 1) {
            let img = new Image()
            img.onload = () => {
              item.w = img.width
              item.h = img.height
              gallery.invalidateCurrItems()
              gallery.updateSize(true)
            }
            img.src = item.src
          }
        })
        gallery.init()