adamrisberg/react-image-magnifiers

A collection of responsive, image magnifying React components for mouse and touch.

react-image-magnifiers

A collection of responsive, image magnifying React components for mouse and touch. Useful for product images in ecommerce sites, image galleries, stock photos, etc.

Magnifier components:

• Magnifier: Can be zoomed in/out by click, double click, tap, double tap, or long touch. Click/touch and drag to move around the image while zoomed in. Alternate mode moves around the image via hover or touch/slide.
• GlassMagnifier: Simulates a magnifying glass. Includes offset options for use with touch (so the user's finger doesn't block the magnifying glass).
• SideBySideMagnifier: Displays a zoomed in view of the image on hover/touch alongside the small version. Automatically zooms in place when there's not enough room to display alongside.
• PictureInPictureMagnifier: Displays a small preview image with a zoom area preview box in the corner of the component. User can move the preview box around to change the portion of the enlarged image to display.

Custom layout components

The following components can be used together to create more advanced magnifier layouts. These components can be styled to be any size/shape. The MagnifierPreview and MagnifierZoom must be within the same MagnifierContainer, but do not need to be siblings in the hierarchy of children. For example...

<MagnifierContainer>
  <div className="example-class">
    <MagnifierPreview imageSrc="./image.jpg" />
  </div>
    <MagnifierZoom style={{ height: "400px" }} imageSrc="./image.jpg"/>
</MagnifierContainer>

Note: The MagnifierZoom component will initially have zero height. Its only content uses absolute positioning. Therefore, height must be set with styling (className and/or style props, flex parent, etc).

• MagnifierContainer: Links the MagnifierPreview and MagnifierZoom components together.
• MagnifierPreview: Displays the interactive preview image.
• MagnifierZoom: Displays the zoomed view of the image.

Demo

Visit the react-image-magnifiers demo site.

Installation

npm install --save react-image-magnifiers

Basic Usage

import {
  Magnifier,
  GlassMagnifier,
  SideBySideMagnifier,
  PictureInPictureMagnifier,
  MOUSE_ACTIVATION,
  TOUCH_ACTIVATION
} from "react-image-magnifiers";
...

<GlassMagnifier
  imageSrc="./image.jpg"
  imageAlt="Example"
  largeImageSrc="./large-image.jpg" // Optional
/>

<Magnifier
  imageSrc="./image.jpg"
  imageAlt="Example"
  largeImageSrc="./large-image.jpg" // Optional
  mouseActivation={MOUSE_ACTIVATION.DOUBLE_CLICK} // Optional
  touchActivation={TOUCH_ACTIVATION.DOUBLE_TAP} // Optional
/>

Note: The zoom level of all components depends on the rendered size difference between the small and large versions of the image. On all components, the zoom functionality will be disabled if the large image size is <= to the small image's current rendered size.

Common Props

Excluding MagnifierContainer, MagnifierZoom, & MagnifierPreview.

imageSrc is the only required prop.

cursorStyle: Accepts any valid CSS cursor. Default: Magnifier - "zoom-in", GlassMagnifier - "none", SideBySideMagnifier - "crosshair", PictureInPicture - "crosshair". Type: string.

imageSrc: Passed to the src of the small image (not zoomed). Also used for the large image (zoomed) if no largeImageSrc is set. Also accepts an array of image paths in case fallbacks are required. Each image path in the array will be tried in order until either one loads, or the end of the array is reached. Type: string or array of strings, Default: "".

largeImageSrc: Passed to the src of the large image (zoomed). Also accepts an array of image paths in case fallbacks are required. Each image path in the array will be tried in order until either one loads, or the end of the array is reached. Type: string or array of strings, Default: "".

imageAlt: Passed to the alt of both images.

style: Passed to the style of the parent div.

className: Passed to the className of the parent div.

renderOverlay: Render prop for custom overlays. The render prop function will get called with a single boolean representing the active state. Be sure to use absolute position on your content to avoid changing the size/layout of the magnifier component, which would interfere with the functionality. Default: null, Type: function.

