How to design zoom feature for image using imgViewer Plugin ?
Last Updated :
25 Jul, 2024
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/[email protected]"></script>
<script type="text/javascript" src= "lib/hammer.min.js"></script>
<script type="text/javascript" src= "https://unpkg.com/[email protected]"></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/[email protected]">
</script>
<script type="text/javascript"
src="lib/hammer.min.js">
</script>
<script type="text/javascript"
src=
"https://unpkg.com/[email protected]">
</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/[email protected]">
</script>
<script type="text/javascript"
src="lib/hammer.min.js">
</script>
<script type="text/javascript"
src=
"https://unpkg.com/[email protected]">
</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:
Similar Reads
How to create an Image Overlay Zoom Effect on hover using CSS ? Image Overlay Zoom Effect on hover can be done by using CSS. This effect is used in web design for user attention to images by highlighting the content or text, and to improve the overall look of a website by adding dynamic visual effects. We have given a Zoom effect to the text and image when the u
2 min read
How to Zoom an Image on Mouse Hover using CSS? CSS plays a vital role in styling modern websites, with over 90% of sites using it for visual effects and responsive layouts. One popular effect is image zoom on hover, which enhances user experience and adds visual appeal. In this article, you’ll learn three simple ways to create image zoom effects
2 min read
How to zoom in an image using scale3d() function in CSS ? In this article, we will learn how to zoom in on an image using the scale3d() function which is an inbuilt function in the transform property that has its aspects to resize the element in 3D space. It scales the element in the x, y, and z planes. Syntax: scale3d( x, y, z ) Parameters: Above function
2 min read
How to Create a Custom Image Magnifier using jQuery ? Glimpse of Image magnifier: An image magnifier is the zooming capability of your cursor point. Where you placed your cursor in the define div the image will be popped out in zoom mode. Like in the shopping sites, when you want to purchase any kind of cloth and want to check the material or print on
4 min read
How to zoom-in and zoom-out image using JavaScript ? Zooming in and out of images using JavaScript refers to the ability to increase (zoom in) or decrease (zoom out) the size of an image interactively. This effect enhances user experience by allowing users to focus on specific image details or view the full image easily.These are the following ways:Ta
3 min read