Discussion :

[Bovino]

Suite à cette discussion, je me suis amusé à réaliser un script assez simple de fondu enchainé.

Le fonctionnement est plutôt simple (enfin... je pense) : vous positionnez vos images les unes par-dessus les autres (dans l'exemple, en les positionnant en absolute) et vous lancez le script en passant en paramètre le nom de classe CSS des élément à enchainer.
Ensuite, le script modifie les propriétés z-index et d'opacité pour réaliser l'effet.

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
var Fondu = function(classe_img){
	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){
	if(this.encours){
		return false;
	}
	var prevObj = this.collection[this.courant];
	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);
}

Exemple en ligne

Je pense que beaucoup de choses peuvent être améliorées, mais j'avoue l'avoir codé assez rapidement, donc n'hésitez pas à proposer vos améliorations

[hornetbzz]

Un autre, en moins bien, sauf peut-être le timeout non [EDIT] constant ... :
La transition est probablement moins fluide dans mon cas car je n'ai pas pensé à employer les z-index.
Mais bon, c'est quand même le principe qu'utilise JQuery.

testé sous FF3, Google Chrome et IE8

HTML: on commence avec une première image dans la balise <img>

Code :

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

<img id="banniere" src="images/banniere1.png" alt="banniere" title="mon site de noob" style="-moz-opacity:100%; filter:alpha(opacity=100);" />'

JS

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
// ******************************************************
// Variables globales, Init
// ******************************************************
var b = new Array();
	b[0] = new Image(); b[0].src = "images/banniere1.png";
	b[1] = new Image(); b[1].src = "images/banniere2.png";
	b[2] = new Image(); b[2].src = "images/banniere3.png";
	b[3] = new Image(); b[3].src = "images/banniere4.png";
	b[4] = new Image(); b[4].src = "images/banniere5.png";
	b[5] = new Image(); b[5].src = "images/banniere6.png";
	b[6] = new Image(); b[6].src = "images/banniere7.png";
// Je sais j'aurais pu me fendre d'une boucle mais au départ je n'avais que 2 images

// On démarre sur l'image 0 puis au bout du premier timeout, on passe sur l'image 1
	var pic_number = 1;

// Changement d'image toutes les n secondes
	var pic_delay = 6000;


// ******************************************************
function $(id) {
// ******************************************************
var $ = document.getElementById(id);

$.fadeIn = function(delay,callbk,out) {
    var _this = this;
    for (i = 1; i <= 100; i++) {
      (function(j) {
            setTimeout(function()
			{  
                  if (out == true) j=100-j;
                  _this.style.opacity = j/100; // IE
                  _this.style.MozOpacity = j/100; // FF
                  _this.style.KhtmlOpacity = j/100; // Konq
                  _this.style.display="block"; 
                   if (j == 100 && callbk != undefined) {callbk.call(_this);}
                   else if (out == true && callbk != undefined && j == 0) {callbk.call(_this);}
                  _this.style.filter = "alpha(opacity=" + j + ");";	
			}, j*delay/100); // non linéaire
                 
        })(i);     
    }
};

$.fadeOut = function(delay,callbk) {
    $.fadeIn(delay,callbk,true);
};

return $;
}
	
// ******************************************************
function animation()
// ******************************************************
 {
	// Cas de n images alternatives contenues dans le tableau b
		if (pic_number > b.length - 1 ) pic_number = 0;

	// Récupère les infos de l'image en cours dans la balise <img> avec id = banniere
		var img_encours = document.getElementById("banniere");
		
	// Fade Out
		$("banniere").fadeOut(1000);

	// Attribution de la nouvelle source (affichage de la nouvelle image)
		img_encours.setAttribute("src", b[pic_number].src);
	
	// Fade In
		$("banniere").fadeIn(1000);

	// on passe à l'indice d'image suivante
		pic_number++;
	
	// Intervalle de n secondes entre chaque image
		window.setTimeout("animation()", pic_delay);
 }
 
 // Démarrage de l'animation au bout de n secondes
		window.setTimeout("animation()", pic_delay);

[kimjoa]

salut bovino, script simple et efficace !!

Petite remarque quand même, l'utilisation de la class pour sélectionner les images pourrais être remplacé par une récupération des éléments enfant images d'un conteneur. -10 lignes

Code :

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

var prevObj = this.collection[this.courant];

A mettre après tous les return

Perso j'aurais fait 2 fonction next et previous et mit en privé une 3ème pour le traitement, rendant le tout plus simple l'utilisation.

Y'a aussi le problème de ie qui connait pas le style opacity !

Sinon hornetbzz, plusieurs chose me choque un peu dans ton script. Tu change la propriété src de l'image, mais tu ne prévoit aucun loader d'image (au début du script ces images ne seront pas chargé)
Puis t'es transitions linaires pause un problème. Tu lance un setimeout en espace de temps variables, ce qui est pas optimisé... rendre 150 frames par seconde sert a rien (sauf accélérer la transition) , il aurait mieux fallut utiliser un setInterval , et gérer l'accélération en fonction du temps passé et restant.
De plus le gros problème de ta solution et que tu dé-enregistre pas les setTimeout, même à un un interval de 0, ceux-ci continue d'être exécute.
Dommage, tes idées sont original, mais pas adapté.