onImageLoad: Passed to the onload of the small image (not zoomed).

onLargeImageLoad: Passed to the onload of the large image (zoomed).

onZoomStart: Callback to be executed on zoom start. Type: function.

onZoomEnd: Callback to be executed on zoom end. Type: function.

Magnifier Props

mouseActivation: Sets the mouse method for zooming in/out. Accepts: "click" or "doubleClick". Can also import the MOUSE_ACTIVATION constants to assist. Type: string, Default: "click".

touchActivation: Sets the touch method for zooming in/out. Accepts: "tap", "doubleTap", or "longTouch". Can also import the TOUCH_ACTIVATION constants to assist. Type: string, Default: "tap".

cursorStyleActive: Cursor style while the component is in an active (zoomed in) state. Accepts any valid CSS cursor. Type: string, Default: "move" while dragToMove is active, otherwise "zoom-out".

dragToMove: Movement of the image, while zoomed in, requires a click/touch drag gesture. Type: boolean, Default: true.

interactionSettings: Settings to fine tune the mouse and/or touch settings. Accepts an object with any of the following properties:

• tapDurationInMs: Sets the maximum length of touch events in order to be considered tap gestures. Type: number, Default: 180.
• doubleTapDurationInMs: Sets the minimum length of time in which two tap gestures must be performed in order to be considered a double tap gesture. Type: number, Default: 400.
• longTouchDurationInMs: Sets the minimum length of touch events in order to be consider a long touch gesture. Type: number, Default: 500.
• longTouchMoveLimit: Sets the maximum movement allowed during a long touch gesture. Type: number, Default: 5.
• clickMoveLimit: Sets the maximum movement allowed during a mouse click. Helps to differentiate between a drag and click. Type: number, Default: 5.

GlassMagnifier Props

allowOverflow: Allows the magnifying glass to spill out over the edges of the component. Type: boolean, Default: true.

magnifierBorderColor: Color of the magnifying glass border. Accepts any valid CSS color. Type: string, Default: "rgba(255,255,255,.5)".

magnifierBorderSize: Size of the magnifying glass border in px. Type: number, Default: 3.

magnifierBackgroundColor: Background color of the magnifying glass. Can only be seen when overflow is allowed and the magnifying glass is at the edge of the image. Accepts any valid CSS color. Type: string, Default: "rgba(225,225,225,.5)".

magnifierOffsetX: Horizontal offset of the magnifying glass from the mouse/touch position. Type: number, Default: 0.

magnifierOffsetY: Vertical offset of the magnifying glass from the mouse/touch position. Type: number, Default: 0.

magnifierSize: Size of the magnifying glass in px or %. Type: string (must include "px" or "%") or number, Default: "25%".

square: Square magnifying glass. Type: boolean, Default: false.

PictureInPictureMagnifier Props

cursorStyleActive: Cursor style while click dragging to move preview box. Accepts any valid CSS cursor. Type: string, Default: If not provided, the cursorStyle is used.

previewHorizonalPos: Horizontal alignment of the small preview image. Accepts "left" or "right". Cannot change during runtime unless the component is reloaded, see the example project on github for a workaround. Type: string, Default: "left".

previewVerticalPos: Vertical alignment of the small preview image. Accepts "top" or "bottom". Cannot change during runtime unless the component is reloaded, see the example project on github for a workaround. Type: string, Default: "bottom".

previewOpacity: Sets the opacity of the small preview image. Accepts a number between 0 and 1. Type: number, Default: 0.8.

previewOverlayBoxOpacity: Sets the opacity of the white box (representing the zoom area) within the small preview image. Accepts a number between 0 and 1. Type: number, default: 0.8.

previewOverlayBackgroundColor: Sets the color of the dark overlay (representing the area not shown during zoom). Accepts any valid CSS color. Type: string, Default: #000.

