Learn how to use jQuery at the Blog

serial cut « visit

  • Added 5 months ago
  • 628 Lines of Code shown
  • 5 Links of Interest
http://serialcut.com
Source Code Links of Interest
This is my Source Code and I don't want to show it here
View Source Code only (as overlay) 
// That code snippet belongs to serial cut - http://serialcut.com

var isIE = false;

$(document).ready(function(){

	isIE = $.browser.msie;
	$(document).pngFix(); 

	// cargamos el primer proyecto a mostrar
	loadFirstProject();
	
	// asignamos los eventos a los botones
	$('.rss_home').click(function() {
		blancoButton($(this), "0px -28px", "");
	});
	
	$('.image_previous').click(function(e) {
		// imagen anterior
		showPreviousImage();
		blancoButton($(this), "0px -28px", "");
		e.preventDefault();
	});
	
	$('.image_next').click(function(e) {
		// imagen siguiente
		showNextImage();
		blancoButton($(this), "0px -28px", "");
		e.preventDefault();
	});
	
	$('.project_previous').click(function(e) {
		// galería anterior
		$(this).oneTime(250, "next", showPreviousProject);
		blancoButton($(this), "0px -440px", "");
		e.preventDefault();
	});
	
	$('.project_next').click(function(e) {
		// galería siguiente
		$(this).oneTime(250, "next", showNextProject);
		blancoButton($(this), "0px -440px", "");
		e.preventDefault();
	});
	
	$('#project_navigation_previous').hover(
		function() {
			$('.project_previous').show();
			//if (projectActual>1) $('.project_previous').show();
		},
		function() {
			$('.project_previous').hide();
		});
	
	$('#project_navigation_next').hover(
		function() {
			$('.project_next').show();
			//if (projectActual < (projects.length - 1)) $('.project_next').show();
		},
		function() {
			$('.project_next').hide();
		});
	
	
	// preload en flash
	$('#project_preload').flash({
		swf: 'swf/loadingAnim.swf',
		width: '40px',
		height: '40px',
		hasVersion: 8,
		flashvars: {},
		params: { wmode: 'transparent'}
	});
	
	$('a.media').media();

});



$(window).resize(function(){
	// gestión del resize de la ventana
	resizeImageSCut();
});
		
// resize y galería de imágenes
var imgCenter = "#image_center";
var imgLeft = "#image_left";
var imgRight = "#image_right";
var imgUp = "#image_up";
var imgDown = "#image_down";

function resizeImageSCut() {
	// resize de las imágenes de fondo para encajar en pantalla
	
	// ratio proporcional de la ventana del navegador
	var navWidth = $(window).width();
	var navHeight = $(window).height();
	var navRatio = navWidth / navHeight;

	// ratio proporcional de la imagen
	if ($('#main_image').width() > 1) picWidth = $('#main_image').width();
	if ($('#main_image').height() > 1) picHeight = $('#main_image').height();
	picRatio = picWidth / picHeight;
	
	// escala resultante
	if (navRatio > picRatio) {
		// escalamos la imagen para ajustarse al ancho del navegador
		var newHeight = (navWidth / picWidth) * picHeight;
		var newWidth = navWidth;
	} else {
		// escalamos la imagen para ajustarse a la altura del navegador
		var newHeight = navHeight;
		var newWidth = (navHeight / picHeight) * picWidth;
	}
	
	// centramos la imagen
	newTop = 0 - ((newHeight - navHeight) / 2);
	newLeft =  0 - ((newWidth - navWidth) / 2);

	// colocamos todas
	$('#image_holder').css({height: navHeight, width: navWidth});
	$('#image_holder').css({visibility:"visible", display:"block"});
	
	$('.main_image').css({height: newHeight, width: newWidth});
	
	// centro y aledañas...
	$(imgCenter).css({top: newTop, left: newLeft});
	$(imgLeft).css({top: newTop, left: newLeft-newWidth});
	$(imgRight).css({top: newTop, left: newLeft+newWidth});
	$(imgUp).css({top: newTop-newHeight, left: newLeft});
	$(imgDown).css({top: newTop+newHeight, left: newLeft});
	
	resizeElementsSCut();
}

function resizeElementsSCut() {
	var navWidth = $(window).width();
	var navHeight = $(window).height();
	
	// también colocamos los anterior/siguiente centrados
	var navProjectTop = (navHeight-$('#project_navigation .project_previous').height())/2;
	$('#project_navigation .project_previous').css("marginTop", navProjectTop+"px");
	$('#project_navigation .project_next').css("marginTop", navProjectTop+"px");
	
	var navProjectWidth = navWidth/2-100;
	$('#project_navigation_previous').width(navProjectWidth);
	$('#project_navigation_next').width(navProjectWidth);
	
	// también centramos la precarga
	var preloadTop = (navHeight-40)/2;
	var preloadLeft = (navWidth-40)/2;
	$('#project_preload').css({top: preloadTop, left: preloadLeft});
	
	// y porque no.. centremos el vídeo
	var videoTop = (navHeight-496)/2;
	var videoLeft = (navWidth-640)/2;
	$('#video').css({top: videoTop, left: videoLeft});
}


function blancoButton(element, bckPos, bckPosBack) {
	element.css("backgroundPosition", bckPos);
	element.animate({opacity: 1}, "normal", function(){
		$(this).css("backgroundPosition", bckPosBack);
	});
}


function preloadImage(source, nextEvent) {
   	// tapamos y precargamos una imagen
  // 	if (isIE) $(this).oneTime(50, "preload", nextEvent);
  // 	else {
		$('#project_tapa').show();
		if (imageActual!=1 || !projects[projectActual][7]){
		    $('<img />').attr('src', source).load(function(){
				// ocultamos la precarga y mostramos
				if (imageActual==1) projects[projectActual][7] = true;
				//$('#project_tapa').stop().fadeOut('slow');
				$(this).oneTime(500, "preload", nextEvent);
			});
		} else {
			//$('#project_tapa').stop().fadeOut('slow');
			$(this).oneTime(250, "preload", nextEvent);
		}
	//}
}

function preloadNext() {
	// precargamos una imagen
	preloadActual++;
	if (preloadActual==projects.length) preloadActual = 1;
	preloadActual = getNextToPreload();
	if (preloadActual != -1){
	var source = getPreloadImageSourceActual();
		$('<img />').attr('src', source).load(function(){
			projects[preloadActual][7] = true;
			//alert("precargado el..."+preloadActual)
			preloadNext();
		});
	}
}

function getNextToPreload() {
	if (!projects[preloadActual][7]) return preloadActual;
	else {
		var someToPreload = -1;
		for (var i=preloadActual; i<projects.length; i++){
			if (!projects[i][7]){
				someToPreload = i;
				break;
			}
		}
		if (someToPreload == -1){
			for (var i=1; i<preloadActual; i++){
				if (!projects[i][7]){
					someToPreload = i;
					break;
				}
			}
		}
		return someToPreload;
	}
}

function hideVideo() {
	var waitTime = 10;
	if (isVideo){
		waitTime = 1000;
		$('#video').stop().animate({top:"-500px"}, 1000, function(){
			$('#video').html('').hide();
		});
	}
	
	return waitTime;
}

function showVideo() {
	if (isVideo){
		// cargamos el vídeo actual
		var idVideo = projects[projectActual][6].split('|')[imageActual-1];
			idVideo = idVideo.split("VIDEO")[0];
		var videoSource = imagePath+idVideo+".mov";
		
		$('#video').html('<object width="640" height="496" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" align="top"><param name="bgcolor" value="#000000"><param name="cache" value="true"><param name="src" value="'+videoSource+'"><param name="autoplay" value="true"><param name="controller" value="true"><embed width="640" height="496" src="'+videoSource+'" align="top" pluginspage="http://www.apple.com/quicktime/download/" type="video/quicktime" controller="true" autoplay="true" cache="true" bgcolor="#000000"></object>').show();
		
		// lo mostramos
		var navHeight = $(window).height();
		var videoTop = (navHeight-496)/2;
		$('#video').stop().css("top", "-500px").show();
		
		$(this).oneTime(100, function() {
			$('#video').animate({top:videoTop+"px"}, 1000);
		});
	}
}

function hideProjectData() {
	if (isIE){
		$('#image_data').hide();
	} else {
		$('#image_data').stop().fadeTo('fast', 0);
	}
	$('#image_data_navigation').stop().fadeTo('fast', 0);
}

function showProjectData() {
	// cargamos los datos buenos
	//var imageDataSource = imagePath+"proyecto_titulo_"+projectActual+".png";
	var idImage = projects[projectActual][0];
	var imageDataSource = imagePath+"proyecto_titulo_"+idImage+".png";
	
	var title = projects[projectActual][1];
	var desc = (isIE)? "<img src='"+imageDataSource+"' /><br /><br />" : "";
		desc += projects[projectActual][2];
	var link = (projects[projectActual][3]=="")? "" : '<a href="'+projects[projectActual][5]+'" target="_blank">'+projects[projectActual][3]+'</a>';
	var numImages = parseInt(projects[projectActual][4]);
	
	$('#image_data h1').html(title);
	$('#image_data h1').css("backgroundImage", "url('"+imageDataSource+"')");
	$('#image_data p:eq(0)').html(desc);
	$('#image_data p:eq(1)').html(link);
	
	$('#image_data_navigation .image_number').html("Image 1 of "+numImages);
	
	if (link=="") $('#image_data p:eq(1)').hide();
	else $('#image_data p:eq(1)').show();
	if (isIE){
		$('#image_data').show();
	} else {
		$('#image_data').show();
		$('#image_data').stop().css("opacity", 0).fadeTo('slow', 1);
	}
	
	if (numImages > 1){
		$('#image_data_navigation').show();
		$('#image_data_navigation').stop().css("opacity", 0).fadeTo('slow', 1);
	}
	
	// aprovechamos aquí y mostramos/ocultamos los +/-
//	toggleProjectPrevious(projectActual==1);
//	toggleProjectNext((projectActual==(projects.length-1)));
	
	toggleImagePrevious(true);
	toggleImageNext((numImages==1));
	
	if (isIE) resizeImageSCut();
}

function changeProjectImage() {
	var numImages = parseInt(projects[projectActual][4]);
	$('#image_data_navigation .image_number').html("Image "+imageActual+" of "+numImages);
	
	// aprovechamos aquí y mostramos/ocultamos los +/- del proyecto en particular
	toggleImagePrevious((numImages==1 || imageActual==1));
	toggleImageNext((imageActual==numImages));
}

function toggleImagePrevious(hideOrShow) {
	if (hideOrShow){
		$('.image_previous').css({cursor:"default", opacity:0.5, backgroundPosition:"0px 0px"});
		$('.image_previous').unbind("click").click(function() { return false; });
	} else {
		$('.image_previous').css({cursor:"pointer", opacity:1, backgroundPosition:""});
		$('.image_previous').unbind("click").click(function(e) {
			showPreviousImage();
			blancoButton($(this), "0px -28px", "");
			e.preventDefault();
		});
	}
}

function toggleImageNext(hideOrShow) {
	if (hideOrShow){
		$('.image_next').css({backgroundPosition:"0px 0px", cursor:"default", opacity:0.5});
		$('.image_next').unbind("click").click(function() { return false; });
	} else {
		$('.image_next').css({backgroundPosition:"", cursor:"pointer", opacity:1});
		$('.image_next').unbind("click").click(function(e) {
			showNextImage();
			blancoButton($(this), "0px -28px", "");
			e.preventDefault();
		});
	}
}


/*function toggleProjectPrevious(hideOrShow) {
	if (hideOrShow){
		$('.project_previous').css({backgroundPosition:"0px 0px", cursor:"default", opacity:0.25}).hide();
		$('.project_previous').unbind("click").click(function() { return false; });
	} else {
		$('.project_previous').css({backgroundPosition:"", cursor:"pointer", opacity:1});
		$('.project_previous').unbind("click").click(function(e) {
			$(this).oneTime(250, "next", showPreviousProject);
			blancoButton($(this), "0px -440px", "");
			e.preventDefault();
		});
	}
}

function toggleProjectNext(hideOrShow) {
	if (hideOrShow){
		$('.project_next').css({backgroundPosition:"0px 0px", cursor:"default", opacity:0.25}).hide();
		$('.project_next').unbind("click").click(function() { return false; });
	} else {
		$('.project_next').css({backgroundPosition:"", cursor:"pointer", opacity:1});
		$('.project_next').unbind("click").click(function(e) {
			$(this).oneTime(250, "next", showNextProject);
			blancoButton($(this), "0px -440px", "");
			e.preventDefault();
		});
	}
}*/


