Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create image magnifier using?
In the contemporary digital era, where the visual appeal of a website is of utmost importance in captivating users, it is crucial to integrate interactive and enthralling components into your web pages. A prominent example of such features is an image magnifier that permits users to zoom in on pictures for a closer inspection. By utilizing the power of HTML and CSS, it is plausible to fabricate a straightforward yet potent image magnifier that enhances the user experience and imparts a polished touch to your website. This piece of writing shall expound upon the requisite steps and methodologies involved in crafting an image zooming tool through the use of HTML and CSS, endowing upon you the technical expertise to imbue this feature into your very own webpages.
Approach
We are going to see two different methods in this article. They are as follows −
Rollover/Follow zoom effect
Magnifying glass effect
Method 1: Rollover/Follow Zoom Effect
The technique of rollover zoom is a method of image manipulation that entails magnifying a segment of the image without employing a transparent overlay. This effect can be accomplished using only CSS and JavaScript, and there is no requirement for any supplementary tools or software.
Example
The following is the complete code which we are going to have a look at in this example −
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to create image magnifier using?</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main {
display: flex;
}
.main img {
cursor: zoom-in;
}
.zoom-preview {
height: 300px;
width: 300px;
border: 1px solid #000;
margin-left: 20px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h4>How to create image magnifier using?</h4>
<div class="main">
<img src="https://picsum.photos/300" id="image"
height="300px" width="300px" />
<div class="zoom-preview"></div>
</div>
<script>
const img = document.getElementById("image");
const preview = document.querySelector(".zoom-preview");
const calculateRatio = (value) => preview.offsetWidth / value;
const x = calculateRatio(100);
const y = calculateRatio(100);
const setBackgroundProperties = (posX, posY) => {
preview.style.backgroundImage = `url(${img.src})`;
preview.style.backgroundSize = `${img.width * x}px ${img.height * y}px`;
preview.style.backgroundPosition = `-${posX * x}px -${posY * y}px`;
};
img.addEventListener("mousemove", (e) => {
const posX = e.offsetX;
const posY = e.offsetY;
setBackgroundProperties(posX, posY);
});
img.addEventListener("mouseout", () => {
preview.style.backgroundImage = "none";
});
</script>
</body>
</html>
Method 2: Magnifying Glass Effect
The visual effect that this technique creates can be compared to the view of an expanded area of an image seen through a translucent glass. To produce this effect, we have implemented the jQuery Magnify plugin. This plugin is a lightweight tool that enables us to easily incorporate zoom functionality into images. It is a particularly useful feature for eCommerce websites where product images need to be displayed, or when website visitors need to zoom into an image without hindering the visibility of text with additional overlays or popup windows.
Example
The following is the complete code which we are going to have a look at in this example −
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/css/magnify.min.css"/>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h4>How to create image magnifier using?</h4>
<img src="https://cdn.pixabay.com/photo/2012/12/27/19/40/chain-link-72864_960_720.jpg" class="zoom"
data-magnify-src="https://cdn.pixabay.com/photo/2012/12/27/19/40/chain-link-72864_960_720.jpg" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/js/jquery.magnify.min.js"></script>
<script>
$(document).ready(function () {
$(".zoom").magnify();
});
</script>
</body>
</html>
Conclusion
To sum up, constructing an image magnifier using CSS and JavaScript is a straightforward yet potent approach to infuse a hint of dynamism to your web pages. By adhering to the procedures delineated in this discourse, you can effortlessly execute this effect on your own images and augment their allure to users. With the freedom to modify the size and location of the magnified segment of the image, you can generate a one-of-a-kind and dynamic involvement for your website guests. Additionally, this technique demands no extra software or tools, making it a thrifty and proficient solution. By mastering this technique, you can add another proficiency to your web development repertoire and lift your designs to new heights.
526 Views
To Continue Learning Please Login