previewOverlayBoxColor: Sets the color of the white box (representing the zoom area) within the preview image. Accepts any valid CSS color. Type: string, default: #fff.

previewOverlayBoxImage: Used to add a background image to the white box (representing the zoom area) within the preview image. Accepts an image src path. Type: string, default: "".

previewOverlayBoxImageSize: When using overlayBoxImage, this can be used to change the size of the background image. Accepts any valid CSS background-size value. Type: string, default: "".

previewOverlayOpacity: Sets the opacity of the dark overlay (representing the area not shown during zoom). Accepts a number between 0 and 1. Type: number, Default: 0.4.

previewSizePercentage: Sets the size (percentage) of the small preview image. Type: number, Default: 35.

shadow: Activates a small box shadow around the small preview image. Type: boolean, Default: false.

shadowColor: Sets the color of the box shadow around the small preview image. Accepts any valid CSS color. Type: string, Default: "rgba(0,0,0,.4)".

Note: onZoomStart and onZoomEnd behaves differently with PictureInPictureMagnifier. Because this component is always displaying the zoom image, these callbacks will be executed when the user starts or ends interacting with the small navigation image.

SideBySideMagnifier Props

mouseActivation: Sets the mouse method for zooming in/out. Accepts: "click" or "doubleClick". Can also import the MOUSE_ACTIVATION constants to assist. Type: string, Default: "click".

touchActivation: Sets the touch method for zooming in/out. Accepts: "tap", "doubleTap", or "longTouch". Can also import the TOUCH_ACTIVATION constants to assist. Type: string, Default: "tap".

alwaysInPlace: Activate in place mode, which displays the zoomed image in the same place instead of to the side. By default, the component goes into this mode automatically whenever there isn't enough room to display the zoomed image alongside. Type: boolean, Default: false.

switchSides: Displays the zoomed image on the left side of the preview, instead of the right side. Regardless of the intended side, the zoomed image will be displayed in place if there isn't enough room available.

fillAvailableSpace: Instead of displaying the zoomed image in a container the same size as the preview image, the zoomed image will fill all available space, horizontally and vertically, to the side of the preview. It will not grow past the size of the image. Type: boolean, default: false.

fillAlignTop: Used in conjunction with fillAvailableSpace to prevent the zoomed image container from filling all available space upwards. Instead it will align, vertically, to the top of the preview image and fill all space to the right and down.

fillGapLeft, fillGapRight, fillGapTop, and fillGapBottom: Used in conjuction with fillAvailableSpace to add a gap between the zoom image container and the edge of the available space.

overlayBoxOpacity: Sets the opacity of the white box (representing the zoom area) within the small preview image. Accepts a number between 0 and 1. Type: number, default: 0.8.

overlayOpacity: Sets the opacity of the dark overlay (representing the area not shown during zoom). Accepts a number between 0 and 1. Type: number, Default: 0.5.

overlayBackgroundColor: Sets the color of the dark overlay (representing the area not shown during zoom). Accepts any valid CSS color. Type: string, Default: #000.

overlayBoxColor: Sets the color of the white box (representing the zoom area) within the preview image. Accepts any valid CSS color. Type: string, default: #fff.

overlayBoxImage: Used to add a background image to the white box (representing the zoom area) within the preview image. Accepts an image src path. Type: string, default: "".

overlayBoxImageSize: When using overlayBoxImage, this can be used to change the size of the background image. Accepts any valid CSS background-size value. Type: string, default: "".

zoomContainerBorder: Used for styling the zoom container. Accepts any valid CSS border value. Type: string, default: "none".

zoomContainerBoxShadow: Used for styling the zoom container. Accepts any valid CSS box-shadow value. Type: string, default: "none".

transitionSpeed: Speed, in seconds, of the fade transition while zooming in/out. Type: number, Default: 0.4.

transitionSpeedInPlace: Speed, in seconds, of the fade transition while zooming in/out while in place mode is active. Type: number, Default: 0.4.

