plusieurs diaporamas différents dans plusieurs pages

**Mut** · 06/09/2011, 20h54

Bonsoir,

Je souhaite afficher dans plusieurs pages, plusieurs diaporamas avec des photos différentes.

J'ai donc

- une "Page1" avec deux rubriques
- Une "page2" avec deux rubriques

Je souhaite pouvoir afficher dans chaques rubriques un diaporama avec des photos différentes.

J'ai récupérer ceci et essayer de le travailler mais sans succés :

fichier "script" :

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
 
var slideShowSpeed = 4000
 
var crossFadeDuration = 3
 
var Pic = new Array()
 
Pic[0] = 'images/accueil/image1.jpg'
 
Pic[1] = 'images/accueil/image2.jpg'
 
Pic[2] = 'images/accueil/image3.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)
 
}

body de chaque page :

Code :

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

1
2
 
<body onload="runSlideShow()">

Il faudrait donc que le mot "accueil" change suivant la page et la rubrique afin que le bon diaporama s'affiche dans chaque rubrique...

Si quelqu'un a une solution....

Merci !

Invité · 10/09/2011, 21h24

Bonjour,
où est le problème ?

Code :

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

1
2
3
4
5
6
7
8
function runSlideShow(repimg) {
	var repimg;
	// [...]
	Pic[0] = repimg+'/image1.jpg'
	Pic[1] = repimg+'/image2.jpg'
	Pic[2] = repimg+'/image3.jpg'
	// [...]
}

Code :

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

<body onload="runSlideShow('images/accueil')">

**Mut** · 12/09/2011, 19h23

Le problème c'est que l'image ne change plus car je pense que le dernier appel de la fonction n'est pas bon :

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
 
 
var slideShowSpeed = 4000
 
var crossFadeDuration = 3
 
var Pic = new Array()
 
var t
var j = 0
 
function runSlideShow(repimg){
 
//var repimg;
 
 
 
Pic[0] = repimg+'/image1.jpg'
 
Pic[1] = repimg+'/image2.jpg'
 
Pic[2] = repimg+'/image3.jpg'
 
 
 
var p = Pic.length
 
var preLoad = new Array()
 
for (i = 0; i < p; i++){
 
preLoad[i] = new Image()
 
preLoad[i].src = Pic[i]
 
}
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('"repimg"')", slideShowSpeed)
 
}

j'appelle la fonction comme ça :

Code :

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

1
2
 
<body onload="runSlideShow('images/accueil')">

et l'insertion de l'image se fait ainsi :

Code :

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

1
2
 
<img src="images/accueil/image1.jpg" name="SlideShow" width="400" height="350" alt="Exemples" style="float:left;border:0;margin: 1em 1em 0 0;">

Si j'enlève la variable repimg dans le dernier appel de la fonction, ça défile mais sans les images....

**Mut** · 12/09/2011, 19h24

Mince....j'avais juste oublié les + + autour de la variable....

Merci beaucoup

**Mut** · 13/09/2011, 18h27

Bonjour,

Je reviens sur ce sujet car en fait il est en partie résolu. J'ai oublié un paramètre qui ne fonctionne pas. Le code ci-dessus fonctionne bien et permet de changer de chemin sur chaques différentes pages. Mon problème est que je souhaiterais également pouvoir personnaliser l'affichage des diapos sur une meme page. C'est à dire, pouvoir avoir deux diapos sur une même page affichant chacun une série d'images différentes....

Merci

Invité · 13/09/2011, 19h40

Ce n'est pas si compliqué :

Code :

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

<body onload="runSlideShow('images/accueil','SlideShow1'); runSlideShow('images/autredossier','SlideShow2');">

et la fonction :

Code :

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

1
2
3
4
5
6
7
8
function runSlideShow(repimg,slidename) {
	var repimg; // rep des images
	var slidename; // name de l image
 
	// ET REMPLACER partout :
	// document.images.SlideShow.
	// par (je crois) :
	document.images.[slidename].

**Mut** · 14/09/2011, 20h41

Les diapos ne défilent plus avec ce code :

fichier script :

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
 
var slideShowSpeed = 4000
 
var crossFadeDuration = 3
 
var Pic = new Array()
 
var t
var j = 0
 
function runSlideShow(repimg,slidename){
 
var slidename;
var repimg;
 
alert (slidename);
Pic[0] = repimg+'/image1.jpg'
 
Pic[1] = repimg+'/image2.jpg'
 
Pic[2] = repimg+'/image3.jpg'
 
if (repimg=="images/accueil") {
Pic[3] = repimg+'/image4.jpg'
}
 
var p = Pic.length
 
var preLoad = new Array()
 
for (i = 0; i < p; i++){
 
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
 
}
if (document.all){
 
document.images.[slidename].style.filter="blendTrans(duration=2)"
	document.images.[slidename].style.filter="blendTrans(duration=crossFadeDuration)"
	document.images.[slidename].filters.blendTrans.Apply() 
 
}
 
	document.images.[slidename].src = preLoad[j].src
 
if (document.all){
 
	document.images.[slidename].filters.blendTrans.Play()
 
}
 
j = j + 1
 
if (j > (p-1)) j=0
 
t = setTimeout("runSlideShow('"+repimg+"','"+slidename+"')", slideShowSpeed)
 
}

Page html

Code :

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

1
2
3
 
 
<body onload="runSlideShow('images/test','SlideShow1');runSlideShow('images/accueil','SlideShow2')" >

a l'endroit du premier diapo :

Code :

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

1
2
 
<img src="images/test/image1.jpg" name="SlideShow2" width="400" height="350" alt="Exemples" style="float:left;border:0;margin: 1em 1em 0 0;" >

a l'endroit du 2e diapo :

Code :

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

1
2
 
<img src="images/accueil/image1.jpg" name="SlideShow1" width="400" height="350" alt="Exemples" style="float:left;border:0;margin: 1em 1em 0 0;">

Les images restent figées. J'ai essayé de conroler la variable slidename mais le "alert" ne me renvoit rien dans la fonction. L'"alert" n'est meme pas affiché....

Invité · 14/09/2011, 21h52

J'avais fait une erreur (que tu aurais pu voir !!)

// ET REMPLACER partout :
// document.images.SlideShow.
// par (je crois) :
document.images.[slidename].

~~document.images.[slidename]~~ -> document.images[slidename]

J'ai ajouté des ; en fin d'instructions et déclaré Pic (var Pic = new Array(); )

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
<script type="text/javascript">
var slideShowSpeed = 4000;
var crossFadeDuration = 3;
var t;
var j = 0;
 
function runSlideShow(repimg,slidename){
 
	var slidename;
	var repimg;
 
	var Pic =  new Array();
	Pic[0] = repimg+'/image1.jpg';
	Pic[1] = repimg+'/image2.jpg';
	Pic[2] = repimg+'/image3.jpg';
	if (repimg=="images/accueil") {
		Pic[3] = repimg+'/image4.jpg';
	}
 
	var p = Pic.length;
	var preLoad = new Array();
 
	for (i = 0; i < p; i++){
		preLoad[i] = new Image();
		preLoad[i].src = Pic[i];
	}
	if (document.all){
		document.images[slidename].style.filter="blendTrans(duration=2)";
		document.images[slidename].style.filter="blendTrans(duration=crossFadeDuration)";
		document.images[slidename].filters.blendTrans.Apply();
	}
	document.images[slidename].src = preLoad[j].src;
 
	if (document.all){
		document.images[slidename].filters.blendTrans.Play();
	}
 
	j = j + 1;
	if (j > (p-1)) j=0;
 
	t = setTimeout("runSlideShow('"+repimg+"','"+slidename+"')", slideShowSpeed);
}
</script>

ps : un code bien indenté est plus facile à lire, et à déboguer.

**Mut** · 14/09/2011, 22h08

Impec merci pour les infos ! mon tableau "pic" était bien déclaré mais effectivement, le slideshow était mal interprété.

Il me reste à gérer le décalage des indices car "i" sert pour les deux diapos donc la fonction parcours deux tableaux différentx avec le meme indice et donc le diapo affiche une image sur deux...

En tout cas merci ce résultat est déjà pas mal !

**headmax** · 14/09/2011, 22h47

Il me reste à gérer le décalage des indices car "i" sert pour les deux diapos donc la fonction parcours deux tableaux différentx avec le meme indice et donc le diapo affiche une image sur deux...

Peut être un concat des tableaux?

Code :

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

1
2
3
4
 
var a=new Array('a','b','c');
var b=new Array('d','e','f');
var c=a.concat(b);

Invité · 15/09/2011, 09h21

Bonjour,
Il NE faut PAS déclarer "var Pic = new Array();" AVANT la fonction,
mais il faut le déclarer DANS LA FONCTION.
- enlever du début (avant la fonction)
- et le mettre DANS la fonction
Sinon, Pic est "variable globale" au lieu d'être "variable locale à la fonction".

**Mut** · 19/09/2011, 18h11

Effectivement, merci beaucoup le tableau était déclaré hors de la fonction. Ca fonctionne très bien maintenant. Il me reste un petit soucis lorsque le dimensionnement du tableau n'est pas le même pour les deux diapos. Il y en a un qui s'arrête de défiler (celui qui à le moins d'image) alors que l'autre boucle bien en continu. Il faudrait donc que celui qui à le moins d'images boucle également au lieu de s'arrêter. J'ai enlever la partie suivante pour voir si le problème venait bien de la :

Code :

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

1
2
3
4
5
 
 
if (repimg=="images/accueil") {
Pic[3] = repimg+'/image4.jpg';
}

et effectivement, sans cette condition, les deux diapos bouclent bien en continu, mais je ne peux donc pas personnaliser le nombre d'image de chaque diapos....

Il n'y a plus que l'indice "j" de déclaré en global

Invité · 19/09/2011, 18h18

Bonjour,
mets toutes les variables dans la fonction :

Code :

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

1
2
3
4
5
function runSlideShow(repimg,slidename){
	var slideShowSpeed = 4000;
	var crossFadeDuration = 3;
	var t;
	var j = 0;

**Mut** · 19/09/2011, 18h35

Oui j'avais essayé mais, alors si je mets "j", les images ne changent plus...tout le reste est dedans.

Si "j" est en dehors, les deux diapos défilent bien toutes leurs images mais le premier (qui à une image de moins par rapport au deuxième) s'arrete, le deuxième continu, puis la boucle repart sauf pour le premier qui reste "bloqué"...

Invité · 19/09/2011, 20h50

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<script type="text/javascript">
	function runSlideShow(repimg,slidename,j){
		var slidename;
		var repimg;
 
		var slideShowSpeed = 4000;
		var crossFadeDuration = 3;
		var t;
		var j = Number(j);
 
		var Pic =  new Array();
		Pic[0] = repimg+'/image1.jpg';
		Pic[1] = repimg+'/image2.jpg';
		Pic[2] = repimg+'/image3.jpg';
		if (repimg=="images/accueil") {
			Pic[3] = repimg+'/image4.jpg';
			Pic[4] = repimg+'/image5.jpg';
		}
 
		var p = Pic.length;
		var preLoad = new Array();
 
		for (i = 0; i < p; i++){
			preLoad[i] = new Image();
			preLoad[i].src = Pic[i];
		}
		if (document.all){
			document.images[slidename].style.filter="blendTrans(duration=2)";
			document.images[slidename].style.filter="blendTrans(duration=crossFadeDuration)";
			document.images[slidename].filters.blendTrans.Apply();
		}
		document.images[slidename].src = preLoad[j].src;
 
		if (document.all){
			document.images[slidename].filters.blendTrans.Play();
		}
 
		j = j + 1;
		if (j > (p-1)) j=0;
 
		t = setTimeout("runSlideShow('"+repimg+"','"+slidename+"',"+j+")", slideShowSpeed);
	}
	</script>
 
</head>
<body onload="runSlideShow('images/accueil','SlideShow1',0); runSlideShow('images/test','SlideShow2',0);">
 
<div id="box1">
	<p>diaporama 1</p>
	<img src="img-diapoD/image1.jpg" name="SlideShow1" width="400" height="350" alt="Exemples 1" style="xxfloat:left; border:0; margin: 1em 1em 0 0;" >
</div>
<div id="box2">
	<p>diaporama 2</p>
	<img src="images/test/image1.jpg" name="SlideShow2" width="400" height="350" alt="Exemples 2" style="xxfloat:left; border:0; margin: 1em 1em 0 0;" >
</div>
 
</body>
</html>

ps : il existe de très bons sliders jQuery, comme CrossSlide, ...

**Mut** · 19/09/2011, 21h03

C'est vraiment parfait !!

Je vais étudier ton lien

Un grand merci!

plusieurs diaporamas différents dans plusieurs pages

JavaScript

Discussions similaires

Partager

Partager