Cómo hacer zoom en una imagen con la rueda del ratón con javascript y jquery

Cómo hacer zoom en una imagen con la rueda del ratón con javascript y jquery




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.

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()

 

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:

Download

Descargas realizadas: 99

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.

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:

Download

Descargas realizadas: 81

Para más info: http://www.jacklmoore.com/wheelzoom/

 

 





Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies