Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/11/2013, 00:02
Avatar de CMushroom
CMushroom
 
Fecha de Ingreso: diciembre-2011
Ubicación: Morelos
Mensajes: 99
Antigüedad: 13 años
Puntos: 1
Pregunta Explicacion de cualquier pedazo de codigo

la parte que gusten explicarme, me ayudaria mucho soy nuevo en jquery y no lo comprendo completamente por algunos metodos , asi que le pedazo que me gusten explicar .
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);
					}
				);
			}
		
		});