slider (bouton bas et haut)

**laurent94** · 08/12/2011, 07h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 08/12/2011, 12h15

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 08/12/2011, 18h52

Bonsoir,

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

**laurent94** · 09/12/2011, 10h32

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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(&quot;#galerie&quot;);
});
 
var slider = function(id) {
	self=this;
	this.div = $(id);
	this.slider=this.div.find(&quot;.slider&quot;);
	this.hauteurCache = this.div.height();
	this.hauteur=0;
	this.div.find('a').each(function(){
		self.hauteur+=$(this).height();
	});
 
	this.haut = $(&quot;.slide&quot;).find(&quot;.haut&quot;);
	this.bas = $(&quot;.slide&quot;).find(&quot;.bas&quot;);
	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&gt;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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 11/12/2011, 15h32

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 12/12/2011, 10h21

Bonjour NoSmoking,

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

Ça marche super bien

Mille merci !!!!!

slider (bouton bas et haut)

jQuery

Discussions similaires

Partager

Partager