Menú efecto deslizante con jQuery

En Andrew Valums´blog he visto un efecto creado con jQuery. El resultado es un menú vertical de imágenes con efecto deslizante. Una discreta información de carga se muestra en la parte superior así como la posibilidad de mostrar un tooltip con transparencia sobre la imagen.

El resultado de todo eso nos lo muestra el autor en el siguiente ejemplo.

Lo que hice fue modificar un poco el ancho, pensando que una sidebar suele medir aproximadamente 220px y lo adapté para unas imágenes de 215 x 100

En plantilla edición de HTML añadimos justo antes de ]]></b:skin>

<style type='text/css'>
div.sc_menu_wrapper {
position: relative;
height: 400px; /* height es la altura debe ser mayor que la altura de una imagen para formar el scrollbar. */
width: 220px; /* width es la anchura que no debe ser superior a la sidebar */
margin-top: 30px;
overflow: auto;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 215px;
border: 2px rgb(79, 79, 79) solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

/* color y fondo efecto hover */
color: #fff;
background: rgb(79, 79, 79);
}
.sc_menu a:hover {
border-color: rgb(130, 130, 130);
border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading { /* estilos de carga */
position: absolute;
top: 50px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
.sc_menu_tooltip { /* estilos tooltip */
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid rgb(79, 79, 79);
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
}
</style>

En los estilos he añadido lo que podemos cambiar.
Los colores deben ser en rgb.
Sustituimos "Url-enlace" por la url de nuestro enlace y "Url-imagen" por la de nuestras imágenes.

Ahora justo antes de </head> añadimos:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>;

Si ya estamos usando jQuery en la plantilla omitimos el paso anterior.
Copiamos el contenido de este archivo de texto y lo pegamos antes de antes de </head>
Y por último nos queda el HTML, editamos un gadget de HTML y en su interior añadimos:

<div class="sc_menu_wrapper">
<div class="sc_menu">
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
</div></div>

Completamos el código anterior añadiendo en title="Título" el texto que se mostrará en el tooltip.
En Url-imagen añadimos la url de cada imagen.
Con Url-enlace lo sustituimos por la url del enlace que vamos a añadir.