magnified image not displayed correctly if component is not visible when first mounted

[tojvan]

Hello Ethan,

Great work on this library! I'll be happy to provide a fix if you think this is a legit issue. In short, the issue is that the enlarged image does not appear correctly if our component is placed within other UI that has hidden the component when it is first mounted (via display:none on an ancestor DOM element).

• I've got rim components embedded within an Accordion Component. I have enlargedImagePosition: 'over' . I think Accordion is using display:none and block to toggle visibility of content.
• When the page loads, the smallImageEl/img element has offsetWidth and offSetHeight of 0. As a result, the enlarged image dimensions are also zero and remain there, even when the rim component is finally displayed (by using the Accordion).
• I suspect this is because 'componentDidMount' in ReactImageMagnify.js doesn't get called when the rim component comes into view. I tried to force matters by calling setSmallImageDimensionState when the user clicks to expand an Accordion element but it doesn't help, probably because the event gets called before the offset dimensions of the img element have updated.

Before thinking of other ways to trigger setSmallImageDimensionState, I should ask if this is user error on my part...

[ethanselzer]

Hi @tojvan - Thanks for the detailed explanation of your issue. I'm wondering what happens if you provide width and height props on the small image object, like this. Do you get something closer to the result you are looking for?

[tojvan]

thanks for the response! does not seem to make a difference. confirmed that the props were being set (via Inspect --> React) but the div that gets created on hover still had 0px width and height.

i've been wondering if it'd be appropriate to call setSmallImageDimensionState on hover for situations like this. we could put the call behind a new property such as setSmallImageDimensionsOnHover. when it's true, we would only call setSmallImageDimensionState on hover and not on mount (and keep the call on window-resize in either case).

[ethanselzer]

Hi @tojvan - I'm surprised you have zero height when configuring small image dimensions. Something I neglected to write in my previous post is to remove or set false the small image property isFluidWidth. When isFluidWidth is set false, small image dimensions are read from the small image props. Please let me know your findings. Thanks!

[tojvan]

@ethanselzer, that restores the zoom function, thanks. i'll have to think about layout some more, however. the images being zoomed are dynamically fetched and will have different aspect ratios. that, and responsive...

[ethanselzer]

@tojvan - Thanks for the feedback. It may be possible to invoke setSmallImageDimensionState by setting a ref on ReactImageMagnify and then using it in your parent component like this myRef. setSmallImageDimensionState().

[TuTran21]

Hi, I came here encountering the same issue. Any work arounds available? Setting small image fluid to false makes the large image goes giant, and zoom now works, but it pops up a very large image on the side.

Edit: Using visibility: hidden and visible instead of display: none will do the trick if that's an available option for you guys until the official fix is released. Thanks for an awesome component

[zbaig]

I found a solution in my case where I had <ReactImageMagnify> inside a map of images setting a new key on click on rim https://reactjs.org/docs/reconciliation.html#keys

const [activeIndex, setActiveIndex] = useState(0)
{map(images, (image, idx) => (
<ReactImageMagnify key={idx + activeIndex} {...{
            smallImage: {
              alt: 'main',
              isFluidWidth: true,
              src: image,
            },
            largeImage: {
              src: image,
              width: 1500,
              height: 1500,
            },
            shouldUsePositiveSpaceLens: true,
          }} />
))}

I am sure you can find a solution to remount in your case.