jQuery ImageLens un plugin para lentes de aumento



jQuery ImageLens un plugin para lentes de aumento, este plugin nos muestra imágenes con un efecto que aparece al parecer el mouse del ratón, este plugin puede ser muy útil para realizar muestras de elementos con más detalles, también puede servir para mostrar elementos con color, pasando de imagen de color blanco y negro a una imagen de color.

Los ejemplos del plugin puedes encontrártelos en: http://www.dailycoding.com/posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx

Lo interesante del plugin es que solo necesita el archivo jquery y el archivo js del plugin agregar algunas instrucciones y listo, tendrás un resultado muy prometedor, el lugar donde puedes usar este plugin es por ejemplo en la venta de ropa, donde el usuario desea ver más de cerca el tipo de tela en la cual la ropa esta construida y como es la tela.

Para tener un idea clara de como usar este plugin, a continuación tienes una explicacion muy breve y explicado por pasos (Recuerda que si quieres más ejemplos puedes visitar la url del autor: http://www.dailycoding.com/posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx ):

 

Paso 1. – Incluye código referencial de jQuery y la librería imageLens.js

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

Paso 2.- Agrega las etiquetas con el tamaño original del imagen y redimenciona la imagen a un tamaño más pequeño

<img id="img_01" src="http://www.dailycoding.com/Uploads/2011/03/imageLens/sample01.jpg" width="384" height="240" />

Paso 3.- Crea las instrucciones referenciales al elemento img con jQuery y el plugin:

<script>
$("#img_01").imageLens();
</script>

You may also like...