search

ethanselzer / react-image-magnify

A responsive image zoom component designed for shopping sites.
https://ethanselzer.github.io/react-image-magnify
MIT License
643 stars 160 forks source link

Image rotation? #26

Open den1k opened 6 years ago

den1k commented 6 years ago

Is there any way to rotate the image? I had a few attempts in CSS transform rotate and the problem was that the magnifier box always rotated with the image.

ethanselzer commented 6 years ago

Hi @den1k - Unfortunately, image rotation is not a supported feature of react-image-magnify. Sorry about that. I think it is possible to rotate the initial image using the imageClassName prop, but the enlarged image uses transform internally and does not allow for augmenting the transformation. I think the only way to rotate the enlarged image would be to rotate its container using enlargedImageContainerClassName or enlargedImageContainerStyle. Note that unless your images are square, rotation may interfere with the position of the lens and enlarged image elements.

den1k commented 6 years ago

Yes, I tried it all. And the only reason I made the issue is that after 2h of trying I couldn't get to a satisfactory result. The viewer would either rotate with the image or "not understand" that the image has been rotated and then the lens area didn't represent the enlarged image. I don't mean to add rotation as a UI element, but it would be nice to allow to let us rotate the image programmatically. At least in my experience, this is a very common use case. Thanks for this lib!

On Tue, Mar 6, 2018 at 1:57 AM Ethan Selzer notifications@github.com wrote:

Hi @den1k https://github.com/den1k - Unfortunately, image rotation is not a supported feature of react-image-magnify. Sorry about that. I think it is possible to rotate the initial image using the imageClassName prop, but the enlarged image uses transform internally and does not allow for augmenting the transformation. I think the only way to rotate the enlarged image would be to rotate its container using enlargedImageContainerClassName or enlargedImageContainerStyle. Note that unless your images are square, rotation may interfere with the position of the lens and enlarged image elements.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ethanselzer/react-image-magnify/issues/26#issuecomment-370682998, or mute the thread https://github.com/notifications/unsubscribe-auth/AEb7Iulls06B60RvHvUTOIicYX-_ZnCyks5tbjNbgaJpZM4SdkYX .

ethanselzer commented 6 years ago

@den1k - Thanks for the information. Sorry you were not able to achieve the results you want. I'd like to better understand your user case for react-image-magnify. What type of application or feature are you building with it?

den1k commented 6 years ago

It's a grid view of user-submitted images. Therefore the rotation is sometimes incorrect.

ethanselzer commented 6 years ago

@den1k - Thanks for the explanation. It's helpful for me to understand how the project is being used. I think the focus of react-image-magnify is shopping site detail pages, where image rotation may not be a high priority. I'll put support for image rotation in the backlog, but I'm not sure right now where it fits in the overall strategy of the project.

SpringsTea commented 6 years ago

I'm also trying to put rotation into this. I'm achieving this just with css:

style:{transform: 'rotate(${rotate}deg)'}

Where I increment rotate when the image is clicked. Works well, both the small and large images rotate as expected. The only probably is the hover controls don't keep up. So hovering your cursor downwords will pan the large image upwards if the image is upside down.

All it would really need is an option to change which axis get moved on hover. Maybe there would also be another use for an option like that.

jothi-pyt commented 4 years ago

It's a grid view of user-submitted images. Therefore the rotation is sometimes incorrect.

I have a similar use-case which requires having an image rotation. Is there any update on this?