High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Galerie photos - effet slide/glisse

Dernière réponse le 14 mar 2008 à 12:13:34 ruvele, le 10 mar 2008 à 16:43:53 
 Signaler ce message aux modérateurs

Bonjour,

j'aimerais créer une sorte de galerie photos en faisant une transition "particulière" entre chaque photo : une sorte d'effet ajax : lorsque l'on clique sur la flèche, la photo suivant apparait avec un effet de glisse.
Pour cela, j'ai pensé à mettre toutes les images sur un seul calque et les faire avancer par des pas de 400 px (largeur de mes images). On m'a parlé de l'opérateur modulo pour cela mais j'avoue que je ne comprends pas bien comment agencer mon code.

voici ce que j'avais fait à la base mais il s'agit d'un défilement classique d'image. Est ce que quelqu'un pourrait m'aider à modifier mon code pour arriver à ce que j'explique ci-dessus ?

je vous remercie par avance,

voici le code initial : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Gallerie</title>

<script language="javascript" type="text/javascript">
	<!--
	
	var img_actuelle = 1;
	var no_images = 8;
	
	function go_avant() {
		
		document.getElementById("img"+img_actuelle).style.visibility = "hidden";
		
		img_actuelle--;
		
		if(img_actuelle < 1) { img_actuelle = no_images; }
		
		document.getElementById("img"+img_actuelle).style.visibility = "visible";
		
	}
	
	function go_apres() {
		
		document.getElementById("img"+img_actuelle).style.visibility = "hidden";
		
		img_actuelle++;
		
		if(img_actuelle > no_images) { img_actuelle = 1; }
		
		document.getElementById("img"+img_actuelle).style.visibility = "visible";
		
	}
	
	function generer() {
		
		var html = "";
		
		for(var i = 1; i < (no_images+1); i++) {
		
			html += '<div id="img'+i+'" class="images"><img src="pics/pic'+i+'.jpg" /></div>';
		
		}
		
		document.getElementById("boite_images").innerHTML = html;
		
	}

	//-->
	</script>
	
	<style type="text/css">
		
	#boite_galerie {
		position:absolute;
		width:400px;
		height:330px;
	}	
	
	#boite_images {
		position:absolute;
		width:400px;
		height:300px;
	}
	
	.boutons {
		position:absolute;
		width:30px;
		height:20px;
		top:310px;
		background-color:#FF0000;
	}
	
	#nav_apres {
		left:370px;
	}
	
	.images {
		position:absolute;
		visibility:hidden;
	}
	
	#img1 {
		visibility:visible;
	}
		
	</style>
	

</head>

<body onload="generer();">

<div id="boite_galerie">

	<div id="boite_images">
		
	</div>
	
	<div id="nav_avant" class="boutons" onclick="go_avant();"> <<< </div>
	
	<div id="nav_apres" class="boutons" onclick="go_apres();"> >>> </div>

	
</div>

</body>
</html>


Configuration: Windows XP
Firefox 2.0.0.12

Meilleures réponses pour « galerie photos effet slide/glisse » dans :
Télécharger #1 photo slide show creator Voir
Télécharger Windows Live Photo Gallery VoirGalerie de photos Windows Live est tout simplement un gestionnaire d'images à la façon de Vista mais sous XP. La tâche du programme débute dès le téléchargement des images sur votre disque dur. Le programme classe les images suivant leurs dates de...
Télécharger Slide Freebie VoirSlide Freebie est une visionneuse d'images (animées ou non). Il suffit de glisser/déposer le dossier contenant les images sur son icône. Il permet de faire défiler automatiquement et en boucle jusqu'à 15 000 images dans des sous-dossiers, de les...
Posez votre question Répondre

1

omar-senegal, le 10 mar 2008 à 19:34:12

Salut j aimerais bien ke l on mexplik comment cela fonctionne cet effet merci

   
Répondre à omar-senegal

2

ruvele, le 13 mar 2008 à 13:28:57
  • +1

Voici la solution : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Galerie slide</title>


<script language="javascript" type="text/javascript">
	<!--
	
	var img_actuelle = 1;
	var no_images = 8;
	
	var width = 400;
	var proc = "vide";
	
	var pos = 0;
	
	function init() {	// créer le html pour toutes les images
		
		document.getElementById("boite_images").innerHTML = "";
		
		var html = "";
		
		for(var i = 1; i <= no_images; i++) {
			
			html += '<div id="img'+i+'" style="left:' + (i - 1) * width + 'px" class="images"><img src="pics/pic'+i+'.jpg" /></div>';
			
		}
		
		document.getElementById("boite_images").innerHTML = html;
		
		compter();		
	}
	
	function go_avant() {	// pas en avant
		
		console.log("go_avant()");
		
		if(proc == "vide") {
			
			document.getElementById("nav_apres").style.visibility = "visible";
			document.getElementById("nav_avant").style.visibility = "visible";
			
			img_actuelle--;
			
			if(img_actuelle == 1) {
				document.getElementById("nav_avant").style.visibility = "hidden";	
			}
			
			compter();
		
			proc = window.setInterval("animer(0)", 20);
		}
	}
	
	function go_apres() { 	// pas en arrière
		
		console.log("go_apres()");
		
		if(proc == "vide") {
		
			document.getElementById("nav_apres").style.visibility = "visible";
			document.getElementById("nav_avant").style.visibility = "visible";
			
			img_actuelle++;
			
			if(img_actuelle == no_images) {
				document.getElementById("nav_apres").style.visibility = "hidden";
			}
				
			compter();
			
			proc = window.setInterval("animer(1)", 20);
		}
	}
	
	function animer(dir) {	// l'animation
		
		if(dir == 0) {
			pos = pos + 25;
		} else {
			pos = pos - 25;
		}
		
		if(pos % width == 0) {				// arreter tous les width (400) pixel
			window.clearInterval(proc);
			proc = "vide";
		}
		
		for(var i = 1; i <= no_images; i++) {	// placer l'ensemble des images
			
			var newpos = (i-1) * width + pos;
			
			document.getElementById("img"+i).style.left = newpos  + "px";
			
		}
		
	}
	
	function compter() {
		
		document.getElementById("nav_indique").innerHTML = "( " + img_actuelle + " / " + no_images + " )";
		
	}

	//-->
	</script>
	
	<style type="text/css">
		
	#boite_galerie {
		position:absolute;
		width:400px;
		height:330px;
	}	
	
	#boite_images {
		position:absolute;
		width:400px;
		height:300px;
		overflow:hidden;
	}
	
	.boutons {
		position:absolute;
		width:30px;
		height:20px;
		top:310px;
		background-color:#FF0000;
	}
	
	#nav_apres {
		left:370px;
	}
	
	#nav_avant {
		visibility:hidden;
	}
	
	#nav_indique {
		left:180px;
		width:50px;
	}
	
	.images {
		position:absolute;
		visibility:visible;
		top:0px;
	}
		
	</style>
	

</head>

<body onload="init();">

<div id="boite_galerie">

	<div id="boite_images"></div>
	
	<div id="nav_avant" class="boutons" onclick="go_avant();"> <<< </div>
	
	<div id="nav_indique" class="boutons"></div>
	
	<div id="nav_apres" class="boutons" onclick="go_apres();"> >>> </div>

	
</div>

</body>
</html>

   
Répondre à ruvele

3

 omar-senegal, le 14 mar 2008 à 12:13:34

Merci beaucoup je vais essayer pour voir

   
Répondre à omar-senegal
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net