Bonjours a tous je suis nouveau sur le forum mais aussi en code.

Donc je vous expose mon problème. J’ai recueillie sur ce forum dans un topique le code de diaporama pour l’intégrer à mon site web. Mais tout ne s’est pas passé comme je l’aurai souhaité. En effet quand je charge la page web au lieu d’afficher 16 diaporama des même image mais avec une séquence différente il m’affiche 16 fois le même se qui a tout de suite un effet moins beau =/

Voici mon code le html
Code html : 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!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" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Pwetzorz.fr</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" />
    <style>
        #random {
  width:152px; /* même hauteur que les images */
  height:90px; /* même largeur que les images */
  /* les deux en dessous sont pour éviter certains rendus que j'ai pu constater */
  background-repeat:no-repeat;
  overflow:hidden;
 
div.c1 {text-align: center}
</style>
 
</head>
 
<body>
<div  class="c1">
  <table  width="1104px" border="1">
    <tr>
      <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
    <td width="152" height="90"> <div id="random">
      <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
      </div></td>
    <td rowspan="5"><object class="testdiv2"// / type="application/x-shockwave-flash" height="450" width="800"  id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=ganseky" bgcolor="#000000">
      <param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=ganseky&auto_play=true&start_volume=25" /></td>
      <td width="152" height="90"> <div id="random">
        <img heigth="90" width="152" src="loading.gif" class="loading2" alt="loading" />
      </div></td>
      </tr>
      <tr>
        <td width="152" height="90"> <div id="random">
          <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
        </div></td>
        <td width="152" height="90"> <div id="random">
          <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
        </div></td>
      </tr>
      <tr>
        <td width="152" height="90"> <div id="random">
          <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
        </div></td>
        <td width="152" height="90"> <div id="random">
          <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
        </div></td>
      </tr>
      <tr>
        <td width="152" height="90"> <div id="random">
          <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
        </div></td>
        <td width="152" height="90"> <div id="random">
          <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
        </div></td>
      </tr>
      <tr>
        <td width="152" height="90"> <div id="random">
          <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
        </div></td>
        <td width="152" height="90"> <div id="random">
          <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
        </div></td>
      </tr>
      <tr>
        <td colspan="3">&nbsp;</td>
      </tr>
      <tr>
        <td width="152" height="90"> <div id="random">
          <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
        </div></td>
      <td rowspan="3"></object>
  <iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=ganseky&amp;popout_chat=true" class="testdiv" height="450" width="800"  ></iframe></td>
    <td width="152" height="90"> <div id="random">
      <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
      </div></td>
      </tr>
    <tr>
      <td width="152" height="90"> <div id="random">
        <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
      </div></td>
      <td width="152" height="90"> <div id="random">
        <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
      </div></td>
    </tr>
    <tr>
      <td width="152" height="90"> <div id="random">
        <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
      </div></td>
      <td width="152" height="90"> <div id="random">
        <img heigth="90" width="152" src="loading.gif" class="loading" alt="loading" />
     </td>
    </tr>
  </table>
</div>
</body>
</html>

Avec cella on a un Jquery.js

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
jQuery.fn.extend({ everyTime: function(interval, label, fn, times, belay) { return this.each(function() 
{ jQuery.timer.add(this, interval, label, fn, times, belay); }
); }
, oneTime: function(interval, label, fn) { return this.each(function() 
{ jQuery.timer.add(this, interval, label, fn, 1); }); }, stopTime: function(label, fn) 
{ return this.each(function() { jQuery.timer.remove(this, label, fn); 
}); } }); jQuery.extend({ timer: { guid: 1, global: {}, regex: /^([0-9]+)\s*(.*s)?$/, 
powers: 
{ 'ms': 1, 'cs': 10, 'ds': 100, 's': 1000, 'das': 10000, 'hs': 100000, 'ks': 1000000 }, timeParse: function(value) { if (value == undefined || value == null) return null; var result = this.regex.exec(jQuery.trim(value.toString())); if (result[2]) { var num = parseInt(result[1], 10); var mult = this.powers[result[2]] || 1; return num * mult; } else { return value; } }, add: function(element, interval, label, fn, times, belay) { var counter = 0; if (jQuery.isFunction(label)) { if (!times) times = fn; fn = label; label = interval; } interval = jQuery.timer.timeParse(interval); if (typeof interval != 'number' || isNaN(interval) || interval <= 0) return; if (times && times.constructor != Number) { belay = !!times; times = 0; } times = times || 0; belay = belay || false; if (!element.$timers) element.$timers = {}; if (!element.$timers[label]) element.$timers[label] = {}; fn.$timerID = fn.$timerID || this.guid++; var handler = function() { if (belay && this.inProgress) return; this.inProgress = true; if ((++counter > times && times !== 0) || fn.call(element, counter) === false) jQuery.timer.remove(element, label, fn); this.inProgress = false; }; handler.$timerID = fn.$timerID; if (!element.$timers[label][fn.$timerID]) element.$timers[label][fn.$timerID] = window.setInterval(handler,interval); if ( !this.global[label] ) this.global[label] = []; this.global[label].push( element ); }, remove: function(element, label, fn) { var timers = element.$timers, ret; if ( timers ) { if (!label) { for ( label in timers ) this.remove(element, label, fn); } else if ( timers[label] ) { if ( fn ) { if ( fn.$timerID ) { window.clearInterval(timers[label][fn.$timerID]); delete timers[label][fn.$timerID]; } } else { for ( var fn in timers[label] ) { window.clearInterval(timers[label][fn]); delete timers[label][fn]; } } for ( ret in timers[label] ) break; if ( !ret ) { ret = null; delete timers[label]; } } for ( ret in timers ) break; if ( !ret ) element.$timers = null; } } } }); if (jQuery.browser.msie) jQuery(window).one("unload", function() { var global = jQuery.timer.global; for ( var label in global ) { var els = global[label], i = els.length; while ( --i ) jQuery.timer.remove(els[i], label); } });
On a un diaporama.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
/* 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: "diapo/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);
  });
}
Et un image.php qui se trouve dans le dossier des images

Code php : 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>';

Voilà voilà je pense avoir mis que l’on peut avoir besoin pour comprendre et m’aider sur le problème. Dans l’espérance d'une réponse bon code a vous ^^
Ganseky
et je m’excuse des fautes d’orthographes qui ont dû rester sur le post