jQuery virtual tour

Take a look at the demonstration.

Introduction

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 in accordance with w3c.

Use

 In the 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"> $(document).ready(function(){ $("img.advancedpanorama").panorama({ auto_start: 0, start_position: 0 /* add your execution parameters here */ }); }); </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>

In the 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" /> </map>

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

Download

jquery-virtual-tour.zip