Bonjour, j'ai récupéré dans le premier post (meilleurs scripts) le script pour faire défiler des images ou photos.

Je cherche à la modifier un peu pour afficher les miniatures dans la barre de défilements, et au clic, ouvrir la photo taille réelle.
Elle ont forcément un nom différent.

Si vous aviez un éclair...

Voici 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>...</title> 
 
<style type="text/css"> 
body {margin:0px} 
img {display:none;position:absolute} 
/* propriétés de la boîte à images;"position" et "overflow" sont nécessaires;*/ 
#c {display:none;margin-top:100px;background-color:#ffcc00;position:relative;overflow:hidden;} 
</style> 
 
</head> 
 
<body> 
<h1 id="mess" style="text-align:center"> 
Veuillez patienter... 
</h1> 
<div id="nul"></div> 
 
<div style="margin-top:50px;margin-left:50px"> 
<strong> 
En passant sur la boîte à images, on décide du sens et de la vitesse de défilement;<br /> 
En cliquant sur la zone, on stoppe le défilement et on active les liens images;<br/> 
On peut alors afficher chaque image dans une fenêtre indépendante (pas d'agrandissement ici, 
ce n'est pas le but);<br /> 
Si on reclique dans la zone, on relance le défilement; 
</strong> 
</div> 
 
<script type="text/javascript"> 
 
//|||||||||| 
//Variables| 
//|||||||||| 
var timer,zero,w,lf,el; 
var tab=new Array(); 
var pos=0; 
var val=0; 
var oui=true; 
 
 
//|||||||||||||||||||||||| 
//Variables paramétrables| 
//|||||||||||||||||||||||| 
var M=100;// marge de gauche de la boîte à images; 
 
var W=300;// largeur de la boîte à images 
// (forcément supérieure à la somme des largeurs des images); 
 
var H=100;// hauteur de la boîte à images; 
 
var delai=Math.round(W/4);// le délai initial est d'un quart 
// de la largeur de la boîte; 
 
 
//||||||||||||||||||||| 
//Création de la boîte| 
//||||||||||||||||||||| 
var c=document.createElement('div'); 
c.id="c"; 
c.style.marginLeft=M+"px"; 
c.style.width=W+"px"; 
c.style.height=H+"px"; 
 
var dec=M+W/2;// position horizontale au centre de la boîte; 
 
 
//|||||||||||||||||||| 
//Création des images| 
//|||||||||||||||||||| 
for(i=0;i!=60;i++){ 
   zero= i<9 ? 0 : ""; 
   tab[i]=new Image(); 
   tab[i].src="http://javatwist.imingo.net/sm"+zero+(i+1)+".gif"; 
   c.appendChild(tab[i]); 
} 
document.body.replaceChild(c,document.getElementById('nul')); 
 
 
//||||||||||||||||||||||| 
//Déplacement des images| 
//||||||||||||||||||||||| 
function go(){ 
for(i in tab){ 
   lf=parseInt(tab[i].style.left); 
   w=tab[i].width; 
   tab[i].style.left=lf+val+"px"; 
   if(lf>pos-w){ 
      tab[i].style.left=lf-pos+"px"}; 
   if(lf<W-pos){ 
      tab[i].style.left=lf+pos+"px"}; 
} 
timer=setTimeout("go()",delai) 
} 
 
 
//|||||||||||||||| 
//Vitesse et sens| 
//|||||||||||||||| 
function speed(e){ 
el= (!e) ? event.clientX : e.pageX; 
 
if(el>=dec){ 
   delai=W/2+2-(el-dec);val=2}// val=déplacement 
else{ 
   delai=W/2-1-(dec-el);val=-2};// val=déplacement 
} 
 
 
//|||||||||||||||||||||||| 
//Gestionnaire de "speed"| 
//|||||||||||||||||||||||| 
c.onmousemove=speed; 
 
 
//||||||||||||||||||||||||||||||||||||||||||||||||| 
//Pause / relance du script / activation des liens| 
//||||||||||||||||||||||||||||||||||||||||||||||||| 
c.onclick=function(){ 
   if(oui){clearTimeout(timer);oui=false; 
      for(i in tab){ 
         tab[i].style.cursor="pointer"}; 
   } 
   else{go();oui=true; 
      for(i in tab){ 
         tab[i].style.cursor="default"}; 
   }; 
} 
 
 
//|||||||||||||||||||| 
//Lancement des liens| 
//|||||||||||||||||||| 
for(i in tab){ 
   tab[i].onclick=function(){ 
      if(this.style.cursor=="pointer"){ 
         window.open(this.src)} 
      }; 
} 
 
//||||||||||||||||||||||||||||||||||||||||||||||||| 
//Positionnement des images et lancement du script| 
//||||||||||||||||||||||||||||||||||||||||||||||||| 
onload=function(){ 
document.body.removeChild(document.getElementById("mess")); 
c.style.display="block"; 
for(i in tab){ 
tab[i].style.left=pos+"px"; 
tab[i].style.top=(H-tab[i].height)/2+"px"; 
tab[i].style.display="inline"; 
pos+=tab[i].width; 
}; 
go(); 
} 
 
</script> 
 
</body> 
</html>
C'est le script de javatwister : http://www.developpez.net/forums/vie...955042#1955042