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í:
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.
