nanostudio-org / nanogallery2

a modern photo / video gallery and lightbox [JS library]
https://nanogallery2.nanostudio.org
761 stars 112 forks source link

Images only partially loaded / cutoff / cropped #399

Open CarlAmbroselli opened 1 year ago

CarlAmbroselli commented 1 year ago

For large image files (i.e. mine are >3000px per dimension), the fullscreen view can sometimes only load a part of the image and then cut it off on mobile Safari. Waiting does not solve this, back and forth also doesn't solve it, only the workarounds listed below. This does not happen for all images, but it happens esp. frequent for large images.

Screenshot (I cut off the bottom of the thumbnails since these are private photos, only the main image is cropped):

Bonus, converting all your .jpg images in a folder to an interlaced version (that's what I've used): for i in $(ls *.jpg); do docker run --entrypoint=convert --rm -v $(pwd):/img dpokidov/imagemagick /img/$i -interlace Plane /img/interlaced/$i; done

I've attempted something like the following, but it creates an ugly flicker (when switching to 100% height for 50ms) and only works in 90% of the cases:

  <script>
    let fixed = []
    window.setInterval(() => {
      pic = document.querySelector('.nGY2ViewerMediaPan.imgCurrent > .nGY2ViewerMedia')
      if (pic && fixed.indexOf(pic.src) === -1) {
        fixed.push(pic.src)
        $(pic).on('load', function() { 
              let current = document.querySelector('.nGY2ViewerMediaPan.imgCurrent > .nGY2ViewerMedia')
              fixed.push(current.src)
              current.style.height = "100%"
              let handle = current
              window.setTimeout(() => {
                handle.style.height = (handle.naturalHeight / handle.naturalWidth) * handle.width + "px"
              }, 50)
            })
          }
    }, 200)
  </script>