Bonjour,

Comme il est dit dans le titre, ce script n'a pas de problèmes particuliers que je n'arriverais pas à résoudre. Je le poste pour recueillir vos avis, vos suggestions, vos idées d'améliorations et/ou d'optimisation.

Il s'agit d'un diaporama d'images (comme il en existe des tas déjà tout fait surement, mais c'est formateur de faire soi-même aussi) dont voici les caractéristiques :
1/ Les images qui vont défiler se trouvent dans un dossier à part et toutes les images de ce dossier apparaitront dans le diaporama.
2/ Il n'y a pas de répétition d'une image tant que toutes les images ne sont pas apparues une fois.
3/ Les images apparaissent dans un ordre aléatoire.
4/ La transition entre deux images est de type fondu enchainé.

Commençons :

Le 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
<!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">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Diaporama aléatoire (PHP/HTML/CSS/Javascript/jQuery)</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="jqueryTimers.js"></script>
    <script type="text/javascript" src="diaporama.js"></script>
    <link rel="stylesheet" media="screen" type="text/css" href="diaporama.css" />
  </head>
  <body>
    <div id="random">
      <img src="loading.gif" class="loading" alt="loading" />
    </div>
  </body>
</html>
Rien de bien méchant, à noter quand même l'utilisation du plugin jqueryTimers.

Le CSS :
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
/* Fichier diaporama.css */
#random {
  /* Il est préférable que les images fassent la taille du conteneur */
  width:450px; height:280px;
  background-repeat:no-repeat;
  background-position:top left;
  border:20px solid #ddd;
  background-color:#ddd;
  overflow:hidden;
  text-align:center;
}
#random img {
  border:0;
  margin:0;
}
#random img.loading {
  /* pour centrer verticalement le loading.gif (32x32px) */
  margin-top:124px;
}
On place les images du diaporama dans un dossier à part, par exemple random/ et dans ce dossier on met le script PHP suivant :
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
<?php
/* Fichier random/images.php */
header('content-type: application/xml');
echo '<?xml version="1.0" encoding="utf-8" ?>';
echo '<xml>';
$dir = opendir('.');
while($f = @readdir($dir)){
  if(!is_dir($f)){
    $ext = strrchr($f,'.');
    if($ext == ".jpg" || $ext == ".png" || $ext == ".gif")
      echo '<img src="'.dirname($_SERVER["SCRIPT_NAME"]).'/'.$f.'" />';
  }
}
closedir($dir);
echo '</xml>';
Ce script va lister les images (limitées aux gif, jpg et png) du dossier dans lequel il se trouve et rendre une réponse XML de ce type :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8" ?>
<xml>
  <img src="/random/image.gif" />
  <img src="/random/picture.png" />
  <img src="/random/illustration.jpg" />
</xml>
Enfin, le gros du boulot, j'ai commenté un peu le code : le javascript/jQuery
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
/* Fichier diaporama.js */
 
// Tableau des images à afficher
var vDiapoRandImgs = new Array();
// Tableau des images déjà affichées
var vDiapoRandDisplayed = new Array();
// Durée d'apparition d'une image
var vDiapoRandDelay = 3000;// ms
// Vitesse de la transition
var vDiapoRandTransition = 500;//ms
// Nombre d'images du diaporama
var vDiapoRandLength = 0;
// Nombre d'images chargées
var vDiapoRandLoaded = 0;
 
$(function(){
  $.ajax({
    type: "GET",
    url: "random/images.php",
    dataType: "xml",
    success: function(xml){
      vDiapoRandLength = $(xml).find('img').length;
      $(xml).find('img').each(function(){
        vDiapoRandImgs.push(new Image());
        vDiapoRandImgs[vDiapoRandImgs.length-1].onload = function(){
          vDiapoRandLoaded += 1;
          if(vDiapoRandLoaded == vDiapoRandLength) {
            // Disparition du loading.gif
            $('#random img').fadeOut(vDiapoRandTransition, function(){
              $('#random img').removeClass('loading');
              // Tirage aléatoire de la première image
              $('#random img').attr('src', getRandomImg());
              // Apparition de la première image
              randFadeIn();
            });
          }
        }
        vDiapoRandImgs[vDiapoRandImgs.length-1].src = $(this).attr('src');
      });
    }
  });
});
 
// Tirage aléatoire d'une image
function getRandomImg() {
  var i_img = 0;
  // Si toutes les images sont passées
  if(vDiapoRandImgs.length == 0) {
    vDiapoRandImgs = vDiapoRandDisplayed;
    vDiapoRandDisplayed = new Array();
    // Tirage aléatoire d'une image, en évitant la dernière qui est en cours
    i_img = Math.floor(Math.random()*vDiapoRandImgs.length-1);
  }
  else
    i_img = Math.floor(Math.random()*vDiapoRandImgs.length);
  var img = vDiapoRandImgs[i_img];
  vDiapoRandDisplayed.push(img);
  vDiapoRandImgs.splice(i_img, 1);
  return img.src;
}
 
// Disparition de l'image <img> puis changement de son attribut src
function randFadeOut() {
  $('#random img').fadeOut(vDiapoRandTransition, function(){
    $('#random img').attr('src', getRandomImg());
    $('#random').oneTime(vDiapoRandDelay, randFadeIn);
  });
}
 
// Apparition de l'image <img> puis changement du background du conteneur
function randFadeIn() {
  $('#random img').fadeIn(vDiapoRandTransition, function(){
    $('#random').css('background-image', 'url(' + getRandomImg() + ')');
    $('#random').oneTime(vDiapoRandDelay, randFadeOut);
  });
}
Voilà, en espérant que vous aurez eut le courage d'aller au bout .
Parmi les améliorations que j'envisage d'apporter :
1/ En faire un plugin jQuery, je ne me suis pas encore vraiment intéressé au "Comment" mais j'aimerai beaucoup savoir en écrire un.
2/ M'affranchir du plugin jqueryTimers.
3/ Réaliser les transitions autrement qu'avec cette dualité background/contenu, tout en restant compatible IE6, cela permettrait d'inclure d'autres modes de transitions.

Voilà ! N'hésitez pas à donner votre avis