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


 A 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.

 

 

Anuncios

no tienes permiso de mandar mensajes

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s