11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je suis actuellement en train de faire une galerie d'image. J'aimerai qu'a l'ouverture de ma page, les images se charge une à une avec une fade in de plus en plus lent. Voici mon script


<script type="text/javascript">
	$(document).ready(function(){
		var delais = 800;
		$(".thumb").each(function(){
			$(this).load(function() {
				$(this).delay(delais).fadeIn(800);
				delais = delais + 300;
			});
		});
	});	
</script>


Et ma galerie d'image

<?php
foreach($lignes as $num_ligne => $ligne){
	echo "<div id='ligne_".$num_ligne."' class='ligne_vignette'>";
	
	foreach($ligne['photos'] as $photo => $width){
		//var_dump($photo);
		echo "<div id='thumb_".$photo."' class='thumbloc' style='width:".$width."px;height:".$height_thumb."'>";
			echo "<a href='#'><img src='".phpThumb_url($photo,$width,$height_thumb)."' height='".$height_thumb."' class='thumb'></a>";
			echo "<div id='bloctxt_".$photo."' class='txt_thumb'><span>Aidez Cédric à retrouver ce TeeShirt</span></div>";
		echo "</div>";
	}
	
	echo "</div>";
}
?>


Tout ce code fonction presque à merveille, car les images ne se charge pas dans l'ordre Smiley decu

En effet, la première à s'afficher est généralement la 4ème, ensuite la 2ème, etc...Bref j'aimerai savoir comment forcer l'affichage de mes images dans l'ordre.

Merci pour votre aide Smiley biggrin
Cédric