Discussion :

[mlazaro]

Je suis partie sur une autre solution utilisant scrollLeft et un timeout qui me permet d'avoir un scoll plus fluide.

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div class="controls">
	<a class="previous" href="" id="prev" onmousedown="left();" onmouseup="stopChrono();"><img src="images/fleche_g.jpg" alt="Voir les vignettes de gauche" title="Voir les vignettes de gauche" /></a>
	<div class="wrapper-thumbs">
		<div id="allthumbs">
			<ul id="thumbs">
			</ul>
		</div>
	</div>
	<a class="next" href="" id="next" onmousedown="right();" onmouseup="stopChrono();"><img src="images/fleche_d.jpg" alt="Voir les vignettes de droites" title="Voir les vignettes de droites" /></a>
</div>

Code css :

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
#slideshow .controls .wrapper-thumbs {
	overflow: hidden;
	position: relative;
	float: left;
	margin: 0;
	width: 556px;
	height: 76px;
}
 
/* #allthumbs {
	width: 556px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
} */
 
#thumbs {
	display: inline-block;
	width: 900px;
	height: 76px;
	position: absolute;
	z-index: 99;
}
 
#thumbs li {
	display: inline-block;
	max-width: 114px;
	margin-left: 10px;
}
 
#thumbs img {
	float: left;
	width: 114px;
	margin: 0;
}
 
#thumbs img:hover {
	cursor: pointer;
}
 
#slideshow .controls .previous, #slideshow .controls .next {
	float: left;
	width: 51px;
	height: 76px;
	position: relative;
	z-index: 999;
}
 
#slideshow .controls .previous {
	background: transparent url('images/fleche_g.jpg') 0 0 no-repeat;
}
 
 
#slideshow .controls .next {
	background: transparent url('images/fleche_d.jpg') 0 0 no-repeat;
}

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
// Use the arrow to slide the thumbnails
var chrono;
function stopChrono() {
    clearInterval(chrono);
}
 
function left() {
    document.getElementById("allthumbs").scrollLeft = (parseInt(document.getElementById("allthumbs").scrollLeft,10) - 10);
    chrono = setTimeout("left()",100);
}
 
function right() {
    document.getElementById("allthumbs").scrollLeft = (parseInt(document.getElementById("allthumbs").scrollLeft,10) + 10);
    chrono = setTimeout("right()",100);
}

Un exemple "live"

Mon problème est que quand je cliques et que je reste clique ça marche bien c;est parfait mais quand je lâche ma souris, les vignettes reviennent a leur position de départ. Idéalement j'aimerais que
- le div reste ou il était quand j'ai lâche la souris et
- pouvoir utiliser la flèche de gauche...

Merci de votre aide pour m;aider a résoudre mon soucis, en JS seulement, pas de librairies !

[SylvainPV]

Code :

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

1
2
3
4
5
6
7
8
9
function left() {    
    document.getElementById("allthumbs").scrollLeft = (parseInt(document.getElementById("allthumbs").scrollLeft,10) - 10);
    chrono = setTimeout("left()",100);
}
 
function right() {
    document.getElementById("allthumbs").scrollLeft = (parseInt(document.getElementById("allthumbs").scrollLeft,10) + 10);
    chrono = setTimeout("right()",100);
}

Pourquoi un timeout qui relance la même fonction toutes les 100ms ? Tel que le code est actuellement, les fonctions vont se répeter en boucle infinie. Je doute que ce soit ce que tu veux. Aussi si tu utilises setTimeout c'est clearTimeout qu'il faut utiliser, pas clearInterval.