How to create an image magnifying glass

Adding an image magnifying glass to a website might greatly improve user experience. With the help of this innovative feature, users can zoom in on particular aspects of a picture for a more immersive and exciting engagement. Moreover, we can improve our website’s functionality and aesthetic appeal by allowing users to zoom in on certain areas, creating a dynamic and user-friendly environment.

Creating image magnifying glass

We’ll learn how to use HTML, CSS, and JavaScript to construct a straightforward yet powerful picture magnifier using the code example below.

Explanation

The code above is divided into three main parts: HTML, CSS, and Javascript functions. Here’s the explanation of each part of the code.

HTML

The HTML body contains a header, a paragraph with instructions, and an image enclosed inside the magnifier container. Below that is a script to call the initializeMagnifier function with the image and a zoom level set to 3 as its arguments.

CSS

The CSS styles define the appearance of the magnifier container and the glass.

JavaScript

In the javascript part of the code, we’ve defined several functions that handle the functionality of the magnifier, such as.

• The initializeMagnifier function:

  • Line 23: We declare the initializeMagnifier function, which is the entry point for setting up the image magnifier. It takes two parameters: imageID is the ID of the image and zoomLevel is the desired zoom level.

  • Line 24: We retrieve the image element from the DOM using its ID, which is passed as the imageID parameter. It stores the reference to the image element in the image variable.

  • Line 25: We call the createMagGlass function, passing the image element as an argument. The function creates a magnifier glass element and inserts it before the image in the DOM, and the reference to this glass element is stored in the magGlass variable.

  • Line 26: We call the setMagStyles function, passing the magnifying glass, the image, and the zoom level as arguments. This function sets the background properties of the magnifier glass based on the image source and the specified zoom level.

  • Line 27: This line calls the attachEventListeners function, passing the magnifier glass, the image, and the zoom level as arguments. This function sets up event listeners to handle mouse and touch events for the magnifier.

• The createMagGlass function:

  • Line 30: We declare the createMagGlass function, which creates the magnifier glass element. It takes the image element as a parameter.

  • Line 31: We create a new div element and assign it to the magGlass variable. This div element serves as the magnifier glass.

  • Line 32: We set the class name of the magnifier glass div to mag-glass.

  • Line 33: We insert the magnifier glass as a sibling just before the image in the DOM hierarchy, ensuring it overlays the image.

  • Line 34: We return a reference to the created magnifier glass element.

• The setMagStyles function:

  • Line 37: We declare the setMagStyles function responsible for setting the background properties of the magnifier glass.

  • Line 38: We set the background image of the magnifying glass to the source (src) of the image being magnified.

  • Line 39: We ensure that the background image of the magnifying glass does not repeat.

  • Line 40: We set the magnifying glass’s background-size based on the image’s width and height multiplied by the specified zoom level. This ensures that the magnifying glass covers the appropriate portion of the image.

• The attachEventListeners function:

  • Line 43: We declare the attachEventListeners function, which is responsible for attaching event listeners for mouse and touch events to handle the movement of the magnifier glass.

  • Line 44: We declare the moveMag function, which is executed when the magnifying glass is moved over the image. It takes the event e as a parameter.

  • Line 45: We prevent the default action associated with the event, ensuring that other actions that may occur when moving over the image are stopped.

  • Line 46: We call the getCursorPos function to obtain the cursor’s position relative to the image.

  • Line 47: We calculate the x-coordinate for the magnifying glass, ensuring it stays within the image’s bounds.

  • Line 48: We calculate the y-coordinate for the magnifying glass, ensuring it stays within the image’s bounds.

  • Line 49: We set the left position of the magnifying glass.

  • Line 50: We set the top position of the magnifying glass.

  • Line 51: We dynamically adjust the background position of the magnifying glass based on the cursor’s coordinates, image zoom level, and glass dimensions, ensuring the displayed content within the magnifier corresponds to the cursor’s position on the image.

Conclusion

Conclusively, this code generates a customizable image magnifier by fusing HTML, CSS, and JavaScript. The functions are modular for maintainability, and the structure of the code guarantees tidy organization. For a seamless magnification experience, the script dynamically creates a magnifying glass, configures its styles, and reacts to user inputs. We can alter the designs and adjust the settings according to our unique use case for flawless integration into our website.