Seleccionar página

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: 341

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: 299

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

 

 

(Visitado 1.952 veces, 1 visitas hoy)