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