Bienvenue !

Implantés dans le Midi de l’Auvergne et spécialistes des technologies libres et accessibles, nous vous accompagnons dans votre communication sur internet.

Accueil     Entreprise     Portfolio     Offre    

> Logiciels libres > jQuery virtual tour

> jQuery virtual tour

Voici une extension au viewer simple de panoramas, pour jouer un peu plus avec jQuery et pouvoir cliquer sur les vues panoramiques afin de créer une visite virtuelle !

Sans plus attendre, voici une démonstration.

Présentation

La particularité de ce module de visite virtuelle, c’est qu’il est accessible et utilisable, même sans javascript, puisque la navigation s’appuie sur la balise <map>, conforme au w3c.

Il n’y a pas non plus besoin de technologie Flash, Quicktime ou Java. Le visiteur n’est pas contraint d’installer un logiciel pour voir la visite virtuelle.

L’affichage vertical du titre est réalisé grâce au plugin jQuery flipv.

Nous réalisons cette extension dans le cadre d’un projet de jeu pédagogique sur les métiers d’Art pour Casa d’Art.

Utilisation

- dans la partie <head> de votre page, insérez les appels aux css et fichiers javascript :

voir la liste des paramètres disponibles sur la documentation du viewer simple de panoramas.

- puis dans la section <body>, ajoutez l’appel à l’image panoramique, ainsi qu’un objet <map> contenant les coordonnées des zones réactives (nous ne gérons pour l’instant que les zones de type ’rect’).

Si le lien pointé par l’objet <area> est une photo, vous pouvez ajouter la classe ’thickbox’ pour un effet visuel sympa avec le plugin Thickbox pour jQuery.

Vous pouvez vous inspirer de l’exemple fourni dans le zip.

Téléchargement

jquery-virtual-tour.zip

Logiciel libre sous licence GPL.

P.-S.

L’atelier en exemple est celui de Ulrich Schlüter, sculpteur sur bois installé à La Chaise-Dieu-43160

mercredi 9 avril 2008

Laisser un commentaire

39 Messages de forum

  • jQuery virtual tour

    25 juin 17:07, par 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 ! :)

    Répondre à ce message

  • jQuery virtual tour

    7 juin 16:40, par 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

    Répondre à ce message

    • jQuery virtual tour 11 juin 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.

      Répondre à ce message

      • jQuery virtual tour 24 juin 16:39, par 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).

        Répondre à ce message

    • jQuery virtual tour 25 juin 13:27, par 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

      Répondre à ce message

  • jQuery virtual tour

    25 mai 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 ?

    Répondre à ce message

  • jQuery virtual tour

    24 mai 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.

    Répondre à ce message

  • jQuery virtual tour

    23 mai 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. ^^

    Répondre à ce message

  • jQuery virtual tour

    12 mai 16:46, par 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

    Répondre à ce message

  • jQuery virtual tour

    12 mai 10:53, par 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 !

    Voir en ligne : http://lazydada.com

    Répondre à ce message

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

    3 mars 08:01, par 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.

    Répondre à ce message

  • jQuery virtual tour

    22 décembre 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 !

    Répondre à ce message

  • jQuery virtual tour

    22 décembre 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 !

    Répondre à ce message

  • jQuery virtual tour

    26 novembre 2009 16:40, par Harsha

    Is this application free ? can I use this on my website and change it a bit ?

    Répondre à ce message

  • WOW

    12 novembre 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

    Répondre à ce message

    • I am interested in this too 15 novembre 2009 11:44

      How to move left or right just on hover, and to stop on mouse out

      Répondre à ce message

      • I am interested in this too 24 novembre 2009 05:17, par 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 ;)

        Voir en ligne : http://www.vsdani.com/

        Répondre à ce message

        • I am interested in this too 8 février 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..

          Répondre à ce message

  • it’s amazing

    10 novembre 2009 22:51

    this tour is very impressive..

    Voir en ligne : Teknikim

    Répondre à ce message

  • jQuery virtual tour

    22 octobre 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.

    Répondre à ce message

  • jQuery virtual tour

    19 octobre 2009 13:26, par 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

    Voir en ligne : http://blog.gr80.net

    Répondre à ce message

  • jQuery virtual tour

    2 octobre 2009 18:37, par 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 !

    Répondre à ce message

  • jQuery virtual tour

    16 août 2009 10:22, par 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é ?).

    Voir en ligne : http://www.grainedenature.net

    Répondre à ce message

  • jQuery virtual tour

    16 août 2009 10:09, par 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 ?

    Voir en ligne : http://www.grainedenature.net

    Répondre à ce message

  • jQuery virtual tour

    5 juillet 2009 14:46, par 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.

    Voir en ligne : http://www.grainedenature.net

    Répondre à ce message

  • jQuery virtual tour

    25 juin 2009 11:13

    This is really great.

    Répondre à ce message

  • jQuery virtual tour

    27 février 2009 11:16, par 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

    Répondre à ce message

  • jQuery virtual tour

    7 novembre 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 !

    Répondre à ce message

  • jQuery virtual tour

    6 novembre 2008 13:48, par 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

    Répondre à ce message

  • jQuery virtual tour

    27 septembre 2008 16:04, par 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

    Répondre à ce message

  • jQuery virtual tour

    17 avril 2008 17:28, par 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 :)

    Répondre à ce message


Suivre la vie du site :: Plan du site :: Mentions légales :: Contact :: SPIP :: OpenStudio - 10, rue Chènebouterie 43000 Le Puy en Velay - +33 (0) 4 82 53 02 01