Open In App

How to Create a Custom Image Magnifier using jQuery ?

Last Updated : 29 Jan, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

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:

  • HTML
  • CSS
  • jQuery
  • Bootstrap

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

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.




    <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});




    <script>
        $(document).ready(function() {
       
            $('.parent').css('width', $('img').width());
       
            $('img').parent().zoom({
                magnify: 4,
                target: $('.contain').get(0)
            });
        });
    </script>

    
    

  • 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.




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8" />
        
        <!-- Required CDN's -->
        <link rel="stylesheet"
              href=
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </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=
            </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

How to create image magnifier using HTML CSS and JavaScript?
Whenever you visit any online shopping site you must have seen the zoom effect, in which you move your cursor over the image to see an enlarged view of that portion of the image. If you want to add this feature to your website then we can easily create this. There are two methods to create an image magnifier: Table of Content Rollover/Follow Zoom E
4 min read
How to add custom styles and ways to add custom styles in Tailwind-CSS ?
Tailwind is a popular CSS framework that makes your User Interface design making the process easier. It provides low-level classes and those classes combine to create styles for various components. Tailwind-CSS comes with a bunch of predefined styling but as a developer, we need more custom styling and the styles offered by tailwind are not enough
3 min read
How to create a custom jQuery Plugin ?
In this article, we will see the creation of a custom jQuery plugin that will change the background color of an element when the mouse hovers over it. The plugin takes a color as an argument and sets the background color of each element to that color when the element has hovered over. When the mouse leaves the element, the original background color
3 min read
Creating a Custom Image Slider using JavaScript
What is an image slider?An image Slider or Image Carousel is an expedient way to show multiple images on a website. Alluring flashy images can draw many visitors to the site. The below image shows a sample image slider: In this post, we will create the above image slider using HTML, CSS and JavaScript. Let's begin with creating the image slider. St
4 min read
How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
With the advent of new frameworks in web technologies, it has become quite easy to design and implement feature-rich and responsive web pages. Here, we are going to design a responsive image gallery using HTML, CSS, jQuery, and Bootstrap. Features or Functionalities to implement: Responsive imagesResponsive Grid SystemImage viewer Prerequisites: Ba
3 min read
How to Create Custom Shape Button using SVG ?
To design the shape of an HTML button we can use SVG elements (Scalable Vector Graphics). It basically defines the vector-based graphics in XML format. Every element and every attribute in SVG files can be animated. We can use SVG to create 2-D graphics of any custom shape. Example 1: This example creating a circle shape button using SVG. &lt;!DOCT
2 min read
How to Create Custom Radio Button using HTML and CSS ?
The simple radio button can be customized using HTML and CSS easily. We will use some CSS properties to create a custom radio button. The :after pseudo-element and checked attribute is used to set some CSS property. The complete code is divided into two sections, the first section contains the HTML code and the second section contains the CSS code
3 min read
How to create custom banner background using CSS ?
In modern web designs, the custom background has emerged as a popular design for the banner background. A custom background has an infinite number of designs. The design is purely based on one's imagination and creativity. Some common examples of custom backgrounds include wavy background, skewed background, etc. This article will show the approach
2 min read
How to create custom arrows for your website using HTML and CSS?
Arrows are widely used in modern websites. These are mainly used for sliding images and change pages. Although there are many icons available for these arrows. Sometimes you need to design a custom image depending on the client's requirement. Creating arrows using CSS has many benefits such as they do not affect the page loading time, also very ben
2 min read
How to create custom cursor using CSS ?
A custom cursor enhances the readability of the document and grabs the user's attention to a specific part of the webpage. Today we are going to learn how to create a custom cursor for a webpage using HTML, CSS, and Javascript. Approach: Hide the default cursor.Define the classes which contain all the animations.Add and remove these classes dynamic
2 min read