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