How to Create a Custom Image Magnifier using jQuery ?

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>            

    chevron_right

    
    

    Output:




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.