WdpZoomer - Realizar Zoom a una imagen mediante Javascript.

Este es un ejemplo en Javascript que te permite realizar zoom de imágenes para tu página web, sitio o blog.

Para realizar el Zoom debemos posar el mouse por encima del gráfico y colocar el puntero en el área deseada, luego mediante el teclado podremos agrandar o achicar la imagen, y presionando nuevamente el botón del mouse para restaurar la imagen a su tamaño original.

Otras características:

• Este ejemplo funciona utilizando la librería gratuita jQuery.
• El script es fácil de implementar.
• Permite ajustar y configurar los valores mínimos y máximos de Zoom, el valor o ratio para aumentar y disminuir.
• Funciona con la mayoría de los navegadores webs actuales.

Contenido del archivo de ejemplo:

En el archivo de descarga se encuentran los siguientes ficheros y carpetas:

• index.html : Archivo de ejemplo
• Carpeta img: Esta carpeta es para los gráficos. Nota. Los gráficos deben ser 2, uno para la imagen pequeña y el mismo gráfico pero mas grande.
• Carpeta js: Contiene la librería jQuery y otro archivo llamado wdpZoomer_0.1.js que es el utilizado para configuraciones varias, como indicar el directorio de imágenes, setear los valores iniciales, y también contiene la función principal para realizar el efecto de zoom.

Instalación del script en la página web.

Paso 1:

Colocar el siguiente código en la sección Head de la página web, indicando la ruta correcta en donde se encuentran los dos archivos javascript: jquery.js y wdpZoomer .js

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

Paso 2:

Realizar una copia de la imagen. Una de ellas es para la imagen pequeña o normal, la otra imagen mas grande será la utilizada para cuando se le aplique el zoom. Las imágenes colocarlas en la carpeta Img

Paso 3:

Luego se deberá añadir los siguientes atributos a la imagen: El ID, el ancho y el alto:

<img src="/wdpZoomer/img/imageToZoom.jpg" id="iniqueId" style="width:300px;height:400px;" />

Paso 4:

Por último colocar el siguiente bloque de código Javascript para llamar a la función que realiza el efecto:

<script type="text/javascript"> $(document).ready(function(){ wdpZoomer(180,120,4,2,8,"image1.jpg", "uniqueId1"); wdpZoomer(150,100,8,2,16,"image2.jpg", "uniqueId2"); wdpZoomer(200,200,4,1,5,"image3.jpg", "uniqueId3"); }); </script>

Nota. Se pueden realizar zoom a varias imágenes, solo debemos llamar a la función wdpZoomer y pasarle los valores: El ID de la imagen , el nombre del archivo, ancho y alto, min y max para el zoom.

Plataforma Javascript

Licencia : Open source -- GNU