Crear efecto Zoom en las Imágenes al hacer click

Crear efecto Zoom en las Imágenes al hacer click
31 Jul 2013

Este pequeño Código esta Diseñado para ver las fotos e imágenes de tamaño completo sin necesidad de recargar la página web , este script se llama FancyZoom, está proporcionando para crear un efecto suave, limpio, realmente similar a Mac, casi como si fuera una función de Safari en sí. 

Características:

  • Centrado en la más suave, la animación de zoom más pulida posible
  • Ajusta automáticamente las imágenes desde cualquier enlace de imagen, sin cambios HTML
  • Precargas imágenes a tamaño completo en el fondo en el enlace mouseover
  • No hay recursos pesados ​​librerías Javascript – 100% codificado a partir de cero para hacer un zoom
  • Dibuja una buena sombra bajo la imagen de tamaño completo para compensar desde la página
  • Usos función de “box-shadow” de Safari 3 para dibujar la sombra de forma nativa, no requiere imágenes
  • Requiere sólo dos nuevas líneas de código en el HTML
  • Probado y funciona con Safari, Firefox, IE7 y IE6. (Se ve mejor en los navegadores modernos.)

Desde FancyZoom es tan fácil de agregar a una página web, los animo a darle una oportunidad!

 

Instrucciones:

1. Descargar Fancy Zoom, Click aquí:

file-zip

FancyZoom 1.1.zip (53 KB)

2. Usar tu favorito Cliente FTP para subir tus archivos dentro de la carpeta donde tengas tu página web.

3. Añadir las siguientes lineas de código entre la sección del <head>.

<script src=”/js-global/FancyZoom.js” type=”text/javascript”></script>
<script src=”/js-global/FancyZoomHTML.js” type=”text/javascript”></script>

4. Añadir onload=”setupZoom()” dentro de la página en la sección del Body.

Ejemplo:

<body id=”whatever” […] onload=”setupZoom()”>

5. Esto es todo como por arte de magia tus imágenes tendrás un efecto único y limpio. (enlazar las imágenes para que funcione el script) Funcionará de esta manera:

<a href=”image.jpg”><img src=”image-thumbnail.jpg” /></a>

Detalles Adicionales:

Quieres añadir Texto a las imágenes? tan simple como agregar title en la etiqueta de href . Esto es todo.

Fancyzoom trabaja con cualquier extensión jpg, gif, png, bmp, o tiff.

Si en algún momento no quieres agregar el efecto de Fancyzoom en algunas de tus imágenes agrega rel="nozoom" en la etiqueta  href.

Espero lo disfruten y si tienen alguna pregunta no duden en preguntarme lo que necesiten en el link de Contáctenos.

 


Share

Diseño Páginas Web

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (No Ratings Yet)
Loading...

Comentarios

  1. […] Crea un efecto de Zoom con javascript de una manera muy sencilla  […]

Comentarios están cerrados