function getImageSourceActual(){

	var idImage = projects[projectActual][6].split('|')[imageActual-1];
	var imageSource = imagePath+idImage+".jpg";
	
	// comprobamos si es un vídeo o no
	if (idImage.indexOf("VIDEO")!=-1){
		//imageSource = imagePath+"video_background.jpg";
		imageSource = imageSource.split("VIDEO")[0]+".jpg";
		isVideo = true;
	} else {
		isVideo = false;
	}
	
	return imageSource;
}

function getPreloadImageSourceActual(){

	var idImage = projects[preloadActual][6].split('|')[0];
	var imageSource = imagePath+idImage+".jpg";
	//if (idImage.indexOf("VIDEO")!=-1) imageSource = imagePath+"video_background.jpg";
	if (idImage.indexOf("VIDEO")!=-1) imageSource = imageSource.split("VIDEO")[0]+".jpg";
	
	return imageSource;
}

function loadFirstProject() {
	// cargamos la imagen del proyecto actual y sus datos
	hideVideo();
	resizeElementsSCut();
	
	// conseguimos el imageSource del array:
	var imageSource = getImageSourceActual();
	
	preloadImage(imageSource, loadFirstProjectEnd);
}

function loadFirstProjectEnd() {
	var imageSource = getImageSourceActual();
	
	$(imgCenter)[0].src = imageSource;
	resizeImageSCut();
	showProjectData();
	showVideo();
	$('#image_holder').css({opacity:0}).fadeTo(1000, 1);
	
	if (!isIE) {
		projects[projectActual][7] = true;
		preloadNext();
	}
	
	$('#project_tapa').stop().fadeOut('slow');
}

function showDirectProject(n) {
	// ir directo al proyecto n
	// se busca en el array el ID con quién coincide en el array
	var nP = 0;
	for (var i=1; i<projects.length; i++){
		if (projects[i][0]==n) nP = i;
	}
	
	if (nP>projectActual){
		projectActual = nP-1;
		showNextProject();
	} else {
		projectActual = nP+1;
		showPreviousProject();
	}
}
   
function showNextProject() {
	// el siguiente proyecto es el de la derecha
	hideProjectData();
	var waitTime = hideVideo();
	
	$(this).oneTime(waitTime, function() {
		projectActual += 1;
		if (projectActual == projects.length) projectActual = 1;
		imageActual = 1;
	
		var imageSource = getImageSourceActual();
		preloadImage(imageSource, showNextProjectEnd);	
  	});
  	
  	if (isIE) $(imgCenter)[0].src = "css/css_img/sp.gif";	
}

function showNextProjectEnd() {
	// ya se ha precargado la imagen...
	var imageSource = getImageSourceActual();
	
	if (isIE) {
		$(imgCenter)[0].src = imageSource;
		showVideo();
	} else {
		var centerLeftIni = $(imgCenter).position().left;
		var centerLeftEnd = $(imgCenter).position().left - $(imgCenter).width();
		var rightLeftIni = $(imgRight).position().left;
		var rightLeftEnd = $(imgCenter).position().left;
		
		$(imgRight)[0].src = imageSource;
		
		$(imgCenter).animate({left:centerLeftEnd}, 1000);
		$(imgRight).animate({left:rightLeftEnd}, 1000, function(){
			$(imgCenter)[0].src = imageSource;
			$(imgCenter).css({left:centerLeftIni});
			$(imgRight).css({left:rightLeftIni});
			showVideo();
		});
	}
	showProjectData();
	
	$('#project_tapa').stop().fadeOut('slow');
}

function showPreviousProject() {
	// el anterior proyecto es el de la izquierda
	hideProjectData();
	var waitTime = hideVideo();
	
	$(this).oneTime(waitTime, function() {
		projectActual -= 1;
		if (projectActual == 0) projectActual = (projects.length-1);
		imageActual = 1;
		
		var imageSource = getImageSourceActual();
		preloadImage(imageSource, showPreviousProjectEnd);
  	});
	
	if (isIE) $(imgCenter)[0].src = "css/css_img/sp.gif";
}

function showPreviousProjectEnd() {
	// ya se ha precargado la imagen...
	var imageSource = getImageSourceActual();

	if (isIE) {
		$(imgCenter)[0].src = imageSource;
		showVideo();
	} else {	
		var centerLeftIni = $(imgCenter).position().left;
		var centerLeftEnd = $(imgCenter).position().left + $(imgCenter).width();
		var leftLeftIni = $(imgLeft).position().left;
		var leftLeftEnd = $(imgCenter).position().left;
		
		$(imgLeft)[0].src = imageSource;
		
		$(imgCenter).animate({left:centerLeftEnd}, 1000);
		$(imgLeft).animate({left:leftLeftEnd}, 1000, function(){
			$(imgCenter)[0].src = imageSource;
			$(imgCenter).css({left:centerLeftIni});
			$(imgLeft).css({left:leftLeftIni});
			showVideo();
		});
	}
	
	showProjectData();
	
	$('#project_tapa').stop().fadeOut('slow');
}

function showNextImage() {
	// la siguiente imagen es la de abajo
	var waitTime = hideVideo();
	
	$(this).oneTime(waitTime, function() {
		imageActual += 1;
	
		var imageSource = getImageSourceActual();	
		preloadImage(imageSource, showNextImageEnd);
  	});
  	
  	if (isIE) $(imgCenter)[0].src = "css/css_img/sp.gif";
}

function showNextImageEnd() {
	// ya se ha precargado la imagen..
	var imageSource = getImageSourceActual();

	if (isIE) {
		$(imgCenter)[0].src = imageSource;
		showVideo();
	} else {
		var centerTopIni = $(imgCenter).position().top;
		var centerTopEnd = $(imgCenter).position().top - $(imgCenter).height();
		var downTopIni = $(imgDown).position().top;
		var downTopEnd = $(imgCenter).position().top;
		
		$(imgDown)[0].src = imageSource;
		
		$(imgCenter).animate({top:centerTopEnd}, 1000);
		$(imgDown).animate({top:downTopEnd}, 1000, function(){
			$(imgCenter)[0].src = imageSource;
			$(imgCenter).css({top:centerTopIni});
			$(imgDown).css({top:downTopIni});
			showVideo();
		});
	}
	
	changeProjectImage();
	
	$('#project_tapa').stop().fadeOut('slow');
}

function showPreviousImage() {
	// la anterior imagen es la de arriba
	var waitTime = hideVideo();
	
	$(this).oneTime(waitTime, function() {
		imageActual -= 1;
	
		var imageSource = getImageSourceActual();
		preloadImage(imageSource, showPreviousImageEnd);
  	});
  	
  	if (isIE) $(imgCenter)[0].src = "css/css_img/sp.gif";
}

function showPreviousImageEnd() {
	// ya se ha precargado la imagen...
	var imageSource = getImageSourceActual();
	
	if (isIE) {
		$(imgCenter)[0].src = imageSource;
		showVideo();
	} else {
		var centerTopIni = $(imgCenter).position().top;
		var centerTopEnd = $(imgCenter).position().top + $(imgCenter).height();
		var upTopIni = $(imgUp).position().top;
		var upTopEnd = $(imgCenter).position().top;
		
		$(imgUp)[0].src = imageSource;
		
		$(imgCenter).animate({top:centerTopEnd}, 1000);
		$(imgUp).animate({top:upTopEnd}, 1000, function(){
			$(imgCenter)[0].src = imageSource;
			$(imgCenter).css({top:centerTopIni});
			$(imgUp).css({top:upTopIni});
			showVideo();
		});
	}
	
	changeProjectImage();
	
	$('#project_tapa').stop().fadeOut('slow');
}

// simulación de 'position: fixed;' para IE6
//function move_box() {
//	var main_image_element = document.getElementById('image_holder');
//    main_image_element.style.top = (document.documentElement.scrollTop + 0) + 'px';
//}
  1. http://plugins.jquery.com/project/timers
  2. http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
  3. http://jquery.lukelutman.com/plugins/flash/
  4. http://malsup.com/jquery/media/
  5. http://jquery.andreaseberhard.de/pngFix/