PrettyPhoto does not resize images correctly (messes up the aspect ratio in some cases)
  • There is a bug in the way prettyPhoto resizes images, that sometimes leads to images being rendered with incorrect aspect ratios, when using the resize feature. The bug is in the _fitToViewport function, and i'll try to describe it as accurately as I can.

    Function definition:
    "function _fitToViewport(width,height) {...}"

    On the first run _fitToViewport is called when a preload image is loaded, with image dimensions as the parameters. Also, in the function you assume the params were the width and height of the image.

    "_fitToViewport(imgPreloader.width,imgPreloader.height);"
    "imageWidth = width, imageHeight = height;"


    Then there is this piece that does the actual resizing, which is where the bug is.

    while (!fitting){
    if((pp_containerWidth > windowWidth)){
    imageWidth = (windowWidth - 200);
    imageHeight = (height/width) * imageWidth;
    }else if((pp_containerHeight > windowHeight)){
    imageHeight = (windowHeight - 200);
    imageWidth = (width/height) * imageHeight;
    }else{
    fitting = true;
    };

    pp_containerHeight = imageHeight, pp_containerWidth = imageWidth;
    };

    _getDimensions(imageWidth,imageHeight);

    if((pp_containerWidth > windowWidth) || (pp_containerHeight > windowHeight)){
    _fitToViewport(pp_containerWidth,pp_containerHeight)
    };


    So what happens:
    ----------------
    - You enter the _fitToViewport with image dimensions as parameters
    - The while loop reduces the image size until it fits into the viewport
    - Space required by the rest of the prettyPhoto dialog UI is added to the image size with _getDimensions()
    - If the image+ui size is now too large to fit into viewport, the function calls itself with _fitToViewport(pp_containerWidth,pp_containerHeight);
    - Width and height params for the function are no longer image sizes, it's instead the size of the entire UI
    - The while loop reduces the image size until it fits into the viewport, BUT -- this time it's using the shape of the space required by the UI to calculate the image size! --> Aspect ratio gets messed up



    You can reproduce the bug with any image by resizing your browser window until it fits into the criteria. (has to be just right size so that the recursive _fitToViewport is called).


    Here's my suggestion to fix the while loop so that it works correctly. This should further be optimized as ideally the _getDimensions() funtion only really needs to be called once:


    while (!fitting){
    if((pp_containerWidth > windowWidth)){
    imageWidth = (windowWidth - 200);
    imageHeight = (height/width) * imageWidth;
    }else if((pp_containerHeight > windowHeight)){
    imageHeight = (windowHeight - 200);
    imageWidth = (width/height) * imageHeight;
    }else{
    fitting = true;
    };
    pp_containerHeight = imageHeight, pp_containerWidth = imageWidth;
    _getDimensions(pp_containerWidth, pp_containerHeight);
    };

    Also comment out the following:

    if((pp_containerWidth > windowWidth) || (pp_containerHeight > windowHeight)){
    _fitToViewport(pp_containerWidth,pp_containerHeight)
    };


    I hope this gets fixed in the distribution really soon, I already got complaints about "long men" effect, like watching old westerns from tape..
  • I updated in the next post!
  • // Vladimir version - larger lightbox, some case still bad aspect ratio
    while (!fitting){
    if((pp_containerWidth > windowWidth)){
    imageWidth = (windowWidth - (pp_containerWidth - imageWidth) - 100);
    imageHeight = (imageWidth/width)*height;
    }else if((pp_containerHeight > windowHeight)){
    imageHeight = (windowHeight - (pp_containerHeight - imageHeight) - 50);
    imageWidth = (imageHeight/height)*width;
    }else{
    fitting = true;
    };
    pp_containerHeight = imageHeight, pp_containerWidth = imageWidth;
    };
    _getDimensions(imageWidth,imageHeight);

    if((pp_containerWidth > windowWidth) || (pp_containerHeight > windowHeight)){
    _fitToViewport(pp_containerWidth,pp_containerHeight)
    };

    If you want to combine both, little bit larger picture and better aspect ratio:
    while (!fitting){
    if((pp_containerWidth > windowWidth)){
    imageWidth = (windowWidth - (pp_containerWidth - imageWidth) - 100); \\ orig. -200
    imageHeight = (height/width) * imageWidth;
    }else if((pp_containerHeight > windowHeight)){
    imageHeight = (windowHeight - (pp_containerHeight - imageHeight) - 50); \\ orig. -200
    imageWidth = (width/height) * imageHeight;
    }else{
    fitting = true;
    };
    pp_containerHeight = imageHeight, pp_containerWidth = imageWidth;
    _getDimensions(pp_containerWidth, pp_containerHeight);
    };

    If I must choose between Vladimir and jinxdone, the jinxdone is better.
    Sure there is a better algorithm, please post it here if you find it.

    BTW this is for extreme case, beware if there is long description you must apply the protection of long description.
  • Dear dRachmad and Jinxdone. Thanks for these codes, it seems to work but now Im worried about Jinxdone last comment (meaning that the algorithm is not perfect). Is there any progress on this issue? Or is this the way how everyone goes around this issue?? Thanks
  • Neither of these work for me :o(
  • Bumping the thread up as it is now the 4th quarter of 2013 and the issue apparently has not been resolved (I'm experiencing it as well).
  • With v.3.1.5 I still experiencing same problem when running in Google Chrome. In IE and Firefox it works now.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter