search

AdamRisberg / react-image-magnifiers

A collection of responsive, image magnifying React components for mouse and touch.
MIT License
347 stars 60 forks source link

Request: Add the ability to set initial image position of Magnifier image in container #19

Closed kelexel closed 4 years ago

kelexel commented 4 years ago

We can already set the className and style props of the container element, which is pretty useful.

But if the container has a portrait orientation (height > width), while the Magnifier image is in landscape (width > height), then the image appears glued to the top of the Magnifier's container.

Could it be possible to set the initial position of the image ? Maybe using an imageClassName or imageStyle prop that would be passed all allong to the Image tag ?

Or maybe, if an external styling could conflict with the Magnifier code, could we imagine an initialImageOffsetX, initialImageOffsetY prop (value in percentages, to keep dynamic resizing support) ..?

Or should I be using the onImageLoad instead ...?

Thanks you !

AdamRisberg commented 4 years ago

I am assuming you are talking about the component named, “Magnifier” and that the image appearing glued to the top of the container is the preview image (the image displayed while not zoomed). If you’re using a different component or it’s actually the zoomed image stuck to the top, let me know.

The components are designed to function properly when their size is controlled by width (either manually setting width or allowing them to fill a parent element) and letting the height auto adjust to the preview image. If you are manually setting the height of the component (or allowing it to stretch vertically in a flex container), aside from the image being glued to the top, it will also break most calculations for the zoom functionality. The container needs to hug the preview image on all four sides. Since the container height not matching the preview image height breaks functionality, an offset feature probably won’t be helpful.

This can be fixed by removing any styling affecting the component’s height and controlling its size by width. If this doesn’t suit your needs, let me know exactly what you are trying to achieve (why the component needs a different orientation than the image), and maybe I can come up with a solution.