I suggest you ...

Cropped Thumbnail Bounds

I've seen a number of threads where people explain the issues when image thumbnails are cropped. I created a get Thumbnail Bounds function, which will simply calculate the bounds, as though the image were not cropped.

getThumbBoundsFn: function(index) {
var thumbnail = ITEMS[index].el,
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
offset = thumbnail.offset(),
width = thumbnail.innerWidth(),
height = thumbnail.innerHeight(),
thumbRatio = height / width,
origRatio = ITEMS[index].h / ITEMS[index].w,
cropped = thumbRatio / origRatio;
return {
x: offset.left - ( cropped > 1 ? ( width * cropped - width ) / 2 : 0 ),
y: offset.top - ( cropped < 1 ? ( height / cropped - height ) / 2 : 0 ) + pageYScroll,
w: width * ( cropped > 1 ? cropped : 1 )
};
}

In order to then prevent the cropped placeholder image from being stretched to fit the new bounds, we need to replace it with a div, where the background image is the placeholder src, and it's size is set to contain. This ensures that both images will maintain the same aspect ratio, as well as overlap nicely by the time the large image finishes loading.

3 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    ShaunShaun shared this idea  ·   ·  Admin →

    1 comment

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • ShaunShaun commented  · 

        I was able to replicate this by changing items-controller.js, and/or the relevant distribution files, however, I have been unable to determine how to do this using either the supplied functions or listeners.

        items-controller.js
        - Change line 429 from 'img' to 'div'
        429:-: var placeholder = framework.createEl(placeholderClassName, item.msrc ? 'img' : '');
        429:+: var placeholder = framework.createEl(placeholderClassName, item.msrc ? 'div' : '');
        - Change line 431 from .src to .backgroundImage
        431:-: placeholder.src = item.msrc;
        431:+: placeholder.style.backgroundImage = 'url(' + item.msrc + ')';

        Then just add the remaining styles:
        .pswp__img--placeholder {
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        }

      Feedback and Knowledge Base