Bueno hace tiempo que no publico nada sobre Javascript, a pesar de la buena acogida que tuve el artículo sobre los calendarios en Javascript, pero acabo de ver esta librería para hacer un Zoom con efecto que me pareció muy bueno, así que aquí os lo comento para compartirlo con vosotros.
Esta librería, cuya web del autor para ampliar información y/o bajaros el fichero zip con ella es: http://www.cabel.name , nos permite mostrar fotos e imágenes en linea sin necesidad de cargar páginas web separadas, ni modificar html, ya que capturará cualquier enlace a una imágen en vuestra página y la sustituirá automáticamente con el zoom en la misma página en la web del autor podeis ver una demo de como funciona.
A continuación os explico como instalarla y sus principales características.
Las características de esta librería son las siguientes:
- Esta orientada ha conseguir un efecto de zoom suave y muy bien acabado.
- Escala las imágenes automáticamente desde cualquier enlace, sin cambios en el HTML.
- Hace precarga de las imágenes a tamaño completo, de fondo, para el evento “mouseover”.
- No usa recursos muy pesados y está programado desde cero.
- Muestra un efecto de sombra en la imagen mostrada a tamaño completo.
- Solo necesita incluir dos lineas de código en tu HTML.
- Chequeado y funcionando con Safari, Firefox, IE7, e IE6. (se ve mejor en navegadores modernos).
Y las instrucciones para instalarlo son muy fáciles:
1. Bájate el paquete de FancyZoom de la web del autor de aquí.
2. Con tu cliente FTP sube a tu servidor las dos carpetas que hay en el zip al directorio raiz u otro (pero entonces ten encuenta cambiarlo en el código del siguiente punto).
3. Añade las dos siguientes lineas a la sección <head> de tu fichero html
<script src="/js-global/FancyZoom.js" type="text/javascript"></script><script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
4. Añade onload=”setupZoom()” dentro del tag <body>
<body id="elquesea" [...] onload="setupZoom()">
5. Y ya está el resto es automático, los enlaces a imágenes de tu página harán el zoom automático en la misma página.
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>
Fácil ¿eh?
Joder tio, si está dentro la raiz no hace falta poner el “/” delante de la ruta me haz echo llorar como una hora tratando de buscar el por que no me salia, deberia ser asi
Saludos, gracias por el código!
man tengo un problema, ya me funciona el codigo pero le doy clic a cualquier imagen, esta no me abre con las imagenes qe se encuentras dentro de las carpetas, sabes a que se debe?
Me pasa lo mismo que a shintaro…ya funciona bien el código. Tengo la imagen miniatura y me genera la grande, pero no me aparecen las img- de la carpeta images-global / zoom /…
Que tengo que hacer?? alguien me puede ayudar de favor!!
gracias