Diaporama sous Mootools 1.3 [Résolu]

[Gyl59]

Bonjour à tous,

je suis en train de développez un diaporama en js avec mootools.
Ce dernier fonctionne très bien sous Firefox et Chrome, mais j'ai un soucis de compatibilité sous IE (8 et 7)

Voici mon code 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
window.addEvent('domready', function() {
 
	var showDuration = 7000;
	var container = $('diaporama');
	var images = $$('#diapo_haut img');
	var imageIndex = 0;
	var interval;
 
	images.each(function(img){
		img.set('tween', {transition: Fx.Transitions.Back.easeIn, duration: 'long'});
		images[imageIndex].tween("opacity", 1);
	});
 
	var show = function() {
		imageIndex < images.length - 1 ? imageIndex = imageIndex + 1 : imageIndex = 0;
		images.each(function(img,i){
			if(imageIndex == i){
				img.tween("opacity", 1);
			}else{
				img.tween("opacity", 0);
			}
		});
	};
    interval= show.periodical(showDuration);
 
});

Mon code html :

Code :

1
2
3
4
5
6
7
 
<div id="diapo_haut">
 <img src="images/images_diapo_haut/1.png" alt="" />
 <img src="images/images_diapo_haut/2.png" alt="" />
 <img src="images/images_diapo_haut/3.png" alt="" />
 <img src="images/images_diapo_haut/4.png" alt="" />
 <img src="images/images_diapo_haut/5.png" alt="" />				</div>

Mon code css :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#diapo_haut{
margin:55px 0 0 240px;
width:557px;
height:140px;
position:absolute;
z-index:1
}
 
#diapo_haut img{
position:absolute;
z-index:2;
opacity:0
}

En faite sous IE, ça ne fait l'effet de transition uniquement que sur les deux première images. J'ai essayé de voir si le temps entre chaque transitions était bien respecté (par le biais d'une "alert"), et cela fonctionne il enchaîne et trouve les position de chaque image.

Je ne vois pas pourquoi sachant que IE est capable d'enchaîner les transitions lors des alert, n'est pas capable d'enchaîner l'affichage de mes images.

Avez-vous une idée?

[vermine]

Bonjour,

D'abord il faudrait vérifier que ce n'est pas le z-index qui pose problème.
Ensuite, je ne comprends pas bien ceci :

Code :

1
2
3
4
5
 
images.each(function(img){
     img.set('tween', {transition: Fx.Transitions.Back.easeIn, duration: 'long'});
     images[imageIndex].tween("opacity", 1);
});

Pour chaque image, vous mettez l'opacité de la première image à 1 (c'est-à-dire cinq fois d'affilé) ?

Et je remarque sous IE que l'opacité des images ne sont pas à 0 malgré le code CSS.

Je ne m'y connais pas assez en CSS malheureusement pour affirmer quoique ce soit :

Code :

1
2
3
4
5
6
 
.ma_class{
filter:alpha(opacity=0);
opacity:0;
-moz-opacity:0;
}

[Gyl59]

Merci pour ta réponse,

effectivement, l'initialisation de la première image se fait 5 fois, une erreur qui a été maintenant corrigée. (Bien vu)

J'ai ajouté le code CSS que tu me propose et effectivement là au moins toutes les images passent avec une opacité de 0 sous IE. Cependant maintenant je n'ai plus aucune image qui s'affiche sous IE.

Je me demande si mootools gère d'une manière particulière l'opacité pour IE ou non?

Le problème persiste.

[vermine]

J'ai envie de pousser l'audace jusqu'au bout et de dire que Mootools attaque les CSS directement :

Code :

1
2
3
 
img.tween("opacity", 1);
img.tween("filter", "alpha(opacity=1)");

Mais ça me parait tiré par les cheveux. Je n'ai pas le temps de faire beaucoup de tests.

[Gyl59]

Je viens de tester en ajoutant la ligne que tu me proposé, mais dans ce cas là, mootools me génère des erreurs javascript et le script ne fonctionne plus sous aucun navigateur.

Je continue à chercher.

[vermine]

Mootools propose de gérer l'opacité avec la méthode fade :

Code :

1
2
3
 
img.fade('out'); //0
img.fade('in'); //1

Que vous pourriez, si la transition vous convient, transformer sans souci de gestion en :

Code :

img.fade('toggle'); //Si 1, passe à 0. Si 0, passe à 1.

Vous n'auriez plus qu'une seule instruction là où vous faites un if dans le each selon l'opacité de l'image en cours.

[Gyl59]

Merci bien cela fonctionne sous IE 7 et 8.

Je me permets de remettre mon code final si ça peut aider d'autres personnes par la suite.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
window.addEvent('domready', function() {
 
	/*Diaporama du haut de la page*/
	var showDuration = 7000;
	var images = $$('#diapo_haut img');
	var imageIndex = 0;
	var interval;
 
	images[imageIndex].fade("in");
	var show = function() {
		imageIndex < images.length - 1 ? imageIndex = imageIndex + 1 : imageIndex = 0;
		images.each(function(img,i){
			if(imageIndex == i){
				img.fade('in');
			}else{
				img.fade('out');
			}
		});
	};
    periodical = show.periodical(showDuration);
 
});

J'ai fait un premier fade "in" sur la première image comme ça j'ai un fondu au premier affichage.

Merci à toi Vermine pour tes conseils.