Thoughts on handling a responsive (mobile + desktop) page?

[nathanziarek]

I know an issue isn't the right forum for this (if there is one, please let me know!), but I really like this component, and would like to see if anyone is using it on a responsive page.

My ideal scenario would be to have the widget support touch + mouse, and basically choose whether it has the space to display "beside" (and if not, switch to "over").

I'm wondering if this has been considered or (hopefully!) tackled yet?

[ethanselzer]

Hi @nathanziarek,

Thanks for opening this issue. Unfortunately, I don't know of any examples of react-image-magnify that address the use case you describe. However, I have been thinking about supporting a responsive story and I'm interested in the vision you propose. Would you also like to see the small image fill one hundred percent of the width of its container so that it could be part of a fluid strategy?

[coleturner]

Currently using react-image-magnify on a project that's soon to be released. When concerned with mobile, having the small image be responsive - filling the parent container (or having max-width 100%) would be valuable so that it does not overflow.

edit: The current manner in which I am facilitating responsive display is by calculating the viewport width and changing my smallImage dimensions to not exceed the width.

[ethanselzer]

Hi @colepatrickturner,

Thanks for commenting. I appreciate your support for a fluid width small image story. I think this is the highest priority for the project at this time. I will get to work on it!

I'm glad to hear you are using react-image-magnify. Please consider starring the project. It helps increase the user base, which brings more ideas to the table.

Thanks again! Ethan

[coleturner]

Thank you Ethan, this package is a god-send.

Here's my current implementation: https://www.thehunt.com/the-hunt/3SXf4f-suit-case---duffle-bag-

And here's how I'm handling it responsively:

    const largeImage = {
      alt: this.props.zine.title,
      src: this.props.zine.image_url,
      width: this.props.zine.image_width,
      height: this.props.zine.image_height,
    };

    const smallImage = {
      alt: this.props.zine.title,
      src: this.props.zine.feed_image_url,
      width: this.props.zine.feed_image_width,
      height: this.props.zine.feed_image_height,
    };

    const responsiveImage = Object.assign({}, largeImage);
    if (this.state.maxImageWidth && this.state.maxImageWidth < responsiveImage.width) {
      responsiveImage.height = (this.state.maxImageWidth / responsiveImage.width) * responsiveImage.height;
      responsiveImage.width = this.state.maxImageWidth;
    }

I apply responsiveImage to the smallImage property for MagnifyTouch. When the window is resized I set this.state.maxImageWidth to window.innerWidth so that the image is scaled down.

Ideally this sort of thing is best handled with CSS, generally I prefer implicit dimensions like setting img { max-width: 100%; height: auto; } thought I am not sure if that's breaking other use cases.

[nathanziarek]

Would you also like to see the small image fill one hundred percent of the width of its container so that it could be part of a fluid strategy?

I think my answer to this would be "yes", although maybe I need to dive into react-image-magnify some more to see what styling it is providing vs what styling I'm providing.

There is a non-react tool (Magic Zoom) that is pretty close to what I'm envisioning.

1. Supports hover (or click) as well as touch. (From an interaction standpoint, I prefer your touch-and-hold model, but haven't tested with users yet—they tell me what I actually like :))

2. It doesn't style the small image, but it uses its size and location on the page to determine whether it places the zoomed image on-top or on-the-side.

3. I think it reacts too quickly to leaving the 'hover' area, but that's a nitpick (even for me).

I've been looking at the sub components of react-image-magnify and it seems like all the pieces are there ... I'm just far too new to React to fully understand how to rearrange them!

[ethanselzer]

@colepatrickturner - thehunt.com looks really cool! Thanks for sharing a link. I'm glad you were able to create a solution for fluid width small images.

A new version of react-image-magnify has been released. It includes support for fluid width small images and the sizes attribute of the img element. The documentation has been updated and there are code examples in the example project directory.

If you decide to upgrade, please let me know if you have questions or concerns.

Thanks again for your input, and for starring the project, I really appreciate it!

[ethanselzer]

@nathanziarek, Thanks for the link to Magic Zoom. I will check it out and see what I can learn from their work.

In your original post you wrote about support for a single component for both touch and pointer environments. I think this will be the next feature added to react-image-magnify. I will post back here with status sometime soon.

Thanks for opening this issue. It has been very informative for me, and I think it will help improve the project!

[coleturner]

Great work! Can't wait to try it thank you.

[ethanselzer]

Update: Support for touch and mouse environments in a single component made a significant step forward with the release of a new version of a core dependency. I'll post future updates in this thread.

[ethanselzer]

Update: With the release of v2.0.0, touch and mouse environments are now supported in a single component. Please see the release notes for upgrade information.