inPlaceMinBreakpoint: Cuases the magnifier to automatically switch to in place mode (displaying the zoomed image in the same place instead of to the side) based on a min width breakpoint. Accepts a number representing the target screen size (in pixels) when in place mode will become active. Type: number, default: 0.

MagnifierContainer Props

style: Passed to the style of the parent div.

className: Passed to the className of the parent div.

autoInPlace: Causes the magnifier to automatically switch to in place mode (zoomed view is displayed in the same place as the preview) when the MagnifierZoom component doesn't fit on the screen. Requires largeImageSrc to be set on the MagnifierPreview component. Type: boolean, default: false.

inPlaceMinBreakpoint: Causes the magnifier to automatically switch to in place mode (zoomed view is displayed in the same place as the preview) based on a min width breakpoint. Accepts a number representing the target screen size (in pixels) when in place mode will become active. Requires largeImageSrc to be set on the MagnifierPreview component. Type: number, default: 0.

MagnifierPreview Props

mouseActivation: Sets the mouse method for zooming in/out. Accepts: "click" or "doubleClick". Can also import the MOUSE_ACTIVATION constants to assist. Type: string, Default: "click".

touchActivation: Sets the touch method for zooming in/out. Accepts: "tap", "doubleTap", or "longTouch". Can also import the TOUCH_ACTIVATION constants to assist. Type: string, Default: "tap".

imageSrc: Passed to the src of the image. Also accepts an array of image paths in case fallbacks are required. Each image path in the array will be tried in order until either one loads, or the end of the array is reached. Type: string or array of strings, Default: "".

imageAlt: Passed to the alt of the image.

largeImageSrc: Only available when using autoInPlace or inPlaceMinBreakpoint on the MagnifierContainer. Passed to the src of the large image (zoomed while in place mode is active). Also accepts an array of image paths in case fallbacks are required. Each image path in the array will be tried in order until either one loads, or the end of the array is reached. Type: string or array of strings, Default: "".

style: Passed to the style of the parent div.

className: Passed to the className of the parent div.

onImageLoad: Passed to the onload of the image.

onLargeImageLoad: Only available when using autoInPlace or inPlaceMinBreakpoint on the MagnifierContainer. Passed to the onload of the large image (zoomed while in place mode is active).

cursorStyle: Accepts any valid CSS cursor. Type: string, Default: "crosshair".

transitionSpeed: Speed, in seconds, of the fade transition while zooming in/out. Type: number, Default: 0.4.

overlayBoxOpacity: Sets the opacity of the white box (representing the zoom area) within the small preview image. Accepts a number between 0 and 1. Type: number, default: 0.8.

overlayOpacity: Sets the opacity of the dark overlay (representing the area not shown during zoom). Accepts a number between 0 and 1. Type: number, Default: 0.5.

overlayBackgroundColor: Sets the color of the dark overlay (representing the area not shown during zoom). Accepts any valid CSS color. Type: string, Default: #000.

overlayBoxColor: Sets the color of the white box (representing the zoom area) within the preview image. Accepts any valid CSS color. Type: string, default: #fff.

overlayBoxImage: Used to add a background image to the white box (representing the zoom area) within the preview image. Accepts an image src path. Type: string, default: "".

overlayBoxImageSize: When using overlayBoxImage, this can be used to change the size of the background image. Accepts any valid CSS background-size value. Type: string, default: "".

renderOverlay: Render prop for custom overlays. The render prop function will get called with a single boolean representing the active state. Be sure to use absolute position on your content to avoid changing the size/layout of the magnifier component, which would interfere with the functionality. Default: null, Type: function.

onZoomStart: Callback to be executed on zoom start. Type: function.

onZoomEnd: Callback to be executed on zoom end. Type: function.

MagnifierZoom Props

imageSrc: Passed to the src of the image. Also accepts an array of image paths in case fallbacks are required. Each image path in the array will be tried in order until either one loads, or the end of the array is reached. Type: string or array of strings, Default: "".

