Welcome !
Located in the south of Auvergne, in France, an expert in free software provides you with modern communication tools on Internet.
Home     Company     Web references     Services    

> Free software > jQuery virtual tour

> jQuery virtual tour

This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour !

Take a look at the demonstration.

Introduction

This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated] : navigation uses the standard html tags <map> and <area> in accordance with w3c.

No need for Flash, Quicktime ou Java. Your visitors will not have to install any software to experiment your virtual tour.

We are building this extension for a current project : a game around art workcraft for Casa d’Art.

Note : Vertical text is displayed using the jQuery flipv plugin.

Use

- In the <head> section, insert CSS ans javascript calls :

see available parameters list on the simple panorama viewer documentation.

- In the <body> section, add the panoramic image call, and the <map> object containing interactive areas coords (only ’rect’ type are supported).

If the <area> is pointing to a picture, you could add the ’thickbox’ class to have a pretty effect using the Thickbox plugin.

And take a look at the example on the zip file.

Download

jquery-virtual-tour.zip

Free software under the GPL licence.

P.S.

Ulrich Schlüter, Wood sculptor based in La Chaise-Dieu-F-43160 (France)

Wednesday 9 April 2008

Reply to this article

24 Forum messages

  • jQuery virtual tour

    22 December 2009 21:02

    Hello guys,

    This application is awesome. I like it so much.Could someone help me with change of navigation arrows?how can I change them to another style? I would like to get something similar like here http://www.siteweventos.com/site/index.php?menu=weventos#

    thank you!

    Reply to this message

  • jQuery virtual tour

    22 December 2009 20:57

    THANK YOU!. this is simply awesome application. I like it. could somebody explain me how could I change and possibly move icons (arrows) for movement in virtual tour?I already adapted it to work on mouseover not on click, but I would like to get it to similar status as here http://www.siteweventos.com/site/index.php?menu=weventos#

    Thank you very much guys!

    Reply to this message

  • jQuery virtual tour

    26 November 2009 16:40, by Harsha
    Is this application free? can I use this on my website and change it a bit?

    Reply to this message

  • WOW

    12 November 2009 12:11

    Wow, this is great :)

    Can you please help me how to make motion instead of clicking on << and >> just to hover, and when you mouse-out to stop moving.. ?

    cheers

    Reply to this message

    • I am interested in this too 15 November 2009 11:44
      How to move left or right just on hover, and to stop on mouse out

      Reply to this message

      • I am interested in this too 24 November 2009 05:17, by Vinicius Stein Dani

        Hi there!

        First of all, sorry for my bad english spelling :$ I’m from Brasil. Second of all, if you want to use this script with a mouseover solution take a look at the jquery.panorama.js that come within this example.

        There, you’ll find some function binds like, for example, panoramaViewport.bind(’click’, function() … ); All you need to do is change all of the "click" by "mouseover" where you’d like to have the action changed, and it should work just fine ;) you may take a look for the example here www.siteweventos.com/site ;)

        []’s Have a good week ;)

        See online : http://www.vsdani.com/

        Reply to this message

  • it’s amazing

    10 November 2009 22:51
    this tour is very impressive..

    See online : Teknikim

    Reply to this message

  • jQuery virtual tour

    22 October 2009 21:33
    Great application! Just wondering if there was any way to use the jQuery hover effect to control the scrolling motion instead of the click event. I’m racking my brain trying to figure it out.

    Reply to this message

  • jQuery virtual tour

    19 October 2009 13:26, by Shady A.Sharaf

    Great work!

    Just a small tip, to make the advaced panorama work for newer jQuery versions, you just have to replace

    [@name=

    by

    [name=

    as @attribute is not working anymore in jQuery version 1.3

    Thanks again for the great work

    See online : http://blog.gr80.net

    Reply to this message

  • jQuery virtual tour

    2 October 2009 18:37, by Ptitscar

    Bonjour

    ça fait un jour que j’essai de faire tourner virtual tour avec la dernière version de jquery, la version 1.3.2 . J’ai remarquer qu’en repassant en 1.2.3 comme dans l’exemple celà fonctionne or j’utilise d’autre plugin et je ne souhaite pas utiliser plusieurs version sur mon site. 1. pour rendre un lien (map) cliquable j’ai rajouté # dans usemap. 2. malheureusement le cadre pour le mettre en valeur et flipv n’apparaissent pas.

    avez-vous une solution ou un exemple qui fonctionne avec cette dernière version de jquery?

    merci beaucoup

    PS: sinon, y’a rien a dire, ce plugin est excellent, bravo!

    Reply to this message

  • jQuery virtual tour

    16 August 2009 10:22, by Laurent
    J’ai du finalement pour l’applet thickbox, insérer le fichier.css dans le css de ma page, du coup cela fonctionne. Il ne me reste plus qu’à trouver comment renforcer la visibilité des boutons de navigation (problème d’opacité?).

    See online : http://www.grainedenature.net

    Reply to this message

  • jQuery virtual tour

    16 August 2009 10:09, by Laurent
    Bonjour, je n’arrive toujours pas à faire fonctionner l’applet "thickbox" et les images pour la navigation sont presque invisibles, y a t-il des réglages particuliers à mettre en place?

    See online : http://www.grainedenature.net

    Reply to this message

  • jQuery virtual tour

    5 July 2009 14:46, by Laurent
    Ravi de découvrir ce viewer panoramique qui plus est pourrait m’intéresser fortement pour créer des visites virtuelles de projets de décoration intérieure et les mettre en place sur mon blog. Reste à comprendre son fonctionnement… merci pour cette visite.

    See online : http://www.grainedenature.net

    Reply to this message

  • jQuery virtual tour

    25 June 2009 11:13
    This is really great.

    Reply to this message

  • jQuery virtual tour

    27 February 2009 11:16, by swishi

    Bonjoour! Sorry to write in english but my french is not that good… :-)

    What a great script! Many Thanks!

    Just one question: Would it be possible to publish a toutorial about shooting the pictures used for the virtual tour or how to prepare pictures for that such as the equipment! Maybe knows a existing toutorial about that… and could publish the links?

    I think it would be of help for all users using your script!

    Very best regards from Switzerland

    SWISHI

    Reply to this message

  • jQuery virtual tour

    7 November 2008 12:19

    Bonjour, je cherche un moyen de faire des panorama-objets (ou trouve de l’info avec la dénomination "quicktime VR objets", un exemple est visible sur ce site qui présente de superbes objets archéologiques interactif en 3D). Il me semble que la technologie doit être bien proche de ce qui est proposé dans cet article !

    Sinon, vraiment très bien cette visite virtuelle et surtout une vraie alternative aux plug-ins et technologie annexes !

    Reply to this message

  • jQuery virtual tour

    6 November 2008 13:48, by eebee

    Superbe cette visite virtuelle, merci, merci merci encore jquery et merci à toi.

    C’est bien simple, maintenant, quand je cherche à faire quelque chose de clean et sympa, je cherche d’abord autour de jquery.

    eebee

    Reply to this message

  • jQuery virtual tour

    27 September 2008 16:04, by Zoowy

    Superbe visite virtuelle, évitant l’emploi de QT ou Flash. Les messages de remerciements sont rares, moi meme je ne remercie pas assez, alors j’essaie de me rattraper avec ce message. Merci beaucoup!!

    Zoowy

    Reply to this message

  • jQuery virtual tour

    17 April 2008 17:28, by azerttyu

    Bonjour

    Le script tourne parfaitement sur nos navigateurs :)

    Deux suggestions suite à son utilisation :

    • pouvoir stopper le panorama lorsqu’on click sur une zone de la map, cela fait un peu bizarre lorsque l’image continue à rouler dessous l’image ouverte par thickbox.
    • pouvoir accélerer/ralentir la vitesse de rotation lorsqu’on clique sur les fleches.

    En tout cas on adore :)

    Reply to this message


Follow-up of the site's activity :: Site Map :: Mentions légales :: Contact :: SPIP :: OpenStudio - 2 rue Pierret 43000 Le Puy en Velay - +33 (0) 4 82 53 02 01