How to design zoom feature for image using imgViewer Plugin ?

Last Updated : 07 Mar, 2022

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=
"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>
 
</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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220109233330/background2-298x300.jpg"
                        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=
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
          media="screen">
 
    <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>
    <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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220109233330/background2-298x300.jpg"
            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:

Suggest improvement

jQuery jTippy Tooltip Plugin

How to display long quotations in HTML ?

Share your thoughts in the comments

How to design zoom feature for image using imgViewer Plugin ?

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?