imageAlt: Passed to the alt of the image.

style: Passed to the style of the parent div.

className: Passed to the className of the parent div.

onImageLoad: Passed to the onload of the small image (not zoomed).

transitionSpeed: Speed, in seconds, of the fade transition while zooming in/out. Type: number, Default: 0.4.

Example Project

git clone https://github.com/adamrisberg/react-image-magnifiers.git
cd react-image-magnifiers
npm install
npm start

react-image-magnifiers's Issues

Can't change activation method in side-by-side magnifier

Hi! Thanks for your work! I have some issue. Why I can change activation method only in Magnifier? I need activation on double tap in mobile (like in Magnifier) and hovre in desctop (like in SideBySideMagnifier). There is hardcode value.

Pinch to zoom

Hi. I'm wondering if this package has the feature pinch to zoom on mobile. I was checking and I realized that we can activate the zoom with Tap, Double-tap and long press. Any idea how can I have this gesture on mobile?

Is this library compatible with base64 image?

I'm trying to use this library in my base64 images, but when i hover the image i only have an grey square instead of a zoom.
This is my code
<Magnifier src={data:image/png;base64,${page.images[0]}} mgShape="square" />

Any ideas?

Not able to show the magnifing image

Hi,
Can Anyone Please help to figure the issue and resolution as Not able to show the Magnifying image(largeImageSrc props) on hover and also nor the main image (imgSrc prop), Maybe there is Some CSS not set properly? Please Help to figure put
Using this Code :
import {SideBySideMagnifier} from "react-image-magnifiers";

<SideBySideMagnifier
imageSrc={selectedImage.thumb_url}
imageAlt="Example"
largeImageSrc={selectedImage.url}// Optional
alwaysInPlace='false'
overlayOpacity={0.6}
switchSides={false}
fillAvailableSpace={false}
fillAlignTop={false}
fillGapLeft={0}
fillGapRig ht={10}
fillGapTop={10}
fillGapBottom={10}
zoomContainerBorder="1px solid #ccc"
cursorStyle="zoom-in"
inPlaceMinBreakpoint={641}
zoomPosition="right"
/>

Invalid prop `imageSrc` supplied to `GlassMagnifier`

Hi, I have met an issue when implementing this library and would like to ask for a help. Did I do something wrong when implementing?
Kindly look into those screenshots below, thank you in advance!

As you can see, I've tried different way of assigning the dynamics image into the imageSrc | largeImageSrc. Unfortunately, both didn't work..
Appreciate your help..

ReactJS Version 17 Support

The release date for ReactJS Version 17

Typo in README

There is a typo in GlassMagnifier Props section here
https://www.npmjs.com/package/react-image-magnifiers#glassmagnifier-props

allowOverFlow should be allowOverflow

and thanks for the great package

Image Mask

Hi dear,

I am trying to implement this lib for displaying images matrix. I am looking for some neat solutions to use CSS mask my input images and then apply glass magnifier only on the masked (display) part of the image.

Any suggestions?

Thanks

Option to use picture tag instead of img + lazyload MagnifierZoom?

Hi,

1- For better performance, I'd like to use webp images with jpeg as fallback for the MagnifierPreview, hence the need of picture tags.

2- The zoomed image is fetched on page load. Could you add lazy loading option for MagnifierZoom in order to fetch the big image only when zoomed ?

Thanks.

Cursor Style Not Change to Zoom-In When Image Displayed Asyncronously

I load the image asyncronously / depends on a trigger. When I hover the image, the cursor is still os-default cursor not the zoom-in.

It will become zoom-in if i click the image first,

is there any workaround for this?

Sync images support

Hi, there is any way of getting the pan when zoomed ?
and when click the zoom position ?
so i could sync two images for compare ??

Thanks.

Stop Side By Side render from having automatic style

Hi,

I want to add a custom style to the renderer of the side by side magnifier but I can't find how, is there a way to do that ?

