En este artículo, aprenderemos a implementar el zoom y la panorámica de imágenes utilizando el complemento jQuery imgViewer . Descargue el complemento desde este enlace y recopile todos los archivos precompilados en su carpeta de trabajo.
Enlace CDN:
<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>
Nota: Los desarrolladores deben cuidar de mantener las dependencias (archivos) en las rutas de carpetas adecuadas según sea necesario.
Ejemplo 1: en este ejemplo , coloque un elemento de imagen en la parte HTML del código y use el bloque de JavaScript para adjuntar el complemento a la imagen.
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/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>
</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>
Producción:
Ejemplo 2: el código siguiente muestra el evento onclick.
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/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>
<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>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA