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