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
Avec cella on a un Jquery.js
On a un diaporama.js
Et un image.php qui se trouve dans le dossier des images
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’orthographe qui ont dû rester sur le post
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:
<!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
Code:
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); } });Code:
/* 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
/* 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’orthographe qui ont dû rester sur le post
Aucun commentaire:
Enregistrer un commentaire