Explicacion de cualquier pedazo de codigo 
Código HTML:
$(function()
{
var $Actual = 0;
var $VelocidadDesvanecido = 400;
var $VelocidadAnimacion = 600;
var $TipoEase = 'easeOutCirc';
var $TiraImagenes = $('#miniatura_de_desplazamiento');// obtenemos el id div contiene los divs con las imagenes de la tirascroll
var $ScrollContenedor = $TiraImagenes.find('.contenedor');//find busca en los descendientes de el objeto .contenedor.
var $ScrollContenido = $TiraImagenes.find('.contenido');//find busca en los descendientes de el objeto .contenido.
var $TituloImagen = $('#pagina_titulo');
var $VistaPrevia = $('#pagina_vistaprevia');
var $DescripcionImagen = $('#pagina_descripcion');
var $SuperPosicion = $('#overlay');
var LongitudScrollContenido = $ScrollContenido.length;
var AlturaVentana = $(window).height();//Altura de la ventana
var totalcontenido = 0;
var AlturaImagen = 0;
var contenedor_desplazable = 0;
$TiraImagenes.find('img').each(function()//Almacena las imagenes de el scroll y las carga y construlle la tira desplazable
{
var $Imagen = $(this);
$('<img/>').load(function()
{
++ contenedor_desplazable;
if(contenedor_desplazable == LongitudScrollContenido)
{
AlturaImagen = $TiraImagenes.find('.contenido:first').height();
ConstruirTiraDesplazable();
$TiraImagenes.stop().animate({'left':'0px'},$VelocidadAnimacion);
}
}).attr('src',$Imagen.attr('src'));
});
$ScrollContenido.bind('click',function(e)// gestiona los eventos
{
var $this = $(this);
var $Identificador = $this.index();
if($Actual == $Identificador)
{
return;
}
var $ImagenGrande = $('#foto_grande');
if($ImagenGrande.length > 0)
{
$ImagenGrande.animate({'left':'350px','opacity':'0'},$VelocidadAnimacion,function()
{
$ImagenGrande.remove();
});
}
var $TituloActual = $TituloImagen.find('h1:nth-child('+($Actual+1)+')');
var $SiguienteTitulo = $TituloImagen.find('h1:nth-child('+($Identificador+1)+')');
var $ImagenActual = $VistaPrevia.find('img.pagina_miniatura:eq('+$Actual+')');
var $SiguienteImagen = $VistaPrevia.find('img.pagina_miniatura:eq('+$Identificador+')');
var $DescripcionActual = $DescripcionImagen.find('div:nth-child('+($Actual+1)+')');
var $SiguienteDescripcion = $DescripcionImagen.find('div:nth-child('+($Identificador+1)+')');
$Actual = $Identificador;
$TituloActual.stop().animate({'top' : '-50px'},$VelocidadAnimacion,function()//para de ejecutar animacion titulo actual top -50
{
$(this).hide();
$SiguienteTitulo.show().stop().animate({'top' : '0px'},$VelocidadAnimacion);//para de ejecutar animacion titulo actual top 0
});
$SiguienteImagen.show();
$ImagenActual.stop().animate({'left' : '310px','opacity' : '0'},$VelocidadAnimacion,function()
{
$(this).hide().css({'left' : '310px','opacity' : 1,'z-index' : 1});
$SiguienteImagen.css({'z-index' : 9999});
});
$DescripcionActual.stop().animate({'left' : '205px','opacity' : '0'},$VelocidadAnimacion,function()
{
$(this).hide();
$SiguienteDescripcion.show().stop().animate({'left' : '250px','opacity' : '1'},$VelocidadAnimacion);
});
e.preventDefault();
});
$VistaPrevia.find('.pagina_miniatura').bind('click',MostrarImagenGrande);// vista previa invoca a MostrarImagenGrande()
function MostrarImagenGrande()
{
$('#foto_grande').remove();
var $ImagenMediana = $(this);
$ImagenMediana.unbind('click');
var FuenteImagenGrande = $ImagenMediana.attr('alt');// se obtiene la fuente imagen grande
$SuperPosicion.fadeIn(200);//opacidad
$ImagenMediana.stop().animate({'width' : '600px','height' : '447px'},447,function()
{
$('<img id = "foto_grande"/>').load(function()
{
var $ImagenGrande = $(this);
$ImagenGrande.insertAfter($ImagenMediana).show();
$ImagenMediana.hide().css({'left' : '310px','opacity' : 1,'z-index' : 1,'width' : '360px','height' : '268px'});
$ImagenGrande.bind('click',function()
{
$ImagenMediana.show();
$SuperPosicion.fadeOut(200);
$(this).stop().animate({'width' : '360px','height' : '268px'},500,function()
{
$(this).remove();
$ImagenMediana.css({'z-index' : 9999});
$ImagenMediana.bind('click',MostrarImagenGrande);
});// stop animate foto mediana, la remueve y MostrarImagenGrande
});//acaba imagen grande clic
}).attr('src',FuenteImagenGrande);//acaba load imagen grande
});//stop.animate imagen grande, obtiene la imagen grande y la asigna
}
$(window).resize(function()
{
var NuevaAltura = $(window).height();
$TiraImagenes.css('height',NuevaAltura);
AlturaVentana = NuevaAltura;
});
function ConstruirTiraDesplazable()
{
totalcontenido = (LongitudScrollContenido - 1) * AlturaImagen;
$TiraImagenes.css('height',AlturaVentana).mousemove(function(e)
{
if($ScrollContenedor.height() > AlturaVentana)
{
var CordenadasMouse = (e.pageY - this.offsetTop);//cordenadas del mouse
var mousePercentY = CordenadasMouse / AlturaVentana;
var destY = -(((totalcontenido - (AlturaVentana - AlturaImagen)) - AlturaVentana) * (mousePercentY));
var thePosA = CordenadasMouse - destY;
var thePosB = destY - CordenadasMouse;
if(CordenadasMouse == destY)
{
$ScrollContenedor.stop();
}
else if(CordenadasMouse > destY)
{
$ScrollContenedor.stop().animate({top: -thePosA},$VelocidadAnimacion,$TipoEase);
}
else if(CordenadasMouse < destY)
{
$ScrollContenedor.stop().animate({top: thePosB},$VelocidadAnimacion,$TipoEase);
}
}
}).find('.ImagenDeScroll').fadeTo($VelocidadDesvanecido, 0.6).hover(//hover con dos parametros con funcion
function(){//mouse over desvanecido(fadeTo 1) en imagen over de la tira
$(this).fadeTo($VelocidadDesvanecido, 1);
},
function(){//mouse out desvanecido(fadeTo 0.6)en imagen out de la tira
$(this).fadeTo($VelocidadDesvanecido, 0.6);
}
);
}
});
