saut d'image avec fondu dans diaporama

Version imprimable

Bonjour,

J'ai trouvé et ai adapté une fonction sur internet qui permet de jouer des images façon diaporama. Au moment du changement des images, il y a un effet de fondu.

Sous IE7, aucun problème de fonctionnement mais je ne peux pas en dire autant avec FF. En effet, après avoir joué la 1ère série des 3 images, mon indice (nommé : num) est réinitialisé afin de rejouer les photos mais au moment des transitions, il y a une sorte de saut d'image.

Voici mon code

SCRIPT

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
 
 
TabImg = new Array;
 
// Nom des images jouées
TabImg[0] = 'Images/02aft.jpg'
TabImg[1] = 'Images/03aft.jpg'
TabImg[2] = 'Images/04aft.jpg'
 
num = 0;
 
function diaporama(divid, imageid, millisec) 
{ 
  var speed = Math.round(millisec / 100); 
  var timer = 0; 
 
  document.getElementById(divid).style.backgroundImage = "url(" + TabImg[num] + ")"; 
 
  changeOpac(0, imageid); 
 
  if (num>1) 
    {num=-1;}
 
  document.getElementById(imageid).src = TabImg[num+1]; 
 
  for(i = 0; i <= 100; i++) 
  { 
     setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed)); 
     timer++; 
  } 
 
  num++;
 
}
 
 
  function changeOpac(opacity, id) 
    {
      var object = document.getElementById(id).style;
      object.opacity = (opacity / 100);
      object.MozOpacity = (opacity / 100);
      object.KhtmlOpacity = (opacity / 100);
      object.filter = "alpha(opacity=" + opacity + ")";
    }
 
  //Pour rejouer le diaporama en boucle
  var timer=setInterval("diaporama('id_div','id_img',500)",4000);

et mon code HTML

Code:

1
2
3
4
5
6
7
 
 
<div  id="id_div" style="background-image: url('Images/02aft.jpg');background-repeat: no-repeat; width: 800px; height: 600px;">
 
    <img id="id_img" src="" style="width: 800px; height: 600px;background-repeat: no-repeat; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;"  />
 
</div>

Quelqu'un pourrait-il m'expliquer pourquoi à partir de la 2ème série, il y a un saut d'image avec FF alors que sous IE il n'y a rien ?

Merci beaucoup.

01/02/2008, 20h56
hellspawn_ludo

Personne n'a idée du pourquoi que ça ne fonctionne pas sur Firefox ?

Merci.

Un diaporama tout simple :

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
 
<script language="javascript">
var imagesTodisplay = new Array();
imagesTodisplay[0] = "monimage1.jpg"; // TOUJOURS COMMENCER PAR imagesTodisplay[0]
imagesTodisplay[1] = "monimage2.jpg";
imagesTodisplay[2] = "monimage3.jpg";
imagesTodisplay[3] = "monimage4.jpg";
// ET AINSI DE SUITE
imageWidth = 500;
imageHeight = 500;
changeSpeed = 50; // CHANGE SPEED : MIN = 10, MAX = 300
imageStay = 5;    // IMAGE STAYS AT 100% DURING x SECONDS
diaporama = new Object();
counter = 0;
diaporama.initialize = function() {
document.write("<img src='"+imagesTodisplay[0]+"' id='diapimage' style='width: "+imageWidth+"px; height: "+imageHeight+"px; filter: alpha(opacity=0); opacity: 0' />");
diaporama.addOpacity();
}
diaporama.addOpacity = function() {
document.getElementById('diapimage').filters.alpha.opacity+=changeSpeed/10;
 
if(document.getElementById('diapimage').filters.alpha.opacity==100) {
setTimeout("diaporama.decreaseOpacity()",imageStay*1000);
} else {
setTimeout("diaporama.addOpacity()",50);
}
}
diaporama.decreaseOpacity = function() {
document.getElementById('diapimage').filters.alpha.opacity-=changeSpeed/10;
 
if(document.getElementById('diapimage').filters.alpha.opacity==0) {
counter++;
diaporama.changeImage();
} else {
setTimeout("diaporama.decreaseOpacity()",50);
}
}
diaporama.changeImage = function() {
if(counter==imagesTodisplay.length) {
counter = 0;
document.getElementById('diapimage').src = imagesTodisplay[counter];
} else {
document.getElementById('diapimage').src = imagesTodisplay[counter];
}
diaporama.addOpacity()
}
diaporama.initialize();
</script>

01/02/2008, 21h51
hellspawn_ludo

Merci à toi sachav pour ta réponse.

J'avais vu que tu l'avais posté aussi sur un autre post.

Je teste ton code dès que je rentre du boulot. Toutefois, ça fonctionne aussi bien en IE7 qu'en FF ?

A tout hasard, tu ne saurais pas pourquoi mon code ne fonctionne pas ?
01/02/2008, 22h24
sachav

Essayez un alert() sur le object.opacity, pour voir si vous obtenez bien une valeur du genre 0.4...
02/02/2008, 14h52
hellspawn_ludo

Sachav,

J'ai essayé votre code et il fonctionne impeccablement sur IE7 mais ne fonctionne pas du tout sur Firefox. 8O
J'ai même modifié les .filters.alpha.opacity en .opacity mais rien n'a faire. La page reste blanche.

Pour info, j'ai regardé mon code avec alert("valeur opacité : " + object.opacity) et j'obtiens bien des valeurs décimales.

C'est tout de même incroyable de voir que ça fonctionne sur un navigateur mais pas sur l'autre. Au moins, si ça avait planté sur les 2, j'aurai sû que mon code était à revoir mais là, plus je le regarde et plus je me dis qu'il est bon.
D'autant plus que c'est au moment ou le diaporama est joué pour la 2ème fois que ça déconne. La 1ère série est nickel à l'affichage.

Auriez-vous une autre idée ?

Merci de votre aide.
03/02/2008, 00h01
sachav

Avez vous essaye avec document.getElementById('diapimage').style.MozOpacity ?

Oui, j'ai essayé puisque la gestion de l'opacité est stockée dans la fonction
Code:

1 2 3 4 5 6 7 8 9 function changeOpac(opacity, id) { var object = document.getElementById(id).style; object.opacity = (opacity / 100); object.MozOpacity = (opacity / 100); object.KhtmlOpacity = (opacity / 100); object.filter = "alpha(opacity=" + opacity + ")"; }
Si je ne mets pas mon diaporama en boucle, ça fonctionne. Mais justement je dois le faire se rejouer d'où le

Code:

if (num>1) {num=-1;}

Sauriez-vous comment je pourrais faire pour lire le contenu background-image de mon div ? Genre :

Code:

document.write(document.getElementById(boite_diapo).style.backgroundImage)

Je ne sais pas comment faire.

Merci.

Et bien, j'ai trouvé. Apparemment, FF n'apprécie pas le fait d'avoir une img dans le div.

Il faut donc modifier la balise qui dérange en la remplaçant par une div :

SCRIPT

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
 
        // Déclaration et initialisation des variables 
 
        var tab_img = new Array;    //tableau contenant les images
        var num=0;                  //numéro de l'image jouée
 
        //Images stockées dans le tableau       
	tab_img[0] = 'Image1.jpg'
        tab_img[1] = 'Image2.jpg'
        tab_img[2] = 'Image3.jpg'
        tab_img[3] = 'Image4.jpg'
 
 
        //Ajout d'un compte à rebours afin de jouer le diaporama
        var timer_diapo=setInterval("diaporama('boite_diapo','img_diapo',500)",4000);
 
        /* Explication des paramètres 
 
        'boite_diapo' : identifiant de la boite du diaporama. NE PAS MODIFIER
        'img_diapo'   : identifiant de l'image contenu dans la boite diaporama. NE PAS MODIFIER.
        500           : temps (en milliseconde) de l'effet fondu entre 2 images. 1 seconde = 1000 millisecondes.
        7000          : interval de temps entre 2 images. 1 seconde = 1000 millisecondes.
        
        */
 
        //Fonction qui permet de jouer le diaporama
        function diaporama(divid, imageid, millisec) 
        { 
            var speed = Math.round(millisec / 100); 
            var timer = 0; 
 
            document.getElementById(divid).style.backgroundImage = "url(" + tab_img[num] + ")"; 
 
            changeOpac(0, imageid); 
 
            if (num>(tab_img.length-2))
            {num = -1;}
 
		document.getElementById(imageid).style.backgroundImage = "url(" + tab_img[num+1] + ")"; 
 
           for(i = 0; i <= 100; i++)
           { 
                setTimeout("changeOpac(" + i + ",'" + imageid+ "')",(timer * speed)); 
                timer++; 
           } 
 
 
          num++;
 
        }
 
 
 
        //Fonction qui attribue l'opacité à l'objet "image_diapo"
        function changeOpac(opacity, id) 
        {
            var object = document.getElementById(id).style;
            object.opacity = (opacity / 100);
            object.MozOpacity = (opacity / 100);
            object.KhtmlOpacity = (opacity / 100);
            object.filter = "alpha(opacity=" + opacity + ")";
        }

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
        /* BOITE DU DIAPORAMA */
        #boite_diapo {      position:absolute;
                            width:333px;
                            height:250px;
                            top:50px;
                            left:33px;
                            background-color:none;
                            background-image:url(Image1.jpg);} /* IL FAUT IMPERATIVEMENT QUE LE NOM DE L'IMAGE SOIT IDENTIQUE A CELUI DANS LE SCRIPT : tab_img[0]
                            
        /* image dans la boite du diaporama */                            
        #img_diapo  {       width:333px;
                            height:250px;
                            filter: alpha(opacity=0);   /* fondu pour internet explorer */
                            -moz-opacity:0;             /* fondu pour mozilla, phoenix, firebird, firefox*/
                            opacity:0;                  /* fondu pour mozilla firefox */
                            -khtml-opacity:0.5;         /* fondu pour konqueror et safari */
                            background-color:none;}

HTML

Code:

1
2
3
4
5
 
 
 <div id="boite_diapo">
        <div id="img_diapo"></div>
    </div>

Merci pour ton aide sachav. ;)

09/01/2010, 23h07
xavman33

Image dupliquée

Ludo,

Ton code me plait bien cependant j'ai les images qui se superposent à cause des 2 <div id="boite_diapo"><div id="img_diapo">

J'arrive pas à les regrouper en 1 seule ?
11/01/2010, 09h21
le_chomeur

et quelque chose dans ce genre :

http://entreamis69.free.fr/demo/