How To Create a Image Magnifier Using JavaScript

If you want to create JavaScript Image Magnifier then this tutorial is for you. Here I have shown step-by-step how to create Image Magnifier Glass using HTML CSS and JavaScript.

Earlier I showed another jquery image magnifying glass. If you want to create an Image Magnifier Glass using JQuery then you can watch that tutorial.

However, no jQuery or external library was used in this case. This simple image zoom has been created using pure JavaScript.

Demo
Download

HTML, CSS, and JavaScript are mainly used here. The basic structure and image of the project have been added by HTML. I designed it with CSS. Finally, Image Magnification is activated by JavaScript.

JavaScript Image Magnifier

JavaScript Image Magnifier is used to zoom images in the case of product review websites or eCommerce websites. If you want to create this project you need to have some idea about JavaScript.

I first created a box on the webpage. I have added an image to it. It has a magnifier glass where the image can be zoomed in.

See the Pen
JavaScript Image Magnifier Glass by Shantanu Jana (@shantanu-jana)
on CodePen.

The image of the place where the cursor of your mouse will be located can be seen by zooming in on the Image Magnifier glass.

It also uses a border around the glass to enhance the beauty. The element to create in this glass is created by ‘createElement’.

How To Create an Image Magnifier Glass

Now if you want to create this magnified image on hover then follow the tutorial below. If you want you can download all the source code using the download button below the article.

But if you are absolutely a beginner then you can follow this magnify image javascript tutorials. Here I have tried to explain as much as possible step-by-step how I made this simple magnifying glass.

Step 1: Area of Image Magnifier

First, a box is created in which the image can be found. This box uses width: 650px, height: 400px and background color white. Next time we will add the image in this box.

</div>

body,

html {

height: 100%;

width: 100%;

display: flex;

justify-content: center;

align-items: center;

overflow: hidden;

position: relative;

min-width: 700px;

background: rgb(10, 70, 127);

}

.container {

width: 650px;

height: 400px;

background: #fff;

display: flex;

align-items: center;

justify-content: center;

border: 6px solid rgb(244, 254, 255);

}

Step 2: Add an image to the Image Magnifier

Now I have added an image to this project. The image is kept equal to the length and height of the box. As a result, the image can be seen across the entire box.

</div>

#zoom img{

width: 650px;

height: 400px;

}

Step 3: Activate Magnifier Glass using JavaScript

This magnifier glass is a complete design work but now needs to be implemented using JavaScript. Here I have put all the JavaScript together. At the same time, I have given explanations that have been used in some works.

//lensSize

const lensSize = 200;

function magnify(id, zoom){

const el = document.getElementById(id);

const copy = el.cloneNode(true);

const lens = document.createElement(“div”);

lens.setAttribute(“id”,”lens”)

lens.style.width = lensSize + “px”;

lens.style.height = lensSize + “px”;

el.appendChild(lens);

el.getBoundingClientRect();

copy.style.zoom = zoom;

lens.appendChild(copy);

copy.style.width = (el.offsetWidth * zoom) + “px”;

copy.style.heigth = (el.offsetHeight * zoom) + “px”;

copy.style.position = “absolute”;

//MouseMove is a event that is executed when a pointer is moving over an element

el.addEventListener(“mousemove”, (ev) => {

ev.preventDefault();

ev.stopPropagation();

const pos = getCursorPos(ev);

lens.style.left = – (lensSize/2) + pos.x + “px”;

lens.style.top = – (lensSize/2) + pos.y + “px”;

copy.style.left = – (pos.x – el.offsetLeft) + (lensSize/zoom)*0.5 + “px”;

copy.style.top = – (pos.y – el.offsetTop) + (lensSize/zoom)*0.5 + “px”;

})

}

//New function

function getCursorPos(e) {

//window.Event indicates that a window has changed its status

//scrollLeft property gets or sets the number of pixels that an element’s content is scrolled from its left edge

var x = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);

//scrollTop property gets or sets the number of pixels that an element’s content is scrolled from its top edge

var y = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

return {x : x , y : y};

}

//Zoom Value

magnify(“zoom”, 4)

Step 4: Design the Magnifier Glass

#lens {

position: absolute;

border: 2px solid rgb(255, 255, 255);

overflow: hidden;

cursor: none;

box-shadow: inset 0 0 10px 2px grey;

filter: drop-shadow(0 0 2px grey);

}

#lens > * {

cursor: none;

}

Image Magnifier HTML Code

Hopefully, you have been able to create this Magnifier Zoom Glass with the above JavaScript. If there is any problem you can definitely let me know and I will try to help you.

There are many beginners who are just looking for the source code to create this Magnifier Glass JavaScript. I have given the above code step by step so many users may have problems.

I have given the code copying section for them below. You can copy these codes directly and use them in your own work.