Welcome !

Located in the south of Auvergne, in France, an expert in free software provides you with modern communication tools on Internet.

Accueil     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

39 Forum messages

  • jQuery virtual tour

    25 June 17:07, by John Doe

    Hey, awesome script. Only issue I’m having is adding more controls to the bottom, right beside the left, stop, and right controls. I’m not really sure how to go about doing this, so any help would definitely be appreciated.

    Thanks! :)

    Reply to this message

  • jQuery virtual tour

    7 June 16:40, by Chris

    HI, Great script. Is it possible to set I up so when a user clicks on the image they can drag it left or right, as well as use the navigation buttons. I am building a virtual tour of our building and we will be using a touch screen interface and I would like it so the users can simply swipe the image left or right. Any help will be appreciated

    Reply to this message

    • jQuery virtual tour 11 June 21:29

      I’m pretty much interested in doing the same thing. However, I’m trying to avoid creating separate HTML pages for each navigation possibility. I have no idea how I’d automatically generate them and I really don’t want to do it manually.

      Reply to this message

      • jQuery virtual tour 24 June 16:39, by Chris

        You might be able to use php to generate pages from a database. I have done it with separate html pages for each room, but I still haven’t found a way to get it working nice with a touch screen. So far I have managed to get the images locked so it doesn’t glitch out any more when someone tries to swipe it left or right (used to start dragging the image off the page).

        Reply to this message

    • jQuery virtual tour 25 June 13:27, by Arnault Pachot

      Hi,

      I just have implemented this fonctionality on the new version. We works currently for a museum and have the same need.
      hope you will enjoy running the virtual tour on a touch screen

      Arnault

      Reply to this message

  • jQuery virtual tour

    25 May 19:47

    Hello, the 360 degree view only clone the panoramic photo but does not clone the hot links (usemaps) that are attached to the photo. The hotlinks at some scrolled positions of the view are not clickable. Can anyone assist in this matter?

    Reply to this message

  • jQuery virtual tour

    24 May 17:40

    Hello, I would like to use the 360 degree view but the clone() function only clones the image but not the usemap (the hot links). It works fine with right arrow but the hot links disappear with the left arrow. Thanks.

    Reply to this message

  • jQuery virtual tour

    23 May 16:36

    Je viens de tester votre démo sous Firefox 3.5.9 en désactivant le javascript...

    et ça ne fonctionne plus du tout. Donc, contrairement à ce que vous avancez, le javascript est nécessaire. (puisqu’il utilise jQuery...)

    Mais belle réalisation tout de même. ^^

    Reply to this message

  • jQuery virtual tour

    12 May 16:46, by Gabriel de Kadt

    Suggested improvement: add

    onmousedown="return false;" ondrag="return false;"

    into the main pano img - helps stop the "UI" from going screwy under normal use (users have dried dragging the pano img and it "went ugly")

    ie
    <img src="img/sculpteur.jpg" class="advancedpanorama" width="2448" height="375" usemap="testmap" alt="Atelier du sculpteur" />
    becomes
    <img src="img/sculpteur.jpg" class="advancedpanorama" onmousedown="return false;" ondrag="return false;" width="2448" height="375" usemap="testmap" alt="Atelier du sculpteur" />

    If I was more clever I would do this in the Head using jQuery. But I’m not - so I won’t.

    site will go live soon at http://villamiradormarbella.com

    Thanks again

    Reply to this message

  • jQuery virtual tour

    12 May 10:53, by Gabriel de Kadt

    You guys are great. I spent a long time looking for an easy to implement VR panorama solution for a website I’ve just coded (and shot the photos for; I like to get away from this desk occasionally)... http://villamirador.qreativbox.com/...

    Yours is jQuery pano viewer is lightweight, easy to set-up, clearly commented and generally terrific. And it supports hotlinks too. (Note to others see comment below re adapting @name in jquery.advanced-panorama.js for current versions of jQuery.)

    Many thanks for putting this out to GPL. Let me know if you have a "tip jar" as I’d love to send a donation as a thank-you.

    Merci bien!

    See online : http://lazydada.com

    Reply to this message

  • jQuery virtual tour when place on a popup/lightbox div.

    3 March 08:01, by janlie macdovish

    Wow this is great..!

    this is a great way in replace to Flash, Quicktime and Java..
    Just thinking if there is a way where i can used this one in a popup/lightbox div where the image is place and do the virtual tour? Coz i tried it, but im getting some errors in the jquery.js "Invalid Argument" in line 24 col 1337. I think it has something to do with the lightbox where i place this one. Any help?

    thanks a lot.

    Reply to this message

  • 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/in...

    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/in...

    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

        • I am interested in this too 8 February 20:05

          Is it possible to control the speed of the tour with the mouse drag or mouse move event such as the tour can spin fast or slow depending on the speed of the mouse? Any response is greatly appreciated. thanks..

          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 - 10, rue Chènebouterie 43000 Le Puy en Velay - +33 (0) 4 82 53 02 01