Display 360° panoramas with Jquery.reel

There's a plugin for the Jquery library named Reel used to display animation sequences. It has also an option useful for displaying stitched images, and it's particularly helpful when dealing with 360 degree panoramas.

We have to download and put in the same folder as the Reel these libraries in gzipped version:
-Jquery
-jQuery.DisableTextSelect
-jquery-mousewheel

Another preliminary step is cutting the first frame of our panorama:
if we are going to display the image '360example.jpg' sized 2000x300 in a squared div we'll cut the first 300x300px square of the image. We have to rename the original image as '360example-reel.jpg' and the newly created image as '360example.jpg' (they must have the same name except for the '-reel' part).

First we have to include the libraries.

<link href='{path-to-reel-folder}/reel.css' rel='stylesheet' type='text/css' />
<script src='{path-to-reel-folder}/jquery-1.4.2.min.js' type='text/javascript'></script>
<script src='{path-to-reel-folder}/jquery.reel-min.js' type='text/javascript'></script>
<script src='{path-to-reel-folder}/jquery.disabletextselect-min.js' type='text/javascript'></script>
<script src='{path-to-reel-folder}/jquery.mousewheel-min.js' type='text/javascript'></script>

The reel.css which we must include simply contains

.jquery-reel
{ border: 2px solid #000; margin: 2em 0; }

I've set a black border around the image to highlight it, but you can set it to 0.

Next, we include the image and the script; the image must be in a logical part of the page.

<div id="DIVname">
<img id='IMGid' src='360example.jpg' width='300' height='300'/>
</div>
<script type='text/javascript'>
$(document).ready(function(){ $('#IMGid').reel({ stitched:2000, indicator: 10 }); });
</script>

Note that the script requires an id for the image, and in the options we must set the original image horizontal size (stitched:) and the size of the squared indicator displayed on the image.