Diaporama et vignettes

**Cartman.inc** · 07/09/2005, 23h59

Salut @ tous.
J'ai un petit soucis avec mon diaporama.
J'affiche dans ma page les vignettes correspondant aux photos contenues dans un dossier et dessous j'affiche la photo en grand.
J'arrive à faire défiler les photos à l'aide de bouton et aussi en cliquant sur la vignette.
Mais mon petit soucis, c'est que lorsqu'il y a un nombre important de photos, il y a beaucoup trop de vignettes qui sont affichés et je souhaiterais les affichés par dizaine en les faisant défilée comme une pelliculle.

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
<script language='JavaScript'>
var i=1;
var a=1;
var b=79; // Nombre d'images.
 
function diapo(elt) // Navigation dans les images à l'aide des vignettes et des boutons.
{
 switch(elt)
 {
  case "plus" : if(i!=b){ i++; } else{ i=1; } break;
 
  case "moins" : if(i!=1){ i--; } else{ i=b; } break;
 
  case "debut" : i=1; break;
 
  case "fin" : i=b; break;
 
  default : i=elt; ;
 }
reseau.src="Reseau_"+i+".jpg"
}
 
// Affichage des vignettes
function vignette()
{
 for(a;a<b+1;a++)
 {
  document.write("<a href=# onClick=diapo("+a+");><img border='0' name=imag src='Reseau_"+a+".jpg' width=50></a> ");
 }
}
</script>
</head>
<body>
 
<center>
<table border=1 cellpadding=0 cellspaing=0 width=550>
   <tr>
       <td align=center colspan=2>
 
<script language='JavaScript'>
vignette();
</script>
 
       </td>
   </tr>
   <tr>
   	<td align=right>
	   <input type="button" value="|<" name="debut" onClick="diapo('debut');">
	   <input type="button" value="<" name="precedent" onClick="diapo('moins');">
    </td>
    <td align=left>
	   <input type="button" value=">" name="suivant" onClick="diapo('plus');">
	   <input type="button" value=">|" name="fin" onClick="diapo('fin');">
    </td>
   </tr>
   <tr>
   	<td colspan=2 width=550 align=center><img border="0" name="reseau" src="Reseau_1.jpg"></td>
   </tr>
</table>

Merci d'avance pour vos réponses.

**elraton** · 08/09/2005, 20h39

bein, je suis pas vraimen sur d'avoir compris, mais en gros tu doit faire dans le code JS:

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
 
var pos = 0; 
var nb_img = 79; 
 
//tu enleve a et b ca sert a rien
 
 
function vignette(var increment) { //Increment peut avoir comme valeur -1 0 1
    pos = (pos + 10*increment)%nb_img; //le modulo (%) permet de faire un diapo circulaire 
    for(pos;pos<10;pos++) {
 
         //ton code avec pos a la place de a
 
     }
 
 
 
}

et dans ton code html tu mé :

<script language='JavaScript'>
vignette(0);
</script>

et de part et d'autre de la vignette
<input type="button" value=">>" name="previous" onClick="vignette('-1');">

<input type="button" value="<<" name="next" onClick="vignette('+1');">

Et ca devrais marcher normalement

**Cartman.inc** · 09/09/2005, 01h28

Dsl mais ca ne fonctionne pas du tout.
le navigateur n'affiche rien du tout.
J'ai modifié un peu le code mais désormais, il m'affiche bien les 10 diapos suivantes mais toutes seules dans une autre page.

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
<script language='JavaScript'>
var i=1;
var a=1;
var b=79;
 
function diapo(elt)
{
 switch(elt)
 {
  case "plus" : if(i!=b){ i++; }
  		else { i=1; }
  		break;
 
  case "moins" : if(i!=1) { i--; }
  		 else { i=b; }
  		break;
 
  case "debut" : i=1; break;
 
  case "fin" : i=b; break;
 
  default : i=elt; ;
 }
sk8.src="Reseau_"+i+".jpg"
}
 
 
function vignette(inc)
{
 
 switch(inc)
 {
  case 'plus' : a=a+0; break;
  case 'moins': a=a-20; break;
  default : a=1;
 }
 
 var c=a;
 for(a;a<c+10;a++)
 {
  document.write("<a href=# onClick=diapo("+a+");><img border='0' name=imag src='Reseau_"+a+".jpg' width=50></a> ");
 }
}
 
 
</script>
 
 
<center>
<table border=1 cellpadding=0 cellspaing=0 width=550>
   <tr>
       <td align=center colspan=2>
 