FEATURE: Make SideBySideRenderer SSR compatible

Because of the use of window in

react-image-magnifiers/src/SideBySideRenderer.js

Line 28 in 476bba1

elementDimensions.width * 2 + elementOffset.left > window.innerWidth;

the component is not SSR compatible throwing a reference error that window is not defined, obviously.

Don't know about the performance impact, but maybe it's possible to render the large preview container only onMouseEnter and calculate whether to use inPlace or not at that moment.

Maybe it's even enough to add the active variable to the check in line 28 because this should never be true during SSR.

Fallback imageSrc onError

Hi @AdamRisberg,
I am trying to pass the onError prop to handle broken image links.

I think it is advisable to pass the image onError prop to handle image links that may be broken.

This removes the broken image icon and sets image src to the new one if broken.

** {...props} can be passed to the IMG component or declare the onError prop explicitly to handle broken image links **

Example:

Test 1: Invalid Image URL without error handling

<img
      src="https://solabstore.nyc3.digitaloceanspaces.com/shobbu/products/1592567372859-product_image-image1"
      alt="Golden boot"
 />

Test 2: Invalid Image URL with error handling

//Fallback error handler function
const defaultSrc = (ev) =>
 {
ev.target.src = "http://sc01.alicdn.com/kf/H658894263a8a40539302e9b6d1069ff6p/240382028/H658894263a8a40539302e9b6d1069ff6p.jpg";
};

// html code
<img
      src="https://solabstore.nyc3.digitaloceanspaces.com/shobbu/products/1592567372859-product_image-image1"
      alt="Golden boot"
      onError={defaultSrc}
 />

Image overflows when SideBySideMagnifier gets a size smaller than the image

Hello Adam, I was wondering if i would be possible to change the style of the image to make it stay in the SideBySideMagnifier and not go beyond it.

As you can see in the example, the image is not keeping itself in the container. All the rest is working perfectly

Here is what i try to achieve:

Here's my code

 <ExampleContainer title="Side By Side Magnifier">
        <div className="flex">
          <SideBySideMagnifier
              className="input-position"
              style={{ order: switchSides ? "1" : "0", maxHeight: "40vh" }}
              imageSrc={image}
              largeImageSrc={image}
              alwaysInPlace={alwaysInPlace}
              overlayOpacity={overlayOpacity}
              switchSides={switchSides}
              zoomPosition="left"
            /> 

          <SideExampleControls
            handleBoolChange={this.handleBoolChange}
            handleOpacityChange={this.handleOpacityChange}
          />
        </div>
      </ExampleContainer>

ReactJS Version 18 Support

Not working with png, webp

Hi, I just installed this package.

Idk why but it's not working with png or webp.
It's only working with jpg

Thanks in advance :)

GlassMagnifier not appearing correctly (Gatsby)

Hello!

Thanks for this project, it's exactly what I needed – but I'm having a couple of issues I am hoping we can resolve.

I'm trying to use the GlassMagnifier component within a straightforward React component, rendered through Gatsby.

<GlassMagnifier imageSrc={maxSizeSrc} imageAlt={alt} />

I am not seeing any errors, but at first glance nothing happens. On inspecting I noticed that the magnifying glass itself has visibility set to hidden. If I manually remove this CSS property the glass appears correctly and follows the mouse cursor. However there is no magnification, there is just a semi-transparent magnifying glass.

The magnified image appears also to be hidden, and stuck in the top left corner even though its translate value is changing with the mouse. If I manually unhide this image also, I can see the following:

Please let me know if you need more details.

No image load function found for SideBySideMagnifier

onLoad function not found for img in SideBySideRenderer

Modal

First of all this package is GREAT. I searched far and wide for image viewer with the magnifier functionality and I wanted and finally found exactly what I wanted here.

How can I put this inside a modal pop up?

Not Working Properly

Hi, We are using Next.Js 12 and React 17 for our own project. We want to add side-by-side image magnifier zoom as a feature. I have added the module but it not working as expected. Also, we use Typescript Next.Js which gives an error of type conflict. Let me help with this issue.

