11550 sujets

JavaScript, DOM et API Web HTML5

Problème de slider (btn haut et bas)

Bonjour tout le monde,

Je viens vers vous pour avoir quelques pistes coup de pouce...

Voilà je souhaite réaliser une galerie, il y à 32 images à mettre donc je souhaite faire une galerie avec un slide verticale.
J'ai deux boutons qui me servent pour monter ou descendre.

J'ai réalisé le hmlt et css et maintenant je me perds un peu voir beaucoup sur le javascript... Ce que j'ai fais ne fonctionne pas (j'ai réussi à faire en sorte que le bouton bas fonctionne, mais je ne sais pas ce que j'ai touché, mais il ne fonctionne plus. Le problème lorsqu'il fonctionné c'était qu'il ne s'arrêter pas une fois la dernière image affichée...

je vous joins mon code html css et javascript pour que vous puissiez me dire ce qui ne va pas dans mon code. Je vous remercie

html:
<div id="galerie">

<aside>
<div class="haut"></div>
<div class="bas"></div>
</aside>
<div class="slider">
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
<a href="#"><img src="img/bg_image.png" width="167" height="153" alt="test"></a>
</div>


</div>

</section>


[U][B]le css concerné :[/B][/U]
#galerie {
	width:800px;
	margin-top: 30px;
	float:left;
	height: 500px;
	overflow:hidden;
	margin-bottom:20px;
	position:relative;
}

#galerie img {
	margin: 5px 5px;
}

.haut {
	background-image:url(img/prec.png);
	width: 20px;
	height:20px;
	margin-bottom:10px;
	margin-left: 25%px;
	margin-right:20px;
	position:absolute;
}
.haut:hover {
	background-image:url(img/suivant.png);
	width: 20px;
	height:20px;
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.bas {
	background-image:url(img/prec.png);
	width: 20px;
	height:20px;
	margin-left: 4.2%;
	position:absolute;
	margin-right:20px;
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.bas:hover {
	background-image:url(img/suivant.png);
	width: 20px;
	height:20px;
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.slider {
	height: 50000px;
	clear:both;
	float:left;
	margin-top:20px;
	position:absolute;
}


[U][B]et pour finir le javascript :[/B][/U]
$(document).ready(function(){
	s = new slider("#galerie");
});

var slider = function(id) {
	self=this;
	this.div = $(id);
	this.slider=this.div.find(".slider");
	this.hauteurCache = this.div.height();
	this.hauteur=0;
	this.div.find( 'a').each(function(){
		self.hauteur+=$(this).height();
	});
	
	this.haut = this.div.find(".haut");
	this.bas = this.div.find(".bas");
	this.saut = this.hauteurCache/2;
	this.nbEtapes = Math.ceil(this.haureur/this.saut - this.hauterCache/this.saut);
	this.courant=0;
	
	this.bas.click(function(){
		if(self.courant==this.nbEtapes){
		self.courant++;
		self.slider.animate({
			top: -self.courant*self.saut
		},1000);
	}
});
this.haut.click(function(){
		if(self.courant>0){
		self.courant++;
		self.slider.animate({
			top: -self.courant*self.saut
		},1000);
	}
});
}


J'ai réussi à en arriver jusque là grâce à des information et différents tutoriels, mais je sèche maintenant...

Pourriez-vous me donner un coup de main et me dire qu'est-ce qu'il ne va pas dans mon code JavaScript ?

Merci !
Salut lolo,

J'ai pas étudié ton code en détail mais déjà tu as un problème dans tes if parce que si je les mets en commentaire, ça fonctionne :


this.haut.click(function(){

		//if(self.courant>0){

		self.courant++;

		self.slider.animate({

			top: -self.courant*self.saut

		},1000);

	//}

});


Ensuite, si tu veux que ça monte quand tu cliques sur "monter", il ne faut pas faire la même chose que quand ça descend :

Pour Monter :

top: -self.courant*self.saut


Pour descendre :

top: self.courant*self.saut


Après pour faire fonctionner tout ça comme tu le souhaites, il va falloir te plonger un peu dans javascript...
Modifié par hchtot (08 Dec 2011 - 09:39)
Bonjour hchtot,

Merci de prendre le temps de me répondre, effectivement en modifiant le script avec ce que tu m'a donné, les deux fonctions pour descendre et monter fonctionne, le problème c'est que je n'arrive pas à calculer le nombre de clique maximum lorsque j'arrive à la dernière image, ça continue encore et si je clique sur .haut, tout redescend d'un seul coup et beaucoup trop loin...

Je pense que je dois me tromper dans cette ligne de code :

this.saut = this.hauteurCache/2;
	this.nbEtapes = Math.ceil(this.haureur/this.saut - this.hauterCache/this.saut);


Quelqu'un pourrait m'expliquer comment récupérer et interpréter correctement la hauteur de ma div pour affecter un nombre maximum de clique.

Merci
Bonjour tout le monde,

J'ai vraiment du mal à trouver comment faire. Je trouve pas ou c'est que je fais une erreur dans le code...

[/code$(document).ready(function(){
	s = new slider("#galerie");
});

var slider = function(id) {
	self=this;
	this.div = $(id);
	this.slider=this.div.find(".slider");
	this.hauteurCache = this.div.height();
	this.hauteur=0;
	this.div.find('a').each(function(){
		self.hauteur+=$(this).height();
	});
	
	this.haut = $(".slide").find(".haut");
	this.bas = $(".slide").find(".bas");
	this.saut = this.hauteurCache;
	this.nbEtapes = Math.ceil(this.hauteur/this.saut);
	this.courant=0;
	
	this.bas.click(function(){
		//if(self.courant==self.nbEtapes){
		self.courant++;
		self.slider.animate({
			top: -self.courant*self.saut
		},1000);
	//}
});



this.haut.click(function(){
		if(self.courant>0){
		self.courant--;
		self.slider.animate({
			top: self.courant*self.saut
		},1000);
	}
});
}]

Si je supprime le commentaire sur le premier "if" le les bouton ne fonctionne pas, il pense que je suis déjà arrivé à la fin. Si je mets en commentaire les bouton fonctionnent bien il passe correctement d'étape en étape sauf qu'il ne s'arrête pas (même si il n'y à plus d'image) et si je lui dis de revenir en cliquant sur .haut il remonte tout d'un coup.

Pourtant dans la ligne nbEtapes:

[code=javascript]this.nbEtapes = Math.ceil(this.hauteur/this.saut);


Je lui dis bien de calculer le nombre d'étape avant de s'arrêter ? ou je mis prends mal ?
Sujet clos
Aller à