Micaela 20 de Septiembre de 2008 a las 10.00
   Imprimir artículo
elWebmaster.com

Zoom sectorizado en imágenes de alta resolución con Javascript


Zoom sectorizado en im√°genes de alta resoluci√≥n con JavascriptA la hora de presentar en una web im√°genes muy grandes, de alta resoluci√≥n, muchas veces uno no est√° muy seguro de cu√°l es la mejor forma de hacerlo sin que las mismas pierdan calidad o desentonen en nuestro dise√Īo y sin que sea necesario abrirlas en una ventana aparte. Una posible soluci√≥n a nuestro problema es utilizar ShiftZoom.js

Este Script nos permite muy f√°cilmente presentar la imagen en un tama√Īo reducido, y sin nunca modificar ese tama√Īo, realizar un zoom sobre distintos sectores de la misma, pudiendo desplazarse por el √°rea ampliada.

De esta forma presentamos la imagen en forma completa, dando la opción al usuario de observarla más detalladamente sin que deba cambiar de página ni se produzca un cambio en nuestra maquetación.

Su uso es muy sencillo, tan sólo debe bajarse el archivo Js (haz clic aquí) y luego se lo debe enlazar agregando el siguiente código:

<script type="text/javascript" src="shiftzoom.js"></script>
<scriptscript type="text/javascript">
shiftzoom.defaultCurpath='imagenes';
</script>

Por ejemplo:
<div><img onLoad"="shiftzoom.add(this);" width="400" height="200" src='imagen.jpg'></div>

Con s√≥lo hacer esto ya estar√° creada la imagen, que en el ejemplo se presentar√° reducida a 400 por 200 px y nos permitir√° ampliarla y ver secciones del mismo tama√Īo.

Realmente vale la pena utilizarlo ya que genera un acabado sumamente profesional para presentar, por ejemplo, fotografías o cuadros.

Fuente: Ajaxian


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. marco dice:

    Exelente scrip me sera de mucha ayuda para el proyecto web que estoy montando….Gracias por publicar estas utilidades web.

    Hasta pronto y gracias

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión