Script défilement images

**glloq8** · 17/10/2005, 14h46

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

**glloq8** · 17/10/2005, 16h52

J'ai apporté les modifs suivantes :

Code :

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

1
2
3
4
5
6
7
8
9
10
//|||||||||||||||||||| 
//Création des images| 
//|||||||||||||||||||| 
for(i=1;i!=8;i++){ 
   zero= i<8 ? 0 : ""; 
   tab[i]=new Image(); 
   tab[i].src="tn_"+zero+(i+1)+".jpg"; 
   c.appendChild(tab[i]); 
} 
document.body.replaceChild(c,document.getElementById('nul'));

Changement de dossier + de nom des images sources.

Code :

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

1
2
3
4
5
6
7
8
9
10
//|||||||||||||||||||| 
//Lancement des liens| 
//|||||||||||||||||||| 
 
for(i in tab){ 
   tab[i].onclick=function(){ 
      if(this.style.cursor=="pointer"){ 
         window.open(zero+i+".jpg")} 
      }; 
}

Là, j'ai changé le window.open, mais il me retouve toujours i = 7, donc j'ai toujours l'images 07.jpg qui s'ouvre...

Quelqu'un a une idée pour retrouver le bon "i" ??

**SpaceFrog** · 17/10/2005, 17h40

Code :

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

window.open(zero+(i-1)+".jpg")}

:

**potchick** · 18/10/2005, 01h27

Bonsoir,
je cherchai le meme genre de script et du coup je voudrai essayer d'adapter celui-là à mon cas:
je voudrai faire un diaporama tout bete avec une barre dans laquelle les images defilent et quand on clique dessus elles s'affichent dans une div sur la meme page. rien de plus classique
Le problème est que je ne comprends pas tout (ça c normal je débute en js) et que je ne vois meme pas où sont les images dans le code.
Si vous avez compris ce que veux dire merci pour la réponse...

**glloq8** · 18/10/2005, 09h28

Envoyé par SpaceFrog

Code :

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

window.open(zero+(i-1)+".jpg")}

:

Maintenant, il ne m'ouvre que la 6... logique i-1 --> comme i était toujours à 7, maintenant, c'est 6... mais merci... je vais continuer à chercher !

**glloq8** · 19/10/2005, 09h54

Allé, monte petit topic...

Juste pour relancer votre curiosité... Merci d'avance.

Toujours aucun succès avec mes photos...

**javatwister** · 22/10/2005, 10h34

ce que je ne comprends pas bien, c'est pourquoi tu as changé le code "popup"

en appelant la variable i depuis le corps de la fonction, tu obtiendras toujours sa valeur maximale!

d'où la nécessité de faire appel à l'objet déclencheur par this;

**glloq8** · 24/10/2005, 15h11

C'est à dire ?? Je vois pas comment faire...

**javatwister** · 24/10/2005, 15h12

c'est-à-dire que... il n'y avait rien à faire! juste recopier le code

**glloq8** · 24/10/2005, 15h31

Ton code d'origine ouvrait la même image que celle affichée dans la barre de défilement... moi, je voulais afficher une image réduite de celle qui doit s'ouvrir en cliquant dessus...

**javatwister** · 24/10/2005, 15h49

ah ok;

donc, tes miniatures sont du type:

Code :

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

tn_(zero)incrément.jpg;

et les agrandissements:

Code :

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

(zero)incrément.jpg;

?

le principe est le même:

Code :

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

1
2
3
4
5
6
7
8
9
10
//|||||||||||||||||||| 
//Lancement des liens| 
//|||||||||||||||||||| 
 
for(i in tab){ 
   tab[i].onclick=function(){ 
      if(this.style.cursor=="pointer"){ 
         window.open(this.src.replace("tn_",""))} 
      }; 
}

**glloq8** · 24/10/2005, 15h53

MERCI !!!

Franchement, en voyant la réponse, je me demande comment j'y ai pas pensé... ça à l'air tellement simple.

Moi en fait, je cherchais un moyen d'ouvrir directement, l'images, mais en faisant comme toi, en remplaçant tn_ par rien, ça fonctionne nickel !!

Encore merci !!

Script défilement images

JavaScript

Discussions similaires

Partager

Partager