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"> </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"> </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&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
On a un diaporama.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); } });
Et un image.php qui se trouve dans le dossier des images
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); }); }
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
Partager