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