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 :
Mon code html :
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 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 css :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
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.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 }
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?
Partager