How to Create a Custom Image Magnifier using jQuery ?
Last Updated :
12 Jul, 2025
Glimpse of Image magnifier:
An image magnifier is the zooming capability of your cursor point. Where you placed your cursor in the define div the image will be popped out in zoom mode. Like in the shopping sites, when you want to purchase any kind of cloth and want to check the material or print on that product in detail, this feature is useful. To create an image magnifier we will use the zoom() function. There is a similar article
how to zoom-in and zoom-out image using JavaScript ? which will zoom in the whole picture. We are going to build an image magnifier using jQuery. Below are some
prerequisites
we expect you to have some basic knowledge before start developing this:
Approach:
Get the page coordinates and the mouse position using jQuery offset() to get the relative position of cursor with respect to element. Set the outside container display attribute to block/inline-block so that image never overflows whenever zoomed. Set the top/left position relative to the container whenever zoom is triggered. We will need to calibrate the image zoom which takes time with respect to the container in different use-cases. Hence, for the same, we are going to use a simple jQuery core plugin named jQuery zoom which saves us a lot of time doing the same.
Creating Structure: In this section, we will create a basic structure. First of all, we will make the page layout
HTML code to make the structure:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Required CDN's -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.js">
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
</center>
<div class="container-fluid">
<b>Move your Cursor Over the Image</b>
<div class="parent">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200112021554/maxresdefault7.jpg">
</div>
<span class="contain">
<!-- Into another container -->
</span>
</div>
</body>
</html>
Designing Structure:
In the previous section, we have created the structure of the basic layout where we are going to use the magnifier.
CSS code of structure: In this section, we will design the layout add some necessary CSS configuration required to do the same. Style properties applied in the container to ensures that image never overflows outside the container never overflows outside the specified boundaries. Please refer to the examples below for more details.
HTML
<style>
body {
margin: 20px;
}
h1 {
color: green;
}
.container {
display: block;
padding: 0px;
}
.contain {
position: fixed;
right: 15%;
top: 15%;
width: 200px;
height: 220px;
}
img {
width: 300px;
height: 240px;
}
</style>
Adding jQuery script: Now we will initialize the jQuery script. The syntax is highlighted below:
$([Selector to Parent element of Image]).zoom({Attributes});
$([Image]).parent().zoom({attributes});
JavaScript
$(document).ready(function () {
$('.parent').css('width', $('img').width());
$('img').parent().zoom({
magnify: 4,
target: $('.contain').get(0)
});
});
Reason to use parent element of the image as the selector:
According to the Git-hub repository documentation, it is difficult to read some layout related to CSS styles from JavaScript/jQuery so we are using parent element here to do the same and this is also acting as the wrapper for the image at the same time.
Attributes of zoom() function:
| Property | Default | Description |
|---|
| on | 'mouseover' | Event to be used for triggering the zoom. Options: mouseover, grab, click, toggle |
| duration | 120 | Speed for fading effects. |
| target | false | Selector/DOM element to be used as parent container for the zoomed image. |
| touch | true | Enables interaction using Touch. |
| magnify | 1 | Entered value is multiplied with image resolution for zooming. |
| callback | false | Function called when the image has loaded. |
| onZoomIn | false | Function called when the image has zoomed in. |
| onZoomOut | false | Function called when the image has zoomed out. |
Combine the HTML, CSS, and jQuery code:
This is the final code after combining the above sections.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Required CDN's -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.js">
</script>
<style>
body {
margin: 20px;
}
h1 {
color: green;
}
.container {
display: block;
padding: 0px;
}
.contain {
position: fixed;
right: 15%;
top: 15%;
width: 200px;
height: 220px;
}
img {
width: 300px;
height: 240px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
</center>
<div class="container-fluid">
<b>Move your Cursor Over the Image</b>
<div class="parent">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200112021554/maxresdefault7.jpg">
</div>
<span class="contain">
<!-- Into another container -->
</span>
</div>
<script>
$(document).ready(function() {
$('.parent').css('width', $('img').width());
$('img')
.parent()
.zoom({
magnify: 4,
target: $('.contain').get(0)
});
});
</script>
</body>
</html>
Output:
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing