DISEÑO Y SERVICIO WEB, RECURSOS EN LINEA, TUTORIALES, PROGRAMAS Y MÁS...

miércoles, 4 de noviembre de 2009

Visor de Imágenes panorámicas con JQuery

Crear un visor de imágenes panorámicas con JQuery

Como les prometí continué mi búsqueda de distintas opciones para colocar imágenes o fotografías panorámicas en una web...
Fue entonces que encontré una buena opción usando JQuery (Ver Ejemplo) , aquí les dejo los pasos:

1. Descargar el archico jquery.panorama.zip y descomprimirlo. En él se ecuentran todos los archivos para lograr el efecto; esta carpeta deberá estar en tu sitio web contiene estilos css, scripts y una carpeta para las imágenes, en ella deberás colocar tú imagen panorámica.
Descargar aquí
2.Coloca en el head de tu página el siguiente código.

<link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.panorama.js"></script>

3.Este otro código colócalo en el cuerpo de tu web (body) donde deberá aparecer el visor.

<img src="img/atelier.jpg" class="panorama" width="2642" height="375" />

Modifica donde dice img/atelier.jpg, por el nombre de tu archivo de imagen colocado en al carpeta img
Pruébalo se ve muy bien...
Si te queda una duda no dudes en dejarme un comentario...

Si te interesa el tema tienes más información y opciones en la siguiente web (muy recomendable)
Panorámicas 360º, 8 formas de incrustarlas

5 comentarios:

  1. Amigo muy bueno, justo es lo que buscaba.
    Muy agradecido.
    Augusto Hurtado

    ResponderEliminar
  2. Definitivamente lo mejor que he encontrado, el otro estilo de visita virtual de openstudio esta muy bueno tambien. Gracias amigo. Ya te sigo en tu feed :)

    ResponderEliminar
  3. Muy buen aporte, es lo mejor que he encontrado en este tipo de herramientas. Desde ahora teneis otro fan de vuestro blog.

    Dref

    ResponderEliminar
  4. Esta bueno el programita y lo utilizo. Lo que no puedo es hacer que se amplie el visor,poder darle medida mas rectangular mas larga. Intente con los style del CSS y nada.
    Alguna ayuda?

    ResponderEliminar