How to design zoom feature for image using imgViewer Plugin ?

In this article, we will learn to implement image zooming and panning using the jQueryimgViewer 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/jquery.mousewheel.js"></script>
 <script type="text/javascript" src= "lib/hammer.min.js"></script>
 <script type="text/javascript" src= "https://unpkg.com/jquery-hammerjs@2.0.0/jquery.hammer.js"></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.

Output:

Example 2: The following code demonstrates the onclick event.

Output: