3 diaporamas automatiques javascript sur la meme page web

Version imprimable

11/03/2009, 16h57
zabandi

3 diaporamas automatiques javascript sur la meme page web

Bonjour à tous

J'ai un sérieux problème que je ne voit pas comment résoudre même en ayant chercher des heures sous google.

Je voudrai insérer 3 minis diaporamas automatiques sur la page d'accueil d'un site.
J'explique : le client souhaite faire 3 petits blocs bien distincts avec dedans des photos qui changeraient aléatoirement et surtout au démarrage du site, histoire de faire un mouvement sur la page d'accueil.

J'ai bien trouvé le code pour faire le diaporama mais ce que je ne sais pas faire c'est le multiplié par trois, à trois endroits différents (en fait ils seront les uns à coté de l'autre).

Je suis un peu novice en javascript et à part "pomper" des codes dispo sous google et changer le nom des photos, je ne sais pas grand chose de plus !!

si vous voulez comprendre mieux, voici le lien temporaire du site : http://habib.mathlouchi.perso.neuf.fr/
(les diaporamas se mettrons dans les trois blocs en bas)

Merci de vos réponses rapide

Bonjour , essaye ce code :

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
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
 
function boxFading(BoxAnim,interval){
	this.boxAnim = this.getElement(BoxAnim);
	this.listeImage = new Array();
	this.interval = interval*1000;
	this.IsIE=!!document.all;
	// permet de dÃ©finir l'image a afficher
	this.currentIndex = 0 ;
	this.imgMax = 0;
	var temp = this;
	//Pour combler un bug ie, on attend le chargement complet de la page
	if ( typeof(window.addEventListener) != "undefined" )
		window.addEventListener( "load", function(){
			temp.init()
		}, false );
	else{
		window.attachEvent( "onload", function(){
			temp.init()
		} );
	}
}
boxFading.prototype.changeImage = function(){
 
	var next = (this.currentIndex+1 > this.imgMax) ? 0:this.currentIndex+1;
 
	this.fade(100,0,this.listeImage[this.currentIndex]);
	this.fade(0,100,this.listeImage[next]);
 
	if(this.currentIndex == this.imgMax){
		this.currentIndex = 0;
	}
	else{
		this.currentIndex++;
	}
 
}
boxFading.prototype.init = function(){
	//On rÃ©cupÃ¨re toutes les images de la div
	this.listeImage = this.boxAnim.getElementsByTagName('img');
	//On assigne la valeur maximum 
	this.imgMax = this.listeImage.length-1;
	this.listeImage[0].style.display = "block";
	//Assignation du timer sur chaque image
	for(var i = 0 , l = this.listeImage.length ; i < l ; i++){
		this.listeImage[i].timer = null;
		//Ajout du filtre pour combler un bug ie
	      if(this.IsIE)
	      {
	        this.listeImage[i].style.filter=(i == 0) ?'alpha(opacity=100)':'alpha(opacity=0)';
	        this.listeImage[i].filters[0].opacity=(i == 0) ? 100:0;
	      }
	      else
	      {
	        this.listeImage[i].style.opacity=(i == 0) ? 1:0;
	      }
 
	}
	var temp = this;
	//On lance la mÃ©thode permettant de changer l'image
	try {
		var test = setInterval(function(){
			temp.changeImage()
		}, this.interval);
	}
	catch(err){
 
	}
}
 
 
boxFading.prototype.getElement = function(element){
		if(typeof(element) == "string"){
        	return document.getElementById(element);
        }
        else if(typeof(element) == "object"){
        	return (element);
        }
		else {
			return null;
		}
}
//MÃ©thode permettant d'effectuer l'effet de fading sur un objet	
boxFading.prototype.fade = function(start, end, objectToFade){
    if (start == end) {
        return false
    }
	objectToFade.style.display = "block";
	this.IsIE ? objectToFade.filters[0].opacity = start : objectToFade.style.opacity = start / 100;
 
    start >= end ? start -= 5 : start += 5;
 
    var temp = this;
    clearTimeout(objectToFade.timer);
    if (start != end) {
        objectToFade.timer = setTimeout(function(){
            temp.fade(start, end , objectToFade);
        }, 25);
    }
    else {
		if(end == 0)
		{
			objectToFade.style.display = "none";
		}
        clearTimeout(objectToFade.timer);
    }
}                         
 
</script>
<style type="text/css">
	.boxFading{
		position:relative;
		width:48px;
		height:48px;
		padding:5px;
 
	}
	.boxFading img{
		display:none;
		position:absolute;
		top:5px;
		left:5px;
	}
 
	.boxFadingg{
		position:relative;
		height:500px;
		padding:5px;
	}
 
	.boxFadingg img{
		display:none;
		position:absolute;
		top:5px;
		left:5px;
	}
</style>
</head>
<body>
        <div style="border:1px solid #666;;" class="boxFading" id="toto">
			<img src="images/img1.jpg" />
			<img src="images/img3.jpg" />
 
			<img src="images/img4.jpg" />
			<img src="images/img2.jpg" />
        </div>
        <div style="border:1px solid #666;" class="boxFading" id="titi">
			<img src="images/img1.jpg" />
			<img src="images/img2.jpg" />
			<img src="images/img3.jpg" />
			<img src="images/img4.jpg" />		
        </div>
 
        <div style="border:1px solid #666;" class="boxFading" id="tata">
			<img src="images/img4.jpg" />
			<img src="images/img3.jpg" />
			<img src="images/img2.jpg" />
			<img src="images/img1.jpg" />
        </div>
        <script>
			var box1 =  new boxFading('toto',3);
			var box2 =  new boxFading('titi',2);
			var box3 =  new boxFading('tata',5);
        </script>
    </body>
 
</html>

tout ce que tu as a faire , c'est récupèrer la partie javascript,
mettre tes images dans une div avec un id , et pour déclarer un diaporama :

var box1 = new boxFading(iddudiv,temps en seconde);

12/08/2010, 17h11
Alexis35

Bonjour,

je me permets de réouvrir ce sujet car j'aurais besoin de modifier ce diaporama en faisant en sorte que lorsque l'on passe la souris sur unes des images du diaporama affichées au dessus de celui-ci, le diaporama reprenne sur l'image en question....

Suis-je clair.??
13/08/2010, 09h14
le_chomeur

Bonjour , n'ayant même pas eu de retour sur ma première réponse pourrais tu nous indiquer ou tu en es ou nous montrer un exemple de ce que tu cherches ?
13/08/2010, 09h43
Alexis35
Bonjour,

Il y a méprise, je ne suis pas l'auteur du premier post, mais en faisant une recherche sur Google je suis tombé ici, cela répond à peu près à ce que je désire mais il manque une petite fonctionnalité, c'est pourquoi je me suis permis de relancer le post.

Bref, je vais essayer de m'expliquer clairement :

Donc il me faudrait un diaporama présenté de cette façon :
- dans la partie haute mes les images de mon diaporama en miniature
- en dessous, le diaporama a proprement parler.
Jusque là avec le code ci dessus, aucun problème.

Par contre j'aimerais, au rollover (onmouseover) sur les images en miniatures sur la partie haute, le diaporama se mette sur l'image en question, puis continue de défiler normalement (à partir de l'image sur laquelle on se trouve).

Voilà, merci beaucoup pour votre aide!

Bonjour à tous,

Nouvelle inscrite ou presque sur le forum, et débutante en javascript, je me suis inspirée du script proposé dans ce sujet pour réaliser un "diaporama multiple" (composé comme un damier, 5 des 9 cases sont des diaporamas automatiques). C'est impeccable ou presque.
Le problème arrive lorsque j'intègre mon script dans le reste de mon code!

la situation est la suivante:
le fichier "multidiaposcript.js" est intégré dans le fichier "diapos_inc.php" par un lien externe.
A ce stade, je teste le fonctionnement et tout est ok.
Ensuite,le fichier "diapos_inc.php" et intégré à ma page "index.php" à l'aide d'un include en php.
Je teste et là plus rien ne fonctionne.:cry:
:oops: Suis-je compréhensible?

Je cherche depuis un moment où se trouve mon erreur, compulse divers forums et tutos, rien de rien, je ne trouve pas la solution.

voici le code des différents fichiers. Pouvez-vous m'aider?

le fichier "multidiaposcript.js"

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
function boxFading(BoxAnim,interval){
	this.boxAnim = this.getElement(BoxAnim);
	this.listeImage = new Array();
	this.interval = interval*1000;
	this.IsIE=!!document.all;
	// permet de définir l'image a afficher
	this.currentIndex = 0 ;
	this.imgMax = 0;
	var temp = this;
	//Pour combler un bug ie, on attend le chargement complet de la page
	if ( typeof(window.addEventListener) != "undefined" )
		window.addEventListener( "load", function(){
			temp.init()
		}, false );
	else{
		window.attachEvent( "onload", function(){
			temp.init()
		} );
	}
}
boxFading.prototype.changeImage = function(){
 
	var next = (this.currentIndex+1 > this.imgMax) ? 0:this.currentIndex+1;
 
	this.fade(100,0,this.listeImage[this.currentIndex]);
	this.fade(0,100,this.listeImage[next]);
 
	if(this.currentIndex == this.imgMax){
		this.currentIndex = 0;
	}
	else{
		this.currentIndex++;
	}
 
}
boxFading.prototype.init = function(){
	//On récupère toutes les images de la div
	this.listeImage = this.boxAnim.getElementsByTagName('img');
	//On assigne la valeur maximum 
	this.imgMax = this.listeImage.length-1;
	this.listeImage[0].style.display = "block";
	//Assignation du timer sur chaque image
	for(var i = 0 , l = this.listeImage.length ; i < l ; i++){
		this.listeImage[i].timer = null;
		//Ajout du filtre pour combler un bug ie
	      if(this.IsIE)
	      {
	        this.listeImage[i].style.filter=(i == 0) ?'alpha(opacity=100)':'alpha(opacity=0)';
	        this.listeImage[i].filters[0].opacity=(i == 0) ? 100:0;
	      }
	      else
	      {
	        this.listeImage[i].style.opacity=(i == 0) ? 1:0;
	      }
 
	}
	var temp = this;
	//On lance la méthode permettant de changer l'image
	try {
		var test = setInterval(function(){
			temp.changeImage()
		}, this.interval);
	}
	catch(err){
 
	}
}
 
 
boxFading.prototype.getElement = function(element){
		if(typeof(element) == "string"){
        	return document.getElementById(element);
        }
        else if(typeof(element) == "object"){
        	return (element);
        }
		else {
			return null;
		}
}
//Méthode permettant d'effectuer l'effet de fading sur un objet	
boxFading.prototype.fade = function(start, end, objectToFade){
    if (start == end) {
        return false
    }
	objectToFade.style.display = "block";
	this.IsIE ? objectToFade.filters[0].opacity = start : objectToFade.style.opacity = start / 100;
 
    start >= end ? start -= 5 : start += 5;
 
    var temp = this;
    clearTimeout(objectToFade.timer);
    if (start != end) {
        objectToFade.timer = setTimeout(function(){
            temp.fade(start, end , objectToFade);
        }, 25);
    }
    else {
		if(end == 0)
		{
			objectToFade.style.display = "none";
		}
        clearTimeout(objectToFade.timer);
    }
}
 
	 	var box1 =  new boxFading('toto',5);
		var box2 =  new boxFading('titi',2);
		var box3 =  new boxFading('tata',5);
		var box4 =  new boxFading('tutu',5);
		var box5 =  new boxFading('tete',5);

Le fichier "diapos_inc.php"

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
 
<div id="includediapos">
    	<div class="boxText"><!--box1-->
        	<h4 class="accueil">blablablabla<br /> blablablabla<br /> blablablabla</h4>
		</div><!--/box1-->
        <div class="boxFading" id="toto"><!--box2-->
		  <img src="../images/DiapoWeb01.jpg"/>
		  <img src="../images/DiapoWeb02.jpg"/>
		  <img src="../images/DiapoWeb03.jpg"/>
          <img src="../images/DiapoWeb04.jpg"/>
        </div><!--/.boxText2-->
        <div class="boxText"><!--box3-->
        	<h4 class="accueil">blablablabla<br /> blablablabla<br />blablablabla</h4>
		</div><!--/.boxText3-->
       	<div class="boxFading" id="tata"><!--box4-->
		  <img src="../images/DiapoWeb02.jpg"/>
		  <img src="../images/DiapoWeb03.jpg"/>
		  <img src="../images/DiapoWeb04.jpg"/>
          <img src="../images/DiapoWeb05.jpg"/>
          <img src="../images/DiapoWeb01.jpg"/>
        </div><!--/.boxText4-->
        <div class="boxFading" id="titi"><!--box5-->
		  <img src="../images/DiapoWeb06.jpg"/>
		  <img src="../images/DiapoWeb07.jpg"/>			
        </div><!--/.boxText5-->
        <div class="boxFading" id="tutu"><!--box6-->
		  <img src="../images/DiapoWeb03.jpg"/>
		  <img src="../images/DiapoWeb04.jpg"/>
		  <img src="../images/DiapoWeb05.jpg"/>
          <img src="../images/DiapoWeb01.jpg"/>
          <img src="../images/DiapoWeb02.jpg"/>
        </div><!--/.boxText6-->
        <div class="boxText"><!--box7--> 
        	<h4 class="accueil"> <a href="#"> En savoir plus?<br />cliquez ici</a></h4> 
		</div><!--/.boxText7-->
        <div class="boxFading" id="tete"><!--box8-->
		  <img src="../images/DiapoWeb04.jpg"/>
		  <img src="../images/DiapoWeb05.jpg"/>
		  <img src="../images/DiapoWeb01.jpg"/>
          <img src="../images/DiapoWeb02.jpg"/>
          <img src="../images/DiapoWeb03.jpg"/>
        </div><!--/.boxText8-->
        <div class="boxText"><!--box9-->
        	<h4 class="accueil">blablablabla<br />blablablabla<br />blablablabla</h4> 
		</div><!--/.boxText9-->
</div><!--/#includediapos-->
<script type="text/javascript" language="javascript" src="../scripts/MultiDiapoScript.js"></script>
<script>
		var box1 =  new boxFading('toto',5); //toto= id de la div, 5= temps en seconde
		var box2 =  new boxFading('titi',5);
		var box3 =  new boxFading('tata',5);
		var box4 =  new boxFading('tutu',5);
		var box5 =  new boxFading('tete',5); 
		</script>

Et, enfin le fichier index.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=""/>
<meta name="description" content="description de la page"/>
<!--le texte de la description apparait dans le moteur de recherche sous forme de résumé-->
<meta name="author" content=""/>
<meta name="robots" content="ALL" />
<META name="Revisit-after" content="15 days" />
<title>MultiDiaporamas automatiques | exemple d'insertion de script</title>
<link href="css/MultiDiaporamas.css" rel="stylesheet" type="text/css" />
</head>
 
<div id="page">
	<?php
        include('include/diapos_inc.php');
        ?>
</div><!--/ #page -->
</body>
</html>

D'avance, un grand merci pour votre aide :ccool:
médiamimi

19/09/2012, 20h45
Michaeljackfan

Salut,

La première erreur qui me vienne à l'esprit serait que le fichier "index.php" et le fichier "diapos_inc.php" ne soient pas dans le même dossier.
À cause de cela, le chemin des images est faussé.

Pour corriger cette erreur, il te faut ré-écrire le chemin vers les images dans "diapos_inc.php", en imaginant que tu te trouves dans le dossier de "index.php".
Car lorsque le navigateur va charger les images, il va suivre le chemin indiqué par l'attribut "src" en partant de "index.php".

Pareil pour le chemin du script dans la balise <SCRIPT>

Bonjour à tous,

Toujours aussi débutante, mais je progresse:D
Merci beaucoup Michaeljackfan, pour ta réponse. :)
Effectivement, une fois les corrections faites sur les chemins de fichiers, ça
fonctionne!
Mais ça fonctionne tant que je n'inclus pas mon include dans la page index.php complète du site. Parce que là, c'est la cata!.
Les chemins des fichier include semblent corrects puisque j'ai un affichage des éléments, et appellent bien chaque fois un fichier dont le nom est totalement différent.
Mais ils semblent ne pas vouloir fonctionner ensemble. Seulement une partie des diaporamas fonctionnent et, l'image qui est dans la tête du site (include/tete.php) réagit également au script alors qu'elle est complètement indépendante et dans un autre include.
Du coup, l'affichage de la page index.php....je n'en parle même pas!
En affichant le code source, à la recherche d'une solution, le code interprété en html apparait propre.
Je me casse la tête!!! Au secours!!!
Le code du fichier javascript est resté identique au post précédent
Le fichier index.php du site
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content=""/> <meta name="description" content="description de la page"/> <meta name="author" content=""/> <meta name="robots" content="ALL" /> <META name="Revisit-after" content="30 days" /> <title></title> <link rel="shortcut icon" type="image/x-icon" href="#" /> <link href="css/global.css" rel="stylesheet" type="text/css" /> </head> <body onload="boxFading(BoxAnim,interval);"> <div id="page"> <?php include('include/tete_inc.php'); include('include/barrenav_inc.php'); include('include/diapos_inc.php'); include('include/pied_inc.php'); ?> </div> </body> </html>
D'avance, un grand merci pour votre aide :ccool:
médiamimi