How to design zoom feature for image using imgViewer Plugin ?
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:
Please Login to comment...