slider (bouton bas et haut) [Résolu]

[laurent94]

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:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<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>

le css concerné :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
#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;
}

et pour finir le javascript :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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 !

[laurent94]

Bonjour tout le monde,

en mettant deux lignes en commentaires, les boutons fonctionnent, cependant il ne s'arrête pas et dès que je clique sur "haut" tout remonte d'un coup et trop haut et pareillement si je clique sur bas, tout redescends d'un coup et trop loin donc je n'es plus d'image.

voici ce que j'ai modifié, c'est haut niveau du if :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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);
	}
});
}

Est-ce que quelqu'un pourrait m'expliquer comment faire pour calculer le nombre de clique maximum par rapport à la hauteur de la div... c'est cela que je n'arrive pas à faire.

Merci

[laurent94]

Bonsoir,

Je n'arrive pas à définir le nombre de clique....

[laurent94]

[quote=lolo94]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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$(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 :

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 ?

[NoSmoking]

Bonjour,

Code :

1
2
3
4
5
6
7
this.bas.click(function(){
  if(self.courant==self.nbEtapes){
    self.courant++;
    self.slider.animate({
      top: -self.courant*self.saut
    },1000);
}

si l'on interprète ton code les action dans la condition ne sont exécutées que si self.courant EGAL self.nbEtapes, ce n'est visiblement pas ce que tu souhaites

Code :

1
2
3
4
5
6
7
this.bas.click(function(){
  if(self.courant < self.nbEtapes){
    self.courant++;
    self.slider.animate({
      top: -self.courant*self.saut
    },1000);
}

[laurent94]

Bonjour NoSmoking,

Un grand merci pour avoir pris le temps de te pencher sur mon cas

Ça marche super bien Mille merci !!!!!