Because of my hoster you need to hit "Stop"

jQuery panorama plugin

Overview

jQuery panorama plugin is used to create 360° panoramas on the current page through the power and flexibility of jQuery's selector.
Just look below see it in action.

Example

Source used in this example.

$(document).ready(function(){
	$("img[rel*=panorama]").panorama();
	$("a.panormaarea[href$=jpg]").each(function(){
		$(this).lightBox();
	});
});

How to use

Parte 1 - Setup

jQuery panorama plugin uses the jQuery JavaScript library, only. So, include just these two javascript files in your header.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.panorama.js"></script>

Include the CSS file responsible to style the jQuery panorama plugin.

Part 2 - Activate

You don't need to modify your HTML markup to use jQuery panorama plugin. Just use the power and flexibility of jQuery's selector and create a set of related images.

The only necessity is to have a HTML markup likes it:

<img src="panorama.jpg" rel="panorama" width="2560" height="500" usemap="testmap" alt='Panorama' />
<map id="testmap" name="testmap"> 
	<area shape="rect" coords="100,100,200,350" href="foo.jpg" alt='Foo' /> 
	<area shape="rect" coords="1000,100,1100,400" href="bar.htm" alt='Bar' /> 
</map>

After it, select the images and call the jQuery panorama plugin. See some examples:

$(function(){
	// basic using
	$("img[rel=panorama]").panorama();
	//This, or...
	$("#panorama img").panorama();
	//This
	$("img#panorama").panorama();
});

Extend

Settings

jQuery panorama plugin has some configurations that you can define when call it. With that configurations you can customize your jQuery panorama plugin.

The configurations available are:

width - Used to define the width of panorama. Default it will be set to 4/3 of the height.
lefttext - Used to define the text on "move left" button. "<-" is default.
righttext - Used to define the text on "move right" button. ">-" is default.
showalttext - Show of not show the alt text from area tag in panorama. Default is true

Example.

$(function(){
	// basic using
	$("img[rel=panorama]").panorama();
	//change button text
	$("img[rel=panorama]").panorama({lefttext:'move left',righttext:'move right'});
	//didsable showing alt text in panorama
	$("img[rel=panorama]").panorama({showalttext:false;});
});

Using with other plugins

You can use the panorama plugin with all other plugins without limitation. A good idea is to use some lightbox to show linked images. You can do it so

$(function(){
	//turn links to images inside of the panorama into panoramaes
	$("a.panormaarea[href$=jpg]").each(function(){
		$(this).panorama();
	});
});

Download

Css File