'SideBySideMagnifier' cannot be used as a JSX component. Its type 'ComponentType<SideBySideMagnifierProps>' is not a valid JSX element type. Type 'ComponentClass<SideBySideMagnifierProps, any>' is not assignable to type 'ElementType'. Type 'ComponentClass<SideBySideMagnifierProps, any>' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'. Construct signature return types 'Component<SideBySideMagnifierProps, any, any>' and 'Component<any, any, any>' are incompatible. The types returned by 'render()' are incompatible between these types. Type 'import("c:/Users/KevinVasoya/Downloads/my-example/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'. Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.

react-image-magnifiers not installing in next.js

The react-image-magnifiers package is not installing on next.js.
Error logs:

npm install --save react-image-magnifiers
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from [email protected]
npm ERR! node_modules/react-image-magnifiers
npm ERR!   react-image-magnifiers@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/haseeb/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/haseeb/.npm/_logs/2022-01-10T10_13_10_727Z-debug-0.log

You may give me write permission so I will push with the updated version of react. I've already tested the magnifiers by updating react to 17.0.2. And working fine. OR you may do it yourself. Pls proceed with it. I need this library in next.js to work.

Fix: just added the --force flag and it installed ;)

Make Custom layout components SSR compatible?

Hi, it's me again.

I tried to use the custom layout components in nextjs and it doesn't work with server side rendering. I took a quick look and found out transform:translate(NaNpx, NaNpx) in MagnifierZoom image's style.

Could you take a look at that?

Thanks.

Is there an event triggered when the zoom starts?