bye

[hornetbzz]

Le code n'est probablement pas au top car c'est du conglomérat de différentes époques, entre super noob et le noob actuel. Mais mon script fonctionne bien.

tu ne prévoit aucun loader d'image (au début du script ces images ne seront pas chargé)

euh, si, il y a la balise html en base dans le code, puis l'alternance des images est lancée ensuite :

Code :

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

1
2
// Démarrage de l'animation au bout de n secondes
		window.setTimeout("animation()", pic_delay);

De plus le gros problème de ta solution et que tu dé-enregistre pas les setTimeout, même à un un interval de 0, ceux-ci continue d'être exécute.

Là par contre ça m'intéresse, pourrais-tu peux préciser stp .. ?

[kimjoa]

ok concernant les img, c'est vrai , mais elle sont déclarer a l'extérieur de ton script, c'est donc a l'utilisateur de le faire "manuellement", en html ou js. Hors en html si on utilise un domContentLoaded sur le document, les imgs ne seront pas charger lors de l'exécution du script. De même en js, le chargement ce fait de manière asynchrone, faudrait en faite vérifié a chaque fin de chargement des imgs si elle le sont toutes et lancer le script si oui.... Mais bon autant faire une autre source pour ca

Pour le timeout je me suis aussi planté , j'ai écrit en speed, j'était pas chez moi , sans mon éditeur favorie dsl

Tu dit que ton timeout est non lineaire, tu entends koi par là ?

Penses pas me tromper cette fois ! mais tu déclares autant de timeout que de frame, passer par un setinterval consommera bcp moin de ressource.

bye

[hornetbzz]

Ok, tu as aussi dû oublier le correcteur d'orthographe et tes lunettes

Le timeout linéaire (fonction affine de j) est en gras dans le source : j*delay/100

[Bovino]

salut bovino, script simple et efficace !!

Merci

Petite remarque quand même, l'utilisation de la class pour sélectionner les images pourrais être remplacé par une récupération des éléments enfant images d'un conteneur. -10 lignes

Oui, j'y avait pensé, mais finalement, je me suis dit que cette façon de procéder, bien que demandant plus de traitements était peut-être préférable, cela permet de placer les éléments n'importe où dans le code et d'utiliser cette classe CSS pour les positionner.

Code :

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

var prevObj = this.collection[this.courant];

A mettre après tous les return

Bien vu, c'est corrigé

Perso j'aurais fait 2 fonction next et previous et mit en privé une 3ème pour le traitement, rendant le tout plus simple l'utilisation.

Oui, effectivement, ce serait probablement plus adapté...

Y'a aussi le problème de ie qui connait pas le style opacity !

C'est bien pour cela que je différencie la propriété opaque en fonction de IE

Code :

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

1
2
3
4
5
6
7
if(tmp[j].filters){
	tmp[j].opaque = tmp[j].filters[0];
	this.coeff = 1;
}
else{
	tmp[j].opaque = tmp[j].style;
}

et dans tous les cas, opaque possède bien une propriété opacity

[kimjoa]

C'est bien pour cela que je différencie la propriété opaque en fonction de IE
Code :

if(tmp[j].filters){
tmp[j].opaque = tmp[j].filters[0];
this.coeff = 1;
}
else{
tmp[j].opaque = tmp[j].style;
}

et dans tous les cas, opaque possède bien une propriété opacity

Ha ok ! Intéressant ta façon de procéder, je là met de coté pour plus tard !

[Auteur]

Il ne reste plus à combiner ce script avec le script du miroir

[Malanico]

Bonjour,

je voudrais utiliser le script de Bovino plusieurs fois (9) sur une même page avec 9 séries de photos...

Est ce possible ?

Merci d'avance de votre aide !

[Bovino]

Bonjour,

je voudrais utiliser le script de Bovino plusieurs fois (9) sur une même page avec 9 séries de photos...

Est ce possible ?

Merci d'avance de votre aide !

vous lancez le script en passant en paramètre le nom de classe CSS des élément à enchainer.

Oui, il suffit de lancer le script avec des noms de classes différents

Code :

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

1
2
3
4
new Fondu('classe_1');
new Fondu('classe_2');
...
new Fondu('classe_n')

[vodiem]

merci Bovino

je n'ai pas regardé le code de plus près.
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.
je craignais de voir le chargement des images comme dans la démo mais ca va.
pas de soucis particulier, simple d'utilisation : merci.

[Bovino]

merci Bovino

Merci

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.

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 :

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

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

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

avec un tableau dans lequel une première image

Code html :

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

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

Puis :

Code html :

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

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

[Invité]

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 :

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

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

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

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

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

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

Code html :

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

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

[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