Loading ...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% [?]
Laisser un commentaire