[JavaScript] Fondu enchainé [Sources]

[Bovino]

Envoyé par vodiem

merci Bovino

Merci

Envoyé par vodiem

je déplore qu'il n'y a pas une partie réservé et commenté dans le code pour le paramétrage du délai entre fondu et délai de transition.

Effectivement, comme indiqué dans le premier post, j'ai fait ça un peu vite, du coup, j'ai pas mis de commentaire. C'est vrai que ce serait facile de gérer la vitesse de fondu et le délai de transition. La transition automatique a été rajouté après la création du script, c'est pour ça que j'ai mis un délai fixe... Je vais tâcher de rectifier cela.

Envoyé par vodiem

je craignais de voir le chargement des images comme dans la démo mais ca va.
pas de soucis particulier, simple d'utilisation

Encore une fois, c'est codé rapidement, donc je n'ai pas pris en compte le préchargement des images, ça pourra faire l'objet d'une évolution future. Dans l'exemple, les images apparaissent une par une car elles sont un peu grosses (100 à 200 ko), pour des images plus optimisées Web, c'est moins problématique, comme tu le fais remarquer

[mythomanu]

Salut Bovino,

Super script, c'est grâce à lui que je me suis inscrit ici. J'aimerais en effet étendre les fondus aux champs de texte. J'ai modifié le script pour ne jouer qu'avec la transparence (et plus avec le z-index), cela marche avec les images mais pas le texte. Dans l'hypothèse où cela marche, serait-il possible de synchroniser des fondus différents?

[edit]
Toutes mes excuses... ton script fonctionne aussi bien avec le texte... pour autant qu'on remplace 'images' dans les arguments des fonctions JS par la variable class_img!

[Yvopit]

Bonjour,

Merci pour ce forum.
Il peut me sauver du désespoir de ne pas être développeur...

J'ai créé un diaporama perso en glanant des codes ici et là.
Il ne manque que le fondu enchaîné, et je ne comprends rien !

Voici mes codes - dans le head> :

Code javascript :

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
<script type="text/javascript" language="JavaScript">
var current = 0;
 
function next(){ // forward one image
if(document.formname.slide[current+1]){
document.images.show.src = document.formname.slide[current+1].value;
document.formname.slide.selectedIndex = ++current;}
else{first();}}
 
function previous(){ // back on image
if((current-1) >= 0){
document.images.show.src = document.formname.slide[current-1].value;
document.formname.slide.selectedIndex= --current;}
else{last();}}
 
function first(){ // jump to first image
current=0;
document.images.show.src = document.formname.slide[0].value;
document.formname.slide.selectedIndex=0;}
 
function last(){ // this is jump to last image
current=(document.formname.slide.length-1);
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex=current;}
 
function ap(text){ // this controls the auto-play and/or auto-stop
document.formname.slidebutton.value=(text == "Stop") ? "Start" : "Stop";
rotate();}
 
function change(){ // this is for the pulldown menu
current=document.formname.slide.selectedIndex;
document.images.show.src = document.formname.slide[current].value;}
 
function rotate() {
if (document.formname.slidebutton.value == "Stop") {
current = (current == document.formname.slide.length-1) ? 0 : current+1;
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex = current;
window.setTimeout("rotate()", 4000);}}
//  End -->
</script>

et dans le body> :

Code html :

<form name="formname" action="diaporama">

avec un tableau dans lequel une première image

Code html :

<img src="image0.jpg" name="show">

Puis :

Code html :

1
2
3
4
<select id="slide" onchange="change()" 
             <option value="image1.jpg">blabla</option>
             <option value="image2.jpg">blabla</option>
             <option value="image3.jpg">blabla</option>

etc.
La suite n'a pas d'intérêt je crois...

Que dois-je faire, Docteur, pour que les enchaînements soient fondus ?

Merci infiniment !

Yvo

[Fets5]

Bonjour,


Merci pour ce script, toutefois je n'arrive pas à positionner les images où je veux, et ça semble venir du "position: absolute" dans le css. J'ai beau créer un div container, ça ne passe pas... une idée ?

[Bovino]

Envoyé par Fets5

une idée ?

