Skip to content
Related Articles

Related Articles

How to design zoom feature for image using imgViewer Plugin ?

Improve Article
Save Article
  • Last Updated : 07 Mar, 2022
Improve Article
Save Article

In this article, we will learn to implement image zooming and panning using the jQuery imgViewer plugin. Download the plugin from this link and collect all the pre-compiled files in your working folder.

CDN link:

 <script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.4.min.js”> </script>
 <script type=”text/javascript” src=”https://code.jquery.com/ui/1.12.1/jquery-ui.min.js”></script>
 <script type=”text/javascript” src= “https://unpkg.com/jquery-mousewheel@3.1.13”></script>
 <script type=”text/javascript” src= “lib/hammer.min.js”></script>
 <script type=”text/javascript” src= “https://unpkg.com/jquery-hammerjs@2.0.0”></script>
 <script type=”text/javascript” src= “lib/imgViewer.js”></script>

Note: Developers should take care of keeping the dependencies (files) in proper folder paths as required.

Example 1: In this example, place an image element in the HTML part of the code and use the JavaScript block to attach the plugin to the image.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,
                   maximum-scale=1.0, user-scalable=yes" />
    <script type="text/javascript"
            src=
    </script>
    <script type="text/javascript"
            src=
    </script>
    <script type="text/javascript"
            src=
    </script>
    <script type="text/javascript"
            src="lib/hammer.min.js">
    </script>
    <script type="text/javascript"
            src=
    </script>
    <script type="text/javascript"
            src="lib/imgViewer.js">
    </script>
 
</head>
 
<body>
    <table cellspacing="0" cellpadding="0"
           border="0" style="width:100%; min-width:320px;">
        <tr>
            <td style="padding: 10px">
                <h2 align="center" style="color:green">
                    GeeksforGeeks
                </h2>
                <div align="center">
                    <img id="image1"
                        src=
                        width="80%" />
                     
<p></p>
 
                    <button id="toggleZoom">Zoom On</button>
                     
<p></p>
 
                    Zoom:
                    <input id="zoom" type="number"></input>
                    <br />
                    Maximum Zoom:
                    <input id="mxzoom" type="number" min="1"></input>
                </div>
            </td>
        </tr>
    </table>
 
    <script type="text/javascript">
        ; (function ($) {
            $(window).on("load", function () {
                $(document).ready(function () {
 
                    var $zoom = $('#zoom');
 
                    var $img = $("#image1").imgViewer({
                        zoomMax: 2,
                        zoomable: false,
                        draggable: false,
                        onReady: function () {
                            this.options.zoom = 2;
                            this.panTo(1, 1);
                        },
                        onUpdate: function () {
                            $zoom.val(this.options.zoom);
                        }
                    });
 
                    var $toggleZ = $("#toggleZoom");
                    if ($img.imgViewer("option", "zoomable"))
                        $toggleZ.text("Zoom Off");
                    else
                        $toggleZ.text("Zoom On");
 
                    $toggleZ.on("click", function () {
                        var $this = $(this);
                        if ($this.text() == "Zoom On") {
                            $this.text("Zoom Off");
                            $img.imgViewer("option", "zoomable", true);
                        } else {
                            $this.text("Zoom On");
                            $img.imgViewer("option", "zoomable", false);
                        }
                    });
                    $zoom.on('change', function (e) {
                        $img.imgViewer("option", "zoom", $(this).val());
                    });
                    var mxZoom = $img.imgViewer("option", "zoomMax");
                    if (mxZoom !== null) {
                        $('#mxzoom').val(mxZoom);
                    }
                    $('#mxzoom').on('change', function (e) {
                        $img.imgViewer("option",
                        "zoomMax", $(this).val());
                    });
                });
            });
 
        })(jQuery);
    </script>
</body>
 
</html>


 

 

Output:         

 

 

Example 2: The following code demonstrates the onclick event.

 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>imgViewer Plugin</title>
    <link rel="stylesheet"
          href=
          media="screen">
 
    <script type="text/javascript"
            src=
    </script>
    <script type="text/javascript"
            src=
    </script>
    <script type="text/javascript"
            src=
    </script>
    <script type="text/javascript"
            src="lib/hammer.min.js">
    </script>
    <script type="text/javascript"
            src=
    </script>
    <script type="text/javascript"
            src="lib/imgViewer.js">
    </script>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,
                   maximum-scale=1.0, user-scalable=yes" />
</head>
 
<body>
    <h1 align="center">imgViewer Plugin onclick event</h1>
    <div align="center">
        <img id="image1"
             src=
            width="40%" />
    </div>
 
    <script type="text/javascript">
        ; (function ($) {
            $(window).on("load", function () {
                $(document).ready(function () {
                    var $img = $("#image1").imgViewer({
                        onClick: function (e) {
                            var $message =
                                $("<div id='dialog-modal'></div>").dialog({
                                    modal: true,
                                    title: "You clicked at:",
                                });
                            var pos = this.cursorToImg(e.pageX, e.pageY);
                            var imgpos = this.relposToImage(pos);
                            $message.html("Page X: " + e.pageX +
                                "<br/>Page Y: " + e.pageY +
                                "<br/>Image Pixel X: " + imgpos.x +
                                "<br/>Image Pixel Y: " + imgpos.y +
                                "<br/>Image Rel X: " + pos.x.toFixed(3) +
                                "<br/>Image Rel Y: " + pos.y.toFixed(3));
                        }
                    });
                });
            });
        })(jQuery);
    </script>
</body>
 
</html>


 

 

Output:

 

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!