diaporama avec images

Version imprimable

Bonjour,

Voilà, j'aimerais mettre sur mon site, comme page de démarrage, 2-3 images les unes a coté des autres qui défilent comme un diaporama. Je sais que pour cela il y a le SlideShow. J'ai trouvé un petit script. Mais mon problème, c'est qu'ici on a uniquement une case avec les images qui défilent, et moi je voudrais en mettre encore une ou deux images a coté sous forme de diaporama comme sur la page de démarrage de ce site : http://www.ecares.org/ et donc j'aimerais savoir ce qu'il faut que je modifie dans mon code javascript pour ça...

Code:

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
 
<html>
 
<HEAD>
 
<script>
 
var slideShowSpeed = 5000
 
var crossFadeDuration = 3
 
var Pic = new Array()
 
Pic[0] = '1.jpg'
 
Pic[1] = '2.jpg'
 
Pic[2] = '3.jpg'
 
Pic[3] = '4.jpg'
 
Pic[4] = '5.jpg'
 
var t
 
var j = 0
 
var p = Pic.length
 
var preLoad = new Array()
 
for (i = 0; i < p; i++){
 
   preLoad[i] = new Image()
 
   preLoad[i].src = Pic[i]
 
}
 
function runSlideShow(){
 
   if (document.all){
 
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
 
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
 
      document.images.SlideShow.filters.blendTrans.Apply()      
 
   }
 
   document.images.SlideShow.src = preLoad[j].src
 
   if (document.all){
 
      document.images.SlideShow.filters.blendTrans.Play()
 
   }
 
   j = j + 1
 
   if (j > (p-1)) j=0
 
   t = setTimeout('runSlideShow()', slideShowSpeed)
 
}
 
</script>
 
</HEAD>
 
<BODY onLoad="runSlideShow()">
 
<table border="0" cellpadding="0" cellspacing="0">
 
<tr>
 
<td id="VU" height=150 width=150>
 
<img src="01.JPG" name='SlideShow' width=200 height=200></td>
 
 
</tr>
 
</table>
 
</BODY>
</html>

Si ton code marche tel qu'il est, il te suffit de rajouter une 2eme case à ton tableau
Code:

1 2 3 4 5 6 <td id="VU" height=150 width=150> <img src="01.JPG" name='SlideShow' width=200 height=200> </td> <td id="VU" height=150 width=150> <img src="02.JPG" name='SlideShow' width=200 height=200> </td>
Je ne suis pas 100% affirmatif, mais essaye.

04/07/2008, 10h18
le_chomeur

Il y a un peu plus de modification à faire :

- créer un tableau distinct pour chaque diaporama
- passer ce tableau à ta méthode slideshow
04/07/2008, 10h23
Greatz

Il marche mais justement pour une seule case... Et j'avais déja pensé à faire cette manip avant ;) mais il n'y a qu'une seule case qui défile.. et puis il aurait fallu modifier + encore étant donné que je dois pouvoir choisir les images qui doivent défiler autant dans la premiere case que dans la deuxième pour avoir une différence entre les deux... C'est assez dur à trouver comme code d'après ce que j'ai pu voir...
04/07/2008, 10h26
Greatz

Créer un tableau distinct.. OK
mais qu'est ce que tu veux dire par "passer ce tableau à ta méthode slideshow" ? de quelle manière je veux dire...
04/07/2008, 10h43
le_chomeur
après relecture j'ai oublié un élément :

- créer un tableau distinct pour chaque diaporama
- passer ce tableau à ta méthode slideshow
- Indiquer l'id de l'image( ou cellule ) qui contiendra le diaporama

exemple :
Code:

1 2 3 var diapo1 = new Array('1.jpg','2.jpg'); var diapo2 = new Array('3.jpg','4.jpg');
puis ta méthode slideshow :
Code:

1 2 3 slideshow(tableau,idContenant){ ... }
ce qui permettra d'utiliser ta méthode slideShow avec autant de tableau d'image que tu le souhaite , et afficher autant de diaporama que souhaité

je te laisse également modifier ta fonction pour utiliser le bon tableau et pointer sur le bon id tout ce passe ici :

document.images.SlideShow.src = preLoad[j].src

preLoad[j] a remplacer par tableau[j]

et document.images a remplacer par document.getElementById(idContenant)

mais a la vue de ton script il ne fonctionnera que sous internet explorer ...

bon courage :)
04/07/2008, 10h47
Greatz

Ah oui... je viens de voir... effectivement déja sur firefox ca marche pas... zut :/
Mais merci quand meme :) je vais de toute façon tenter de le faire fonctionner. Autant aller jusqu'au bout des choses ;)

Citation:
Envoyé par riete
Si ton code marche tel qu'il est, il te suffit de rajouter une 2eme case à ton tableau
Code:

1 2 3 4 5 6 <td id="VU" height=150 width=150> <img src="01.JPG" name='SlideShow' width=200 height=200> </td> <td id="VU" height=150 width=150> <img src="02.JPG" name='SlideShow' width=200 height=200> </td>
Je ne suis pas 100% affirmatif, mais essaye.
un id doit être unique !!