search

AdamRisberg / react-image-magnifiers

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

Not able to show the magnifing image #54

Open akankshasinghal372 opened 3 years ago

akankshasinghal372 commented 3 years ago

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" Screenshot from 2021-09-17 18-56-23 />

Screenshot from 2021-09-17 18-45-42 Screenshot from 2021-09-17 18-45-36

KitanoR commented 2 years ago

Hi. I had a similar problem. That happened to me because I had: img { max-width: 100%} The solution is to remove it. If you check the image, you can see it Captura de pantalla 2021-11-10 a las 15 43 02

ENG1N3X commented 1 year ago

@KitanoR thaanks man!

Thimoss commented 8 months ago

how to remo

@KitanoR thaanks man!

Hi. I had a similar problem. That happened to me because I had: img { max-width: 100%} The solution is to remove it. If you check the image, you can see it Captura de pantalla 2021-11-10 a las 15 43 02

How do I remove the max-width: 100% just for this image magnifier? I'm a beginner in this area, and I'm using Next.js and Tailwind.