<input type="button" value="<" name="moins" onClick="vignette('moins');">
 
<script language='JavaScript'>
 vignette('rien');
</script>
 
<input type="button" value=">" name="plus" onClick="vignette('plus');">
 
       </td>

comment résoude ce problème ???

**Auteur** · 09/09/2005, 11h35

bonjour,

voudrais-tu faire quelque chose comme ça?

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
 
<html>
<head>
	<title></title>
</head>
<style type="text/css">
.AImg{
border-style: none;
height: 100px;
}
 
/* DivImg légèrement plus grand que AImg pour éviter la barre de défilement vertical*/
.DivImg{
width: 400px;
height: 120px;
overflow: scroll;
}
</style>
 
<script language='JavaScript'>
var i=1;
var a=1;
var b=79; // Nombre d'images.
 
function diapo(elt) // Navigation dans les images à l'aide des vignettes et des boutons.
{
 switch(elt)
 {
  case "plus" : if(i!=b){ i++; } else{ i=1; } break;
 
  case "moins" : if(i!=1){ i--; } else{ i=b; } break;
 
  case "debut" : i=1; break;
 
  case "fin" : i=b; break;
 
  default : i=elt; ;
 }
reseau.src="Reseau_"+i+".jpg"
}
 
// Affichage des vignettes
function vignette()
{
 for(a;a<b+1;a++)
 {
// Rajout de class="AImg" dans le code et suppression de width (pour éviter les déformations des images)
 
  document.write("<a href='#' onclick='diapo("+a+");'><img class='AImg' name='imag' src='Reseau_"+a+".jpg'></a> ");
 }
}
</script>
</head>
<body>
 
<center>
<table border=1 cellpadding=0 cellspaing=0 width=550>
   <tr>
       <td align=center colspan=2>
 
<!-- Ajout d'un DIV et de nobr-->       
<div class="DivImg">
<nobr>
<script language='JavaScript'>
vignette();
</script>
</nobr>
</div>
<!-- Fin modification -->
       </td>
   </tr>
   <tr>
      <td align=right>
      <input type="button" value="|<" name="debut" onClick="diapo('debut');">
      <input type="button" value="<" name="precedent" onClick="diapo('moins');">
    </td>
    <td align=left>
      <input type="button" value=">" name="suivant" onClick="diapo('plus');">
      <input type="button" value=">|" name="fin" onClick="diapo('fin');">
    </td>
   </tr>
   <tr>
      <td colspan=2 width=550 align=center><img border="0" name="reseau" src="Reseau_1.jpg"></td>
   </tr>
</table>
 
 
</body>
 
</html>

j'ai rajouté la balise style, j'ai légèrement modifié la fonction vignette ainsi que le code HTML autour de la balise d'appel de la fonction vignette (<script language='JavaScript'>vignette();</script>).
Cela fonctionne plutôt bien avec IE et FF.

dans ta fonction vignette regarde si tu peux remplacer

Code :

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

<a href='#' onclick='diapo("+a+");'>

par

Code :

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

<a href='javascript: diapo("+a+");'>

**Cartman.inc** · 09/09/2005, 14h05

MErci pour ton code mais ce n'est pas encore ca que je cherche mais ton code fonctionne parfaitement !!!

**Auteur** · 10/09/2005, 11h26

peut-être pourrais tu être plus précis sur ce que tu souhaites faire.

**Cartman.inc** · 10/09/2005, 12h46

Ce que je voudrais c'est d'afficher les vignettes 10 par 10 et que l'on puisse les faires défiler en cliquant sur kelke chose. A la manière d'une pellicule photo.

**Cartman.inc** · 11/09/2005, 02h14

J'ai trouver la solution.
Elle est un peu barbare mais ça fontionne parfaitement.

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
<html>
<head>
<title></title>
</head>
<body>
 
<script language='JavaScript'>
 
var a=10;
var i=1;
 
var nb_img=79;
 
function diapo(elt)
{
 
 switch(elt)
 {
  case "plus" : if(i!=nb_img){ i++; }
  		else { i=1; }
  		break;
 
  case "moins" : if(i!=1) { i--; }
  		 else { i=nb_img; }
  		break;
 
  case "debut" : i=1; break;
 
  case "fin" : i=nb_img; break;
 
  default : i=elt; ;
 }
 
sk8.src="Reseau_"+i+".jpg"
 
}
 
function vig(diapo)
{
 
diap=diapo+a-10;
 
sk8.src="Reseau_"+diap+".jpg";
 
i=diap;
 
}
 
function vignette(nav)
{
 
switch(nav)
 {
  case "plus" :	if(a==nb_img)alert("Vous ne pouvez pas faire ceci.");
       	       	else{
  		a=a-9;
       	        a++; vign_1.src="Reseau_"+ a +".jpg";
       	      	a++; vign_2.src="Reseau_"+ a +".jpg";
 		a++; vign_3.src="Reseau_"+ a +".jpg";
 		a++; vign_4.src="Reseau_"+ a +".jpg";
		a++; vign_5.src="Reseau_"+ a +".jpg";
		a++; vign_6.src="Reseau_"+ a +".jpg";
		a++; vign_7.src="Reseau_"+ a +".jpg";
		a++; vign_8.src="Reseau_"+ a +".jpg";
		a++; vign_9.src="Reseau_"+ a +".jpg";
		a++; vign_10.src="Reseau_"+ a +".jpg";
		}
		break;
 
  case "moins" : if(a==10)alert("Vous ne pouvez pas faire ceci.");
       	       	 else{
  		 a=a-11;
       	       	 a++; vign_1.src="Reseau_"+ a +".jpg";
       	      	 a++; vign_2.src="Reseau_"+ a +".jpg";
 		 a++; vign_3.src="Reseau_"+ a +".jpg";
 		 a++; vign_4.src="Reseau_"+ a +".jpg";
		 a++; vign_5.src="Reseau_"+ a +".jpg";
		 a++; vign_6.src="Reseau_"+ a +".jpg";
		 a++; vign_7.src="Reseau_"+ a +".jpg";
		 a++; vign_8.src="Reseau_"+ a +".jpg";
		 a++; vign_9.src="Reseau_"+ a +".jpg";
		 a++; vign_10.src="Reseau_"+ a +".jpg";
		 }
		 break;
  default : a=10;
 }
 
 
 
}
 
</script>
 
 
<center>
<table border=1 cellpadding=0 cellspaing=0 width=550>
   <tr>
       <td align=center colspan=2>
<input type="button" value="<" name="moins" onClick="vignette('moins');">
 
<a href=# onclick='vig(1);'><img border='0' name=vign_1 src='Reseau_1.jpg' width=50></a>
<a href=# onclick='vig(2);'><img border='0' name=vign_2 src='Reseau_2.jpg' width=50></a>
<a href=# onclick='vig(3);'><img border='0' name=vign_3 src='Reseau_3.jpg' width=50></a>
<a href=# onclick='vig(4);'><img border='0' name=vign_4 src='Reseau_4.jpg' width=50></a>
<a href=# onclick='vig(5);'><img border='0' name=vign_5 src='Reseau_5.jpg' width=50></a>
<a href=# onclick='vig(6);'><img border='0' name=vign_6 src='Reseau_6.jpg' width=50></a>
<a href=# onclick='vig(7);'><img border='0' name=vign_7 src='Reseau_7.jpg' width=50></a>
<a href=# onclick='vig(8);'><img border='0' name=vign_8 src='Reseau_8.jpg' width=50></a>
<a href=# onclick='vig(9);'><img border='0' name=vign_9 src='Reseau_9.jpg' width=50></a>
<a href=# onclick='vig(10);'><img border='0' name=vign_10 src='Reseau_10.jpg' width=50></a>
 
<input type="button" value=">" name="plus" onClick="vignette('plus');">
 
 
       </td>
   </tr>
   <tr>
   	<td align=right>
	   <input type="button" value="|<" name="debut" onClick="diapo('debut');">
	   <input type="button" value="<" name="precedent" onClick="diapo('moins');">
    </td>
    <td align=left>
	   <input type="button" value=">" name="suivant" onClick="diapo('plus');">
	   <input type="button" value=">|" name="fin" onClick="diapo('fin');">
    </td>
   </tr>
   <tr>
   	<td colspan=2 width=550 align=center><img border="0" name="sk8" src="Reseau_1.jpg"></td>
   </tr>
</table>
 
</center>
</body>
</html>

Merci encore a ceux qui m'ont répondu.

Diaporama et vignettes

JavaScript

Discussions similaires

Partager

Partager