Webdesign et développement

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 :

<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
			/*ajoutez ici éventuellement d'autres 
                          paramètres d'exécution */
	         });
	});
</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/jquery.flipv.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>

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

24 Messages de forum

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/index.php ?menu=weventos#

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/index.php ?menu=weventos#

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
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 9 novembre 2009 22:08
  
  It’s working really good on http://www.abruzzen-online.de/de/360-panoramen
  
  Great work and thank you very much !
  
  Voir en ligne : http://www.abruzzen-online.de/de/36...
  
  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 7 novembre 2008 13:07, par Arnault Pachot - OpenStudio
  
  Salut,
  
  Pour les objets regarde sur le lien suivant : http://www.thoro.de/portfolio/versc..., ça a l’air génial.
  
  C’est une technologie également basée sur javascript, qui permet donc d’éviter les technologies propriétaires.
  
  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
- jQuery virtual tour 18 avril 2008 23:28, par Arnault
  
  Salut azertu !
  
  les spipiens viennent me rendre visite ;)
  
  je viens de faire une nouvelle version : le scroll s’arrête si on clique sur l’image.
  
  a+
  
  Répondre à ce message
- jQuery virtual tour 21 avril 2008 21:13, par Antol
  
  Sorprendete, Felicitaciones !!!!!!!!!
  Voir en ligne : Oscar Antolinez
  
  Répondre à ce message
  - jQuery virtual tour 8 mai 2008 23:48
    
    Génial ce script merci . Un truc sympa ca serais de faire défiler le pano en mettant le curseur de la souris sur le coté de l’image mais je sais pas si c’est possible en javascript .
    Répondre à ce message

:: Plan du site :: Mentions légales :: Contact :: SPIP :: OpenStudio - 2 rue Pierret 43000 Le Puy en Velay - +33 (0) 4 82 53 02 01