AdamRisberg / react-image-magnifiers

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

Automatically zooms in place using custom layout components #16

Closed arso1er closed 4 years ago

arso1er commented 4 years ago

Hi,

First of all, thanks for this awesome package.

I'm using custom layout components and I'd like to automatically zoom in place when there's not enough room to display alongside (like with SideBySideMagnifier).

Thanks.

Edit: Actually, I think a zoom in place based on breakpoint specified by user would be even better.

AdamRisberg commented 4 years ago

I'll look into this. Unlike the SideBySideMagnifier, the custom layout components are loosely coupled and don't control their own size or positioning. That control is given up to the developer in order to be more flexible. So, right now, I'm not sure if I can add that feature. I'll let you know once I figure it out.

Worst case scenario, if I can't come up with a good way to do it, you may have to add a feature to your app that switches between different magnifier components based on screen size.

arso1er commented 4 years ago

OK. Thanks for your answer.

AdamRisberg commented 4 years ago

I figured out a way to support both features, an auto in place (for when there isn't enough room) and a min width breakpoint (for activating in place mode based on screen size).

These features, and the one from your other issue, will be in the next update. I should be posting it in the next 24 hours. I'll let you know when it's up.

arso1er commented 4 years ago

Terrific! Thanks for your promptness.

AdamRisberg commented 4 years ago

I just published the update to NPM (version 1.3.0). It has both features I mentioned for the custom layout components, as well as some additional styling options. Plus, there are new features added to the SideBySideMagnifier that can make it work similar to Amazon (filling available space). This can be seen on the demo site.

arso1er commented 4 years ago

It's working great! Thanks.