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

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.

Usage:

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

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

Demo: http://openstudio.fr/jquery-virtual-tour/
Download: http://www.openstudio.fr/download/jquery-virtual-tour.zip
Source: http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en

Related Listings:

1. jQuery Virtual Keyboard – For Safer Forms For those of us who travel often, we often end...
2. ThickBox 2.1.1 A Webpage UI Dialog Widget Features: * ThickBox was built using the super lightweight jQuery...
3. Jquery – akModal alternative to thickbox t is a modal pop up box. It can be...
4. EO Gallery-Jquery EOGallery is a web animated slideshow gallery maid with jQuery....
5. jTip – jQuery Tool Tip Hot on the heels of ThickBox comes jTip, a jQuery...

Do you like this post?

Email: