Index of web technologies articles

Here's the index of articles I wrote about the technologies I used in my site. Each of them describes how to use them through descriptions and code snippets.

-HTML Tidy Batch Processing
An article on optimizing your html code to pass the validator test iterating a little utility.
-LightBox & LightNav
Lightbox is a nice effect for display images, Lightnav is an extension of Lightbox for bigger images.
-Usage of Jquery Reel for 360° panoramas
Display your cylindrical panorama using only a bit of javascript.
-Personalized maps using Google Maps API: usage, markers, routes
Walkthrough to build a simple map and personalize it.
-PTQ Guestbook v.0.2.1
My guestbook application: simple, easy and customizable.
-PTQ JS Clock v.0.1
My javascript clock, easy to use and display

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