Cuatro opciones de zoom circular para imágenes en jQuery

Me he encontrado en muchos sitios con la posibilidad de utilizar mi mouse como una lupa sobre cualquier imagen. En especial, los sitios de moda que no quieren que sus modelos sean robados. Es por ello que se habilita un sector de la pantalla que deje ver en un tamaño superior el detalle de la prenda o producto que se está mostrando.

En este artículo quiero recomendarles un plug-in de jQuery que permite realizar esto de forma muy simple y ofrece cuatro opciones diferentes como resultado. Cabe aclarar que si utilizan IE8 en lugar de ver un círculo se desplegará un cuadrado.

Para hacerlo funcionar se necesita:

1. jQuery.
2. ImageLens plug-in.
3. Imagen.

Para utilizarlo en su sitio deberán incluir el siguiente script en su html:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>

Luego para utilizar la versión por defecto se inserta el siguiente código en el archivo .js:

$("#img_01").imageLens();

Automáticamente calculará el tamaño de la imagen para mostrar el zoom.

La segunda opción se realiza a partir de la utilización de una imagen diferente (por ejemplo: de blanco y negro a zoom en color). El código es el siguiente:

$("#img_03").imageLens({ imageSrc: "sample01.jpg" });

Si deseamos modificar el tamaño del lente podemos agregar el parámetro correspondiente, de la siguiente manera:

$("#img_02").imageLens({ lensSize: 200 });

Como así también agregar atributos de color o borde:

$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });

Pueden visitar las cuatro opciones en la demo para contemplar las diferencias con más claridad. Para descargar los archivos fuente pueden visitar el sitio del plug-in ImageLens en DailyCoding. Y si están buscando otras opciones similares, pueden visitar el artículo de Pablo sobre Zoom y efecto en imágenes con jQuery.