Difficile à dire sans le code de ta page...
Pour info, un élément en position absolute est positionné par rapport à son parent positionné (c'est-à-dire avec un position différent de "static") le plus proche.
Donc si leur top et left est identique, il n'y a pas de raison pour qu'ils ne soient pas superposés.

[Yvopit]

Merci Fets5 !

Je crois que je devrai me contenter de la structure actuelle, sans fondu...

À ce propos j'ai l'impression que l'effet javascript n'a pas l'élégance de l'effet Flash, mais peut-être qu'il y a plusieurs options (territoire inconnu).

Autre question de code :
si on dit à la bête de prendre 80% de la largeur de la page, y'en a comprendre. Si on demande 80% de la hauteur, y'en a faire n'importe quoi...

Joyeux Noël à tous !

[Fets5]

Envoyé par Bovino

Difficile à dire sans le code de ta page...

Bonjour,

oui, c'est forcément plus dur. En fait je galérais avec mes div, j'avais dû en louper un, j'ai finalement réussi à bien le positionner dans son container. Encore merci, le code marche très bien !

[chancelienne]

Bonjour, est-il possible d'insérer un div avec du texte de façon à ce que le fondu s'enchaîne derrière mais que le texte reste figé ?
Merci

[lalon]

Merci, ton script m'a vraiment aidé

[christele_r]

Juste vous faire remonter un bug qui concerne un peut votre sujet je crois

http://www.developpez.net/forums/d11...r/#post6139227

[autocrator]

salut,
un super code Bovino, même si j'arrive pas a tous comprendre (pas beaucoup de commentaire ...).

j'aimerais beaucoup l'appliquer sur le petit diapo que j'ai fais,
il y a un onclick sur le body, comme ça l'utilisateur peut changer quand il veut (pas de timer)

Code :

1
2
3
4
5
6
7
var i=0
function changeBG(){
	var tabImage = Array('url("img/a380.jpg")','url("img/fly.jpg")','url("img/airplane.jpg")','url("img/chasse.jpg")'); // Je cree un tableau qui contiens les images que je vais afficher
	var max = tabImage.length;
	document.body.style.backgroundImage = tabImage[i++];
	if(i == max){i = 0;} 
}

mais comme je l'ai dit plus haut ton code est légèrement trop complexe pour moi

un coup de main ne serait pas de refus
merci d'avance ! ! !

[Auteur]

bonjour autocrator,

je pense que tu devrais évoquer ton problème directement dans le forum javascript en ajoutant un lien vers ce sujet

[leniol30]

Bonjour à tous, j'ai utilisé le code fourni dans ce post et il marche à merveille, et j'ai aussi rajouté la fonction de démarrage auto sur le onload, parfait, même pour un noob comme moi
Il ne me manque qu'une fonction, l'exemple donne un fondu en boucle, pour ma part je souhaiterai qu'une fois la liste des images lue, l'animation s'interrompe et charge une autre page html.
Si vous avez la réponse, merci.

[ABCIWEB]

Bonjour,

Je me suis servi de ce petit code car je le trouve l'algo bien fait. Difficile de faire plus court, c'est une bonne base.

Cependant j'avais besoin de plusieurs diaporamas dans une même page avec une navigation complète dont le défilement automatique.

La fonction "defil" proposée dans l'exemple en ligne (uniquement) ne permet pas ce fonctionnement pour plusieurs diaporamas, à cause de la variable globale "var defilement" et du fait que la fonction "defil" est spécifique à une seule instance de diaporama.

Ci-desous un exemple complet avec cette fonction "defil" intégrée dans le prototype. Vous noterez aussi une petite différence dans le html pour appeler la fonction "defil". Voici donc le code de l'exemple en ligne, modifié au minimum pour pouvoir fonctionner avec plusieurs diaporamas :

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
<!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" xml:lang="fr-FR" lang="fr-FR">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Fondu enchainé</title>
		<style type="text/css">
			h1{
				text-align: center;
			}
			.content {
				position:relative;
			}
			.container{
				height: 700px;
			}
			.images1{
				position: absolute;
				top: 5em;
				z-index: 0;
			}
			.images2{
				position: absolute;
				top: 5em;
				z-index: 0;
			}
			p{
				width: 800px;
				text-align: center;
			}
		</style>
		<script type="text/javascript">
 
			var Fondu = function(classe_img){
				this.defilement = false;
				this.classe_img = classe_img;
				this.courant = 0;
				this.coeff = 100;
				this.collection = this.getImages();
				this.collection[0].style.zIndex = 100;
				this.total = this.collection.length - 1;
				this.encours = false;
			}
			Fondu.prototype.getImages = function(){
				var tmp = [];
				if(document.getElementsByClassName){
					tmp = document.getElementsByClassName(this.classe_img);
				}
				else{
					var i=0;
					while(document.getElementsByTagName('*')[i]){
						if(document.getElementsByTagName('*')[i].className.indexOf(this.classe_img)>-1){
							tmp.push(document.getElementsByTagName('*')[i]);
						}
						i++;
					}
				}
				var j=tmp.length;
				while(j--){
					if(tmp[j].filters){
						tmp[j].style.width = tmp[j].style.width || tmp[j].offsetWidth+'px';
						tmp[j].style.filter = 'alpha(opacity=100)';
						tmp[j].opaque = tmp[j].filters[0];
						this.coeff = 1;
					}
					else{
						tmp[j].opaque = tmp[j].style;
					}
				}
				return tmp;
			}
			Fondu.prototype.change = function(sens){
				var prevObj = this.collection[this.courant];
				if(this.encours){
					return false;
				}
				this.encours = true;
				if(sens){
					this.courant++;
					if(this.courant>this.total){
						this.courant = 0;
					}
				}
				else{
					this.courant--;
					if(this.courant<0){
						this.courant = this.total;
					}
				}
				var nextObj = this.collection[this.courant];
				nextObj.style.zIndex = 50;
				var tmpOp = 100;
				var that = this;
				var timer = setInterval(function(){
					if(tmpOp<0){
						clearInterval(timer);
						timer = null;
						prevObj.opaque.opacity = 0;
						nextObj.style.zIndex = 100;
						prevObj.style.zIndex = 0;
						prevObj.opaque.opacity = 100 / that.coeff;
						that.encours = false;
					}
					else{
						prevObj.opaque.opacity = tmpOp / that.coeff;
						tmpOp -= 5;
					}
				}, 25);
			}
			Fondu.prototype.defil = function(boutons){
				var boutons = document.getElementById(boutons).getElementsByTagName('input');
				if(this.defilement){
					clearInterval(this.defilement);
					this.defilement = false;
					boutons[1].value = 'Défilement automatique';
				}
				else{
					this.change(true);
					var that = this;
					this.defilement = setInterval(function(){that.change(true);},2000);
					boutons[1].value = 'Stopper le défilement';
				}
				boutons[0].disabled = !boutons[0].disabled;
				boutons[2].disabled = !boutons[2].disabled;
			}
		</script>
	</head>
	<body onload="window.monFondu_1 = new Fondu('images1');window.monFondu_2 = new Fondu('images2');">
		<h1>Galerie avec effet de fondu</h1>
        <div class="content">
		<div class="container">
			<img class="images1" src="http://javascript.developpez.com/demos/fondu/img0.jpg" alt="Image" style="z-index:100" />
			<img class="images1" src="http://javascript.developpez.com/demos/fondu/img1.jpg" alt="Image" />
			<img class="images1" src="http://javascript.developpez.com/demos/fondu/img2.jpg" alt="Image" />
			<img class="images1" src="http://javascript.developpez.com/demos/fondu/img3.jpg" alt="Image" />
			<img class="images1" src="http://javascript.developpez.com/demos/fondu/img4.jpg" alt="Image" />
		</div>
		<p id="bouton_1"><input type="button" value="&lt;&lt;" onclick="monFondu_1.change(false);" /><input type="button" value="Défilement automatique" onclick="monFondu_1.defil('bouton_1')" /><input type="button" value=">>" onclick="monFondu_1.change(true);" /></p>
        </div>
 
        <div class="content">
        <div class="container">
			<img class="images2" src="http://javascript.developpez.com/demos/fondu/img0.jpg" alt="Image" style="z-index:100" />
			<img class="images2" src="http://javascript.developpez.com/demos/fondu/img1.jpg" alt="Image" />
			<img class="images2" src="http://javascript.developpez.com/demos/fondu/img2.jpg" alt="Image" />
			<img class="images2" src="http://javascript.developpez.com/demos/fondu/img3.jpg" alt="Image" />
			<img class="images2" src="http://javascript.developpez.com/demos/fondu/img4.jpg" alt="Image" />
		</div>
		<p id="bouton_2"><input type="button" value="&lt;&lt;" onclick="monFondu_2.change(false);" /><input type="button" value="Défilement automatique" onclick="monFondu_2.defil('bouton_2')" /><input type="button" value=">>" onclick="monFondu_2.change(true);" /></p>
		</div>
	</body>
</html>

[moul0ud]

salut bovino, voilà, je ne comprends pas où ni comment mettre les "new fonction ('class')..." pour charger plusieurs de cette animation. J'ai essayé plusieurs choses mais rien.
Merci à toi et à l'instigateur de ce script simple et sympa..

[Bovino]

Il suffit de regarder le code de l'exemple...
Le script est lancé avec

Code html :

<body onload="window.monFondu = new Fondu('images')">

rien ne t'empêche d'affecter plusieurs variables :

Code html :

<body onload="window.monFondu = new Fondu('images'); window.autreFondu = new Fondu('autres');">

[dragonno]

Merci Bovino pour ce code cool !

Perso j'aurais fait...

C'aurait été mieux comme...

Etc...

C'est trop facile ce genre de remarques une fois que le code a été fait.

J'ai une demande sinon au fait :

Pour info, un élément en position absolute est positionné par rapport à son parent positionné

C'est pas l'attribut "relative" dont tu parles ?
(Cela y ressemble fortement).

[Bovino]

Non : un élément en position relative est positionné par rapport à l'emplacement qu'il aurait dû avoir dans le flux.

[dragonno]

Ah oui je n'avais pas fait attention à ce mot : "positionné".

J'avais retenu que "parent".

Merci

[moul0ud]

bonjour bovino,

Je te joins le code inséré dans le <body> car ça ne marche pas et je ne comprends pas pourquoi :

Code html :

<body onload="window.monFondu_1 = new Fondu('images1');window.monFondu_2 = new Fondu('images2');window.monFondu_3 = new Fondu('images3');setInterval(function(){monFondu.change(true);},2500);">

Le script en <head> est le tien, tel qu'écrit en premier message.

Merci.