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
Loading ...