Javascript React Image Glass Magnifier

Question

I have this glass magnifier (from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_magnifier_glass), which is opening fine onClick in my react project, but I want to make it to toggle open/close on further clicks but it is not closing.

This is my function which is supposed to achieve that, but somehow the zoom remains always open, no matter if my zoomActive state is set at true or false. Can anyone tell me what am I doing wrong? Thanks!

 const [zoomActive, setZoomActive] = useState(false)

    /* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
    const handleMagnifier = () => {
        setZoomActive(!zoomActive)
        zoomActive && magnify(myImageId, 3)
        console.log('MAGNIFIER-GLASS-STATE???', zoomActive)
    }

Here the onClick function:

 <div
                                    className="img-magnifier-container"
                                    onClick={handleMagnifier}
                                >
                                    <img
                                        id={myImageId}
                      
                                        src={graphicImage}
                                        alt="mobile graphic"
                                    />
                                </div>

And the CSS:

.img-magnifier-container {
    position: relative;
    cursor: zoom-in;
}
.img-magnifier-glass {
    position: absolute;
    border: 3px solid $tangerine;
    border-radius: 50%;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width: 200px;
    height: 200px;
}

Please provide more code including the `onClick` func – codemax Aug 12 '20 at 13:15 — codemax, Aug 12 '20 at 13:15

score 0 · Answer 1 · answered Aug 13 '20 at 08:21

Just in case it helps anyone, removing the class did the trick for me. Like this:

 const handleMagnifier = () => {
        setZoomActive(!zoomActive)
        let glass = document.getElementsByClassName('img-magnifier-glass')
        !zoomActive ? magnify(myImageId, 3) : glass[0].removeAttribute('class')
    }

Not sure if it is the best approach, but it works.

Javascript React Image Glass Magnifier

1 Answers1