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); } ); } });