Support choosing the best image to zoom (formerly "zoomImg") from a source set or something

[rpearce]

No description provided.

[IngusK]

How can I style Zoomed image in v4? It scales waay too large now! v4 looks quite bad now. Will downgrade back.

[rpearce]

@IngusK v4 was a little bit too ambitious. I'm currently working on a continuation to v4 that may turn into a v5 that will fix this issue.

v4 looks quite bad now.

Please remember to try to be kind. I work on this in my spare time for other people for free.

[rpearce]

FYI I'm almost done completely rewriting this library into:

1. a vanilla JS package that is ~3kb (minified & gzipped)
2. a react hook that uses 👆 and is maybe 100-150 bytes

This and all the other issues should be closed out by it. I'm almost there (working out some API stuff).

Thanks for your patience

[ismay]

I've tried out v5-rc.10 and it's worked well for me (v4 caused an issue with the SSR but v5 seems to not have any SSR issues at all). About the responsive image part, I was thinking that maybe it'd be simpler for this lib to not bother with the images directly, but instead provide the means for the user to deal with this.

For example: I'm personally using next.js, and their (responsive) image component. I'm using a resize observer to detect changes to the size of the image, and setting that to the sizes attribute, so that the correct image size is loaded. Now a resize observer doesn't respond to css transforms, like the ones this lib uses. So I wonder if just having a callback from this lib that's called whenever the zoom has finished zooming (like onTransitionEnd) would be enough. With that, maybe I could just trigger another measure, and update the size.

Or, since I assume that react-medium-image-zoom is already aware of the width of the zoomed element; if you'd pass the size of the zoomed element down to the user via the hook, the user could use that to update the sizes attribute of a responsive image (or swap out for another set of more detailed images for example).

Hope that helps. Let me know if you have any question about the usecase, or if there's anything else I can do to help!

[rpearce]

(For anyone who hasn't seen this who is wondering where v5 is: #274)

@ismay The API / how it works for v5 is still up in the air with only a few things that are 100% going to be there:

• leverage everything about an img we can (easy to do with img.currentSrc to get the currently selected image that is chosen by the browser based on all those factors)
• this must work well on iOS (I have to invert the scaling logic to increase the image's size to the maximum is can grow and scale it down instead of simply scaling it to the maximum size)
• optional way to add a high resolution image that is swapped into place on zoom
• make calls to optional event callbacks every time a state change happens, as well as when they complete
• can't think of the rest off the top of my head, but they're obvious ones

If you have ideas that can fit within those requirements that you can sketch in code, I'm happy to read and think through it with you! I guess what I'm asking is: can you show me an example of your perfect world usage of this where it just gets out of the way, and you don't have to think about it?

[ismay]

@ismay The API / how it works for v5 is still up in the air with only a few things that are 100% going to be there:

leverage everything about an img we can (easy to do with img.currentSrc to get the currently selected image that is chosen by the browser based on all those factors)
this must work well on iOS (I have to invert the scaling logic to increase the image's size to the maximum is can grow and scale it down instead of simply scaling it to the maximum size)
optional way to add a high resolution image that is swapped into place on zoom
make calls to optional event callbacks every time a state change happens, as well as when they complete
can't think of the rest off the top of my head, but they're obvious ones

If you have ideas that can fit within those requirements that you can sketch in code, I'm happy to read and think through it with you! I guess what I'm asking is: can you show me an example of your perfect world usage of this where it just gets out of the way, and you don't have to think about it?

I see, thanks for explaining. Yeah to be honest, my implementation is still in flux. The above is just what I noticed at the time whilst trying out v5. I wonder if my usecase is too specific to fit in this library, as it's also a little coupled to the way I'm using responsive images. Once I've finished it, I'll see if I can reduce it to something a little more generic that might be of use here 🤔.

[rpearce]

Works for me. I want SSR and tools like Gatsby/Next.js and whatever to be able to easily work with it, and the ref stuff may not be doable with these ecosystems, so it'd be nice to get others' perspectives (like yours).

I'll keep an eye out if you get other ideas!

[SatalBill]

How can style zoomed image? It is showing on the outside of the window. I can see only 10% of the zoomed image.

[rpearce]

@SatalBill that doesn't sound like it's related to this issue, but if you make a new issue with an example that demonstrates the problem, I will see if I can help

[surjithctly]

I was looking to change the zoomed image to a higher-quality image. Found this thread.

Is it available already? I can see this issue is open.

The current issue (using Next.js)

• Next/Image compresses images to make it only download the required size to speed up the loading.
• This causes this plugin to zoom in to a blurred image.

Expectation:

• The above effect stays the same. Zoom in to blurred image
• Then a network request loads the high-quality image
• In reality, this should happen while clicking.
• So high bandwidth users never see the blurred one.

Thank you so much for putting together this plugin. It's so simple and useful.

[ismay]

Works for me. I want SSR and tools like Gatsby/Next.js and whatever to be able to easily work with it, and the ref stuff may not be doable with these ecosystems, so it'd be nice to get others' perspectives (like yours).

I'll keep an eye out if you get other ideas!

Just fyi, in the end this is the approach I went with: https://github.com/ismay/superwolff/tree/main/components/image-zoom. Worked well for me (using it with next.js' image so @surjithctly might be able to use it as well). The method used also fixes this warning: #265 and should address this as well: #281. I hope it can be of use to you.

Everything related to the component is in the image-zoom folder. I've outsourced as much as possible to the browser, so most of what it's doing is just toggling classes and setting css variables.

[rpearce]

I'm actively working on a different v5 here (see the v5-dev branch for evidence of that), and it will also include zooming a higher quality image (not yet re-implemented).

That said, if there's another solution out there for you, go for it. I'll of course update this issue (and close it) when it's available.

Note: v3 of this project used to do that, and we will again!

[rpearce]

For anyone keeping tabs, here's an update on the work: #274 (reply in thread)

If anybody has a suggestion on the API for providing a larger image, please share your thoughts.

Options at present:

1. The simplest thing would be to pass a zoom image source to the Zoom component as a prop. This would probably solve it for the majority of people.
2. Alternatively, I could parse the srcset and sizes and try to cleverly find the largest image.

Number 1 feels like the simplest, clearest option to getting something out there. Number 2 feels like it leverages the web platform's native behavior, but I'd have to take on reproducing that behavior and extending it to find the largest version (or just the appropriate version).

As I write this... here's a thought: number 1 gives the component consumers the ability to choose, themselves, what image gets swapped in on zoom, so they could do this themselves based on screen size.

I think I just talked myself into number 1. Thanks, rubber 🦆s! What do y'all think?

[surjithctly]

Option 1 would be the simplest for everyone.

[rpearce]

Rock on. Thanks for the quick 👀

[rpearce]

Hi! Just dropping a video update on this feature that's happening in the v5-dev branch.

rmiz-zoom-img.mp4

[rpearce]

If anyone finds some spare time and wants to give the latest build a whirl to try this out:

npm i --save react-medium-image-zoom@5.0.0-beta2.8

And, if you aren't already,

import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

// ... your other code

<Zoom>
  <MyImage />
</Zoom>

The updated v5-dev README is here, and there are some breaking changes to the extra options passed to be aware of, if you're using the options.

Thanks for your time!

[rpearce]

Should be closed now with the release of 5.0.0

[jeremyzilar]

Thank you!