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.

LightBox / LightNav

LightBox is the famous Javascript library used to display images without any popup and with some nice effects.
It's easy to implement on websites but has some limitations, as e.g. the inability to pan images bigger than the screen.javascript:void(0)
A fork of Lightbox called LightNav is designed to manage this problem. It overloads parts of the Lightbox library, enabling panning of big images through mouse dragging.

How to use

<script src="{path-to-folder}/prototype.js" type="text/javascript"></script>
<script src="{path-to-folder}/scriptaculous.js" type="text/javascript"></script>
<script src="{path-to-folder}/lightbox.js" type="text/javascript"></script>
<link href="{path-to-folder}/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
<script src="{path-to-folder}/lightnav.js" type="text/javascript"></script>
<script src="{path-to-folder}/photonav.js" type="text/javascript"></script>
<link href='{path-to-folder}/photonav.css' rel='stylesheet' type='text/css' />

Including these stylesheets and javascripts, you now can cope with both little images and enormous images.
A tweak you may set is in the Lightnav.js file (at the top) in which you can modify the max size of the box displaying image.

In the body, where you had your little thumbnail, you have to modify the code as follows:

<a href="BIIIGimage.jpg" rel=
"lightbox[eventualAlbum]" title="description Of the image"><img src=
"THUMBNAILimage.jpg" width="xxx"
alt="" /></a>

You can group images modifying the rel attribute inserting the name of the group in square brackets: they could then be navigated with the Previous & Next arrows.
That's it.
Stefano