diaporama avec images

**Greatz** · 04/07/2008, 09h37

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 :

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
 
<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>

**riete** · 04/07/2008, 10h11

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

Code :

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

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.

**le_chomeur** · 04/07/2008, 10h18

Il y a un peu plus de modification à faire :

- créer un tableau distinct pour chaque diaporama
- passer ce tableau à ta méthode slideshow

**Greatz** · 04/07/2008, 10h23

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...

**Greatz** · 04/07/2008, 10h26

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...

**le_chomeur** · 04/07/2008, 10h43

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 :

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

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 :

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

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

**Greatz** · 04/07/2008, 10h47

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

**Auteur** · 04/07/2008, 13h07

Envoyé par riete

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

Code :

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

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 !!

diaporama avec images

JavaScript

Discussions similaires

Partager

Partager