jQuery virtual tour gratuit
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
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.
- Démonstration : virtual Tour
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
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.
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.
<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>
Vous pouvez vous inspirer de l’exemple fourni dans le zip.
Téléchargement
Popularité : 11% [?]
Loading ...
Laisser un commentaire