11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour, je suis débutant en javascript et je tente d'apprendre et de m'en sortir avec mes bouquins mais la je cale depuis trois semaine sur un petit problème que peut être vous pourrez m'aider à résoudre !!!

Voilà mon problème j'ai récupérer et modifier un javascript qui me sert pour l'instant à créer mon site et sur ce script il y a une fonction qui permet de passer d'une image à une autre (dans le sens d'insertion html) grâce à une flèche (en image) identifier grâce a son ID qui est "control" et moi je souhaiterait juste modifier cette fonction pour pouvoir placer des boutons (images) qui mèneront eux à des images bien précises (url bien précises) et pas naviguer simplement dans le sens d'insertion xhtml comme le ferais le bouton "next" d'un lecteur CD !!!

J'espère avoir été clair dans mon explications et pas trop vague !!! Smiley cligne

Je vous joint la partie du code :


function initProject(){
	$("#projects #pagination").hide();

	extLink = $("#projects #externalLink a:first").attr("href");
	extLinkTitle = $("#projects #externalLink a:first").attr("title");

	pages = [];
	$("#projects #pagination a").each(function(){
		var href = this.getAttribute('href');
		pages.push(href);
	})

	if (pages.length <= 1){
		$("#projects #pagination").fadeOut();
	}else{
		var width = (pages.length*61) + "px";
		$("#projects #pagination ul").animate({
			width:width
		},1);
		$("#projects #pagination").fadeIn("slow");
	}

	loadImgs();

	$("#projects #description").animate({
		opacity:1
	},{duration: 500, easing: "easeInOutQuint"}); 
	
	setTimeout(function(){
		$("#control a").animate({
			opacity:1,
			left:"48px"
		},{duration: 400, easing: "easeInOutQuint"});
		$("#project").attr("left","0px").animate({
			opacity:1,		
		},{duration: 300, easing: "easeInOutQuint"});
	},400);
	
	updateHash(curProject);
}

function switchImg(index){
	var position = index*512*-1;
	
	switchDot(index);
	$("#imgContainer").animate({
		opacity:0
	},{duration: 280, easing: "easeInOutQuint"}).animate({
		top:position
	},1);
	setTimeout(function(){
		$("#imgContainer").animate({
			opacity:1
		},{duration: 500, easing: "easeInOutQuint"}); 
	},300);
}

function switchDot(index){
	$("#projects #pagination a:not(:eq("+index+"))").animate({
		opacity:0,
	},{duration: 600, easing: "easeInOutQuint"});
	$("#projects #pagination li:not(:eq("+index+"))").animate({
		backgroundPosition: "0 0"
	},100);

	$("#projects #pagination a").eq(index).animate({
		opacity:1,
	},{duration: 800, easing: "easeInOutQuint"});

	$("#projects #pagination li").eq(index).animate({
		backgroundPosition: "0 -58px"
	},800);
	curPage = index;
}

function loadImgs(){
	if (loadedProjects[curProject] == "0"){
		$("#loader").fadeIn();
	}else{
		$("#loader").hide();
	}
	var loadCount = 1;

	for (i=0;i<pages.length;i++){
		var img = new Image();
		$(img).load(function() {
			$("#imgContainer").append(this);
			loadCount++;
			if(loadCount > pages.length){
				$("#imgContainer").animate({
					opacity:1,
				},{duration: 800, easing: "easeInOutQuint"});

				if (extLink){
					var html = $("#imgContainer").html();
					newHTML = '<a href="'+extLink+'" title="'+extLinkTitle+'" target="_self">'+html+'</a>';
					$("#imgContainer").html(newHTML);
				}
				loadedProjects[curProject] = 1;
				switchDot(0);
				setTimeout(function(){$("#loader").fadeOut();},800);
			}
		}).error(function () {
			// notify the user that the image could not be loaded
		}).attr('src', pages[i]);
	}
}

function checkHash() {
	if ((window.location.hash != recentHash)) {
		hashChange = true;
		recentHash = window.location.hash;
		var hash = window.location.hash;
		if(hash.match(mark)){
			var splitHash = hash.split(/\?/);
			var section = splitHash[0];
			var item = splitHash[1];
			//directTo(section, item);
			if(section == '#portfolio'){
				path = pathPrefix + item + '.html';
				var projectIndex = jQuery.inArray(path, projects);
				curProject = projectIndex;
				$("#projects").load(path,initProject);
			}
		}
	}else{
		hashChange = false;
	}
}

function updateHash(index){
	var path = projects[index];
	path = path.replace(/static\/portfolio_/,'');
	path = path.replace(/.html/,'');
	recentHash =  window.location.hash = '#portfolio?'+path;
}

[/i]