Hello! Nice plugin, thanks a lot for prompt updates.
Is there a way to know when the zoom event starts? Couldn't find anything.
I need to execute some functions when the zoom event starts and again when it ends (I'm using double click and tap)

Question: Way to change zoom level?

I want to change the amount of zoom.

Is there a way to do this now?

I think it would be useful to have this feature as some use cases want more intense zoom then what is default.

Images with transparency are visually overlaping

When Magnifier image has transparent background (for example SVG) then both images are visible and overlapped when zoomed.
Hiding "main image" in MagnifierRenderer.js seems to be enough to fix this problem:

visibility: isActive ? "hidden" : "visible"

image dimension

hi adam

Update or Deprecate

Package requires React 16.
Deprecate this or update it to allow React v17 and v18

Issue with scaling to height

Hello, I have some issue regargind scaling to fixed height.

When fixed (or max) height is set on Magnifier's container, then image doesn't scale and may overlap content below (in the case when container has bigger aspect ratio than image).

I prepared example to demonstrate this problem: https://codesandbox.io/s/react-image-magnifiers-size-bug-6j7s0
There are three sizes: Normal (width and height keeps image's aspect ratio), Wide (width is increased, so aspect ratio is higher) and Narrow (width is decreased). Problem occurs in Wide.

Also I've prepared there some CSS changes which seems to fix this issue, may be included by Apply fix checkbox.
File with proposed changes: https://codesandbox.io/s/react-image-magnifiers-size-bug-6j7s0?file=/fix.css

Need a way to attach preview to external div.

I'm using side by side image preview and it's a boundation from the design that I cannot remove overflow hidden from the parent.
Is there any way I can attach preview to external div by using it's id or something?

Feature Request: Interaction hint

Hi,

great library and more up-to-date than some other components regarding current react depracations. In another library though, there is little nice feature "interaction hint" which adds nice UX for users to see that there is interaction possibility without accidentally hovering the image. https://ethanselzer.github.io/react-image-magnify/#/hint

Would be great to see something similar in this library :-)

Programatically control the magnifier

Hi there,

Is there any way to programatically control the "active" state of the magnifier (to be precise SideBySideMagnifier)?

Use case: I am trying to add a "zoom" button alongside the image which should open/close the side magnifier.

After spending sometime playing around with SideBySideMagnifier, I realized it doesn't expose the active prop nor the ref. There seems to be no-way to control the "active" state of the component. I guess it can expose some methods like openZoom and closeZoom.

Automatically zooms in place using custom layout components

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.

Unable to preload images

Unable to preload images, I don't find preloading option given

Can i create a svelte version of this library

I want learn how this package work and implement to svelte, another ui framework

Of course i will put your project and all credits in readme.

Let me know, thanks

Not working when i using next.js

i try to using this plugins , but not working when i'm using nextjs, if i try without nextjs its working, but when i using nextjs only show teh image, but image can't zoom when mouse hover the image, maybe there is a solution for this.

Side by side magnifier not functioning in other projects

The magnifier works fine in the starter project, however it is not functioning within other projects.

I have tried it inside of a create react app based project, as well as a home brewed app that is not based on a boilerplate.

The tests were first made with the image viewer placed within a full page, to test it in context with the other components, next, I created a blank page with nothing but the image viewer component present.

In both cases, the original image displays, all markup is generated with correct inline styles. Hovering over the image does nothing. It's as though the mouse hover listener is not being registered.

Console is clean, no error messages.

I then created a component that feeds the image viewer with selected images, and placed it within the starter project. It works in that case.

Could it be that a dependency is not being loaded / installed?

Thanks.

Request: Add the ability to set initial image position of Magnifier image in container

We can already set the className and style props of the container element, which is pretty useful.

But if the container has a portrait orientation (height > width), while the Magnifier image is in landscape (width > height), then the image appears glued to the top of the Magnifier's container.

Could it be possible to set the initial position of the image ?
Maybe using an imageClassName or imageStyle prop that would be passed all allong to the Image tag ?

Or maybe, if an external styling could conflict with the Magnifier code, could we imagine an initialImageOffsetX, initialImageOffsetY prop (value in percentages, to keep dynamic resizing support) ..?

Or should I be using the onImageLoad instead ...?

Thanks you !

onError function

Is there a way to use onError function for the tag? Because right now as I see, when the original src link doesn't work, there is no fallBackUrl option.

Custom white box (representing the zoom area)

Hi,
I'd like to know if I can customize the white box (representing the zoom area) within the small preview image.
Thanks.

Can i use not fileUrl src?

Hello! Thanks a lot for your work on this project.
Can you please tell me if I can use blob object url (like window.URL.createObjectURL(blob)) or base64 png string as imageSrc? I tried, but it didn't work. The picture is not displayed. I generated a png blob programmatically and I don't have a file url. Can you help me please?

Your examples are a bit confusing

I'm trying to follow your MagnifierExample.js from your website to display a small and large image from a single image source.

Looking at the example code, I come across this line https://github.com/AdamRisberg/react-image-magnifiers/blob/6a5207c23c0727faf0c3c7a96813b9a13e158882/examples/src/MagnifierExample.js#L26C46-L26C46

You only ever pass in the image as a single image prop here https://github.com/AdamRisberg/react-image-magnifiers/blob/6a5207c23c0727faf0c3c7a96813b9a13e158882/examples/src/index.js#L19C8-L19C8

So I tried creating the same value twice, with two variable names like you did, and yet, it refuses to zoom in or interact with, whatsoever.

What magic is passing a single image prop to two different consts performs the work to make the first image smaller than the second? Your documentation says:

On all components, the zoom functionality will be disabled if the large image size is <= to the small image's current rendered size.

Yet, I don't see any size changing occurring, not even in helper files. Please help me make sense of this example. How does one image, with no manipulations to display size, allow the prop to function as it does on your site?

I'm using React 18.2.0, typescript 5.1.3, ES6 target compiled JS

Rotate images before use

Hi guys, I am trying to rotate an array of images, this array consists of URLs of images from azure. How do I rotate these images in my SideBySideMagnifier? If I add transform to the style props, it rotates the entire div instead of only the imageSrc and the largeImageSrc.