Cómo hacer zoom en una imagen con la rueda del ratón con javascript y jquery
by Bitácora Web
Hace tiempo buscando cómo hacer zoom en una imagen con la rueda del ratón encontré dos librerías muy útiles para este propósito y que os quiero compartir, la primer JQuery Image Viewer y la segunda Wheelzoom.
JQuery Image Viewer
Para hacer un zoom en una imagen moviendo la rueda del ratón con Image Viewer necesitaremos las librerías en el head: jquery, jquery-ui , jquery.fs.zoetrope, toe, jquery.mousewheel, a parte de la propia imgViewer claro.
1 2 3 4 5 6 | <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script> <script type="text/javascript" src="js/jquery.fs.zoetrope.min.js"></script> <script type="text/javascript" src="js/toe.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="js/imgViewer.js"></script> |
Después ya en el body insertamos la imagen y el código javascript con la llamada al tag img al que aplicaremos imgViewer, si tuviéramos varias imágenes en la misma página y sólo quisiéramos aplicársela a alguna deberíamos añadirle una clase o un id y llamar en vez de $(“img”).imgViewer() a $(“img .clase”).imgViewer() o $(“img #nombredeid”).imgViewer()
1 2 3 4 5 6 | <img src="image/imagen-ejemplo.png" alt="Imagen de ejemplo BitacoraWeb!" width="1071" height="656" /> <script type="text/javascript"> ;(function($) { $("img").imgViewer(); })(jQuery); </script> |
Y con esto ya funcionaría, esta librería también ofrece la posibilidad de localizar la posición en la que se hace click dentro de la imagen.
Podéis ver una demo en:
http://bitacoraweb.info/code/zoom-en-imagen-con-jquery/
Y descargar el ejemplo en:
Descargas realizadas: 86
Para más info: http://www.jqueryscript.net/zoom/jQuery-Plugin-for-Image-Zoom-In-Out-With-Mousewheel-imgViewer.html
Wheelzoom
La segunda opción es aún más sencilla, sólo necesitamos la librería javascript Wheelzoom.
Insertamos la imagen, en este caso añadimos la librería desde el body (aunque puede ir en el head) y llamamos a la función wheelzoom con el parámetro del objeto de nuestra imagen.
1 2 3 4 5 | <img class='zoom' src='imagen-ejemplo.png' alt='Imagen de ejemplo BitacoraWeb!' width='1071' height='656'/> <script src="wheelzoom.js"></script> <script> wheelzoom(document.querySelector('img.zoom')); </script> |
Y así de fácil!
Podéis ver una demo en:
http://bitacoraweb.info/code/zoom-en-imagen-con-wheelzoom/
Y descargar el ejemplo en:
Descargas realizadas: 69
Para más info: http://www.jacklmoore.com/wheelzoom/
