jQuery virtual tour

This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour !

Take a look at the demonstration.




This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated] : navigation uses the standard html tags <map> and <area> in accordance with w3c.

No need for Flash, Quicktime ou Java. Your visitors will not have to install any software to experiment your virtual tour.

We are building this extension for a current project : a game around art workcraft for Casa d’Art.

Note : Vertical text is displayed using the jQuery flipv plugin.


- In the <head> section, insert CSS ans javascript calls :

<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">
auto_start: 0,
start_position: 0
/* add your execution parameters here */
<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>

see available parameters list on the simple panorama viewer documentation.

- In the <body> section, add the panoramic image call, and the <map> object containing interactive areas coords (only ’rect’ type are supported).

If the <area> is pointing to a picture, you could add the ’thickbox’ class to have a pretty effect using the Thickbox plugin.

<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" />

And take a look at the example on the zip file.


Leave a comment