LeeMiBlog

Feed RSS
Feed RSS

Visita

MasQueTele

El Rincon de K

Directorios

Blogissimo
 
Blogalaxia
 
Blogosfera
 
Bitacoras.com

My Blog Log

Estadísticas

Clicky Web Analytics

Clicky

Zoom espectacular en Javascript
Escrito por Manu   
Miércoles, 20 de Febrero de 2008 23:00

Libreria para zoom en Javascript 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?

Tags See All Tags

javascript  programacion 

Hits: 1503
Comentarios (4)add comment
laura: ...
Esta espectacular este manejo de imagenes, gracias pore haberl recomendado
1

07-04-09
links0588: ...
gracias brother estaba buscando algo asi smilies/grin.gif
2

17-04-09
julio: ...
se podra poner esto en joomla 1.5, si es asi como se lo podria hacer? muy bueno el articulo
3

22-04-09
Migue_: ... http://www.leemiblog.com
Para Joomla 1.5 podemos usar alguna de las muchas extensiones que existen para realizar zoom en las imágenes. Mira a ver este, que creo que te servirá:

http://extensions.joomla.org/extensions/photos-&-images/photo-gallery/1468/details
4

23-04-09

Escribir comentario
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy
 

También te puede interesar: