plusieurs diaporamas différents dans plusieurs pages [Résolu]

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 !

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

jreaux62 · 13/09/2011, 19h40

Ce n'est pas si compliqué :

Citation:

Citation:

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

jreaux62 · 14/09/2011, 21h52

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

Citation:

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

Citation:

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

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

jreaux62 · 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é"...

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

15/09/2011, 09h21	#11
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	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". __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

12/09/2011, 19h24	#4
Mut Membre confirmé Inscription : mars 2003 Messages : 789 Détails du profil Informations personnelles : Âge : 28 Localisation : France, Seine Maritime (Haute Normandie) Informations forums : Inscription : mars 2003 Messages : 789 Points : 237 Points : 237	Mince....j'avais juste oublié les + + autour de la variable.... Merci beaucoup
	00

13/09/2011, 18h27	#5
Mut Membre confirmé Inscription : mars 2003 Messages : 789 Détails du profil Informations personnelles : Âge : 28 Localisation : France, Seine Maritime (Haute Normandie) Informations forums : Inscription : mars 2003 Messages : 789 Points : 237 Points : 237	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
	00

14/09/2011, 22h08	#9
Mut Membre confirmé Inscription : mars 2003 Messages : 789 Détails du profil Informations personnelles : Âge : 28 Localisation : France, Seine Maritime (Haute Normandie) Informations forums : Inscription : mars 2003 Messages : 789 Points : 237 Points : 237	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 !
	00

19/09/2011, 18h35	#14
Mut Membre confirmé Inscription : mars 2003 Messages : 789 Détails du profil Informations personnelles : Âge : 28 Localisation : France, Seine Maritime (Haute Normandie) Informations forums : Inscription : mars 2003 Messages : 789 Points : 237 Points : 237	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é"...
	00

19/09/2011, 21h03	#16
Mut Membre confirmé Inscription : mars 2003 Messages : 789 Détails du profil Informations personnelles : Âge : 28 Localisation : France, Seine Maritime (Haute Normandie) Informations forums : Inscription : mars 2003 Messages : 789 Points : 237 Points : 237	C'est vraiment parfait !! Je vais étudier ton lien Un grand merci!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email