Zoom at most to original image's size about zooming HOT 5 CLOSED

I will take a look once I have time :)

from zooming.

Hey @p-4, I was about to reply to your email. Using data-zooming-width/height with zooming.js means the image will always be zoomed to those dimensions, no matter the window size. The reason it works on my website is because I'm using a modified script with the changes mentioned above.

I have the modified script at https://github.com/migueldemoura/migueldemoura.com/blob/master/_assets/javascripts/zoom.js, but I advise you to please wait for the PR #61 to be closed.

from zooming.

@kingdido999, I just skimmed the code and added this quick fix. The user must provide the original image's size via data-zooming-width/height.

calculateScale ()

//...
// Return the one that's smaller
var maxZoomingWidth = zoomingWidth / this.rect.width,
    maxZoomingHeight = zoomingHeight / this.rect.height
if (zoomingHeight && zoomingWidth &&
    scale > maxZoomingWidth || scale > maxZoomingHeight
) {
    return {
        x: maxZoomingWidth,
        y: maxZoomingHeight
    }
} else {
    return {
        x: scale,
        y: scale
    }
}

You'd need a control flag for this behaviour. I'm not using the other modes, hence why the condition looks like that.

Thanks for the plugin, appreciate it! 😄

PS: I can submit a PR, just tell me how you'd like this to be exposed to the user 😃!

from zooming.

Yes, PR is welcome! Regarding the implementation, I have a few thoughts on top of my head:

1. We might want to extend the existing option customSize so it accepts value in percentage. In this use case, customSize: ‘100%’, which means it should zoom into at most the original size.
2. We should be able to read the original image size in our program without having user specify them explicitly through data attributes.

Please feel free to bring up any concerns or questions :)

from zooming.

I am trying to implement this, although I have very limited coding experience.

After providing the original image size with:
<img src="./images/image_name_small.jpg" data-action="zoom" data-zooming-width="1080" data-zooming-height="428" data-original="./images/image_name.jpg" />

The image is zoomed at maximum to its original dimensions. Nice!

Although, when the browser window is smaller than these max width/height, then when the image is zoomed, the image is bigger than the actual visible browser window area.

Where would one put the code @migueldemoura posted?
Or how I could keep the image within the borders of the actual browser window?

from zooming.