Cuatro opciones de zoom circular para imágenes en jQuery (by: http://www.kabytes.com)

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.

Vista previa de zoom circular con definición de tamaño de lupa

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.



original post: http://bit.ly/qsGV3s

via ifttt
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: