jQuery virtual tour - Para crear visitas virtuales

Publicado por Nikko el dia 17 Apr 2008 - Guardado en Galerias, Scripts 1,848 Views

vitualjquery.jpg

jQuery virtual tour una extensión para simple panorama viewerr que nos permite jugar un poco más con jQuery añadiendo interactividad al transformar algunas vistas panorámicas en una visita virtual. jQuery virtual tour tiene la particularidad de ser accesible y puede funcionar incluso si el javascript no se ha activado. Para la navegación utiliza las etiquetas estándar < map > y < area /> con las cuales crearemos áreas en nuestro Tour virtual con información adicional. Quizas lo mejor sea que no hay necesidad de utilizar Flash, Quicktime o Java.

Ver Demo - Mas info jQuery virtual tour
Uso
En Nuestro encabezado < head >, realizamos las llamadas correspondientes

JavaScript:
<link rel="stylesheet" type="text/css" href="css/thickbox.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.panorama.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("img.advancedpanorama").panorama({
                    auto_start: 0,
                        start_position: 0
            /* add your execution parameters here */
             });
    });
</script>
<script type="text/javascript" src="js/cvi_text_lib.js"></script>
<script type="text/javascript" src="js/jquery.advanced-panorama.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>

En nuestro contenido añadimos la imagen panorámica, y creamos las áreas interactiva mediante coordenadas. Añadimos la clase “thickbox” si se trata de imágenes.

HTML:
<img src="img/sculpteur.jpg" class="advancedpanorama" width="2448" height="375" usemap="testmap" alt="Atelier du sculpteur" />
<map id="testmap" name="testmap">
        <area shape="rect" coords="1653,72,1839,255" href="index.html" alt="vers la salle de formation" />
        <area shape="rect" coords="2013,114,2091,210" href="img/statue1.jpg" alt="statues" class="thickbox" />
        <area shape="rect" coords="1920,276,2070,351" href="img/gouges.jpg" alt="gouges" class="thickbox" />
</map>

  • No Related Post
  1. [...] añadiendo interactividad al transformar algunas vistas panorámicas en una visita virtual. Via Xyberneticos 0 [...]

  2. [...] Link a Jquery Virtual Tour        Vía | Xyberneticos [...]

  3. Esta genial, veo su futuro en algun sistema de venta de casa :)

  4. Ricardo - Gravatar

    Ricardo

    17-04-2008

    Permalink

    Como lo dice diego... yo tambien le veo futuro en algun proyecto sobre inmobiliarias, muchas gracias amigo... un click mas por este como por otros muchos gracias

  5. [...] un “plugin” para jQuery del que me enconteré en xiberneticos que funciona a partir de simple panorama viewer, además las imágenes pueden ser accesadas aun si [...]

  6. Nestor - Gravatar

    Nestor

    17-04-2008

    Permalink

    Excelente extensión, la empeze a utilizar en un pequeño proyecto, pero no quiero que sea 360° sino que tenga un inicio y fin del recorrido no sé si me explico. Se que con

    $(document).ready(function(){
    $("img.advancedpanorama").panorama({
    auto_start: 0,
    start_position: 1527
    });
    });

    empieza, pero ¿como la detengo?...por ejemplo si quiero que se detenga en la posición 500
    ¿no sé si me explico?



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: