WdpZoomer - Realizar Zoom a una imagen mediante Javascript.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

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

A continuación puedes ver las opciones y características de este ejemplo.

Mas información sobre el programa.

Indice - Contenido.

  1. Como realizar el zoom a una imagen.
  2. Otras características y opciones.
  3. Contenido del archivo de ejemplo.
  4. Instalación del script en la página web.
    1. Insertar el script en la sección head de la página web.
    2. Preparar las imágenes que se utilizarán para el zoom.
    3. Establecer propiedades y atributos de la imagen.
    4. Ejecutar la función para realizar el zoom.

 

1 - Como realizar el zoom a la imagen.

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.

Esta es una vista previa del ejemplo. (s el mismo que se incluye en el archivo de descarga.)

Nota: Aquí el factor de escala está configurado en 2, es decir que se hará zoom mostrando el doble del tamaño real de la imagen.

2 - 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.

3 - 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.

4.1 - Insertar el script en la sección head de la página web.

En el primer paso, se deberá 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.

4.2 - Preparar las imágenes que se utilizarán para el zoom.

Realizar una copia de la imagen que se utilizará para realizar el zoom.

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.

Nota: Las imágenes colocarlas en la carpeta Img.

4.3 - Establecer propiedades y atributos de la imagen.

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

4.4 - Ejecutar la función para realizar el zoom.

Por último, colocar el siguiente bloque de código Javascript. Este bloque de código lo que hace es llamar a la función que realiza el efecto.

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 de imagen
  • El valor para el ancho y el alto del gráfico
  • Los valores para establecer el min y max para el zoom.

Requerimientos de instalación y uso.

Lenguaje: Javascript. ( requiere librería jQuery )

Licencia : Open source -- GNU


Videos tutoriales.

No hay mas capturas del ejemplo

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
--
Licencia:
Gratis - Open source
Versión:
1.0
Idioma:
Inglés
Programa actualizado:
21 ENE 2011


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: