Javascript - Galerie photo effet slide/glisse

Fermé

ruvele Messages postés 18 Date d'inscription vendredi 14 décembre 2007 Statut Membre Dernière intervention 29 mai 2008 - 10 mars 2008 à 21:12
coenonympha - 9 août 2008 à 11:50

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>

A voir également:

Javascript - Galerie photo effet slide/glisse
Galerie photo en ligne gratuite - Guide
Traduction photo gratuit - Guide
Photo de profil - Guide
Photo aérienne de ma maison - Guide
Telecharger javascript - Télécharger - Langages

1 réponse

Réponse 1 / 1

coenonympha
9 août 2008 à 11:50

je ne suis pas sur d'avoir tout à fait compris ce que tu voulais mais je pense avoir saisi que tu veux que les images glissent progressivement quand tu cliques sur un bouton.

Cet effet peut être facilement réalisé grace à la librairie javascript jQuery.

Exemple ici : http://demos.flesler.com/jquery/scrollTo/

Si tu ne sais pas te servir de jQuery, va sur http://www.jquery.info , beaucoup de tutoriaux seront à ta disposition pour prendre en main cet outil.

Au plaisir

Discussions similaires

Pix

Transfert photos messenger vers galerie

Discussions similaires

Newsletters