Forum > XHTML / CSS > Problème d'affichage d'une galerie photo

Problème d'affichage d'une galerie photo

ok Le problème posé sur ce sujet a été résolu.
avatar de stc
Membre
# Le 26/07/2009 à 18h22
Salut j'ai codé une galerie de photo avec un scrolling horizontal, mais quand on la lance seule la première photo s'affiche. Après si on relance là ça marche:
Voici le code:
Code:
<div class="prev" onmousedown="scroll_left()"></div>
<div class="gallery_1">
<div class="photos" id="photos">
<?php
$sql="SELECT id_photo,extension FROM table_galery_2 ORDER BY timestamp ASC";
$db->query($sql);
$div="";
$i=0;
while($row=$db->fetch_array())
{
?>
<div id="photo_<?php echo $i; ?>">
<img src="GALERY_2/photo_<?php echo $row['id_photo']; ?>.<?php echo $row['extension']; ?>" height="135" width="auto" />
</div>
<?php
$i++;
}
?>
</div>
</div>
<div class="next" onmousedown="scroll_right()"></div>


Ainsi que le CSS:
Code:
div.content div.prev {
	background-image: url('../GFXs/fleche_gauche_1.jpg');
	width: 70px;
	height: 135px;	
	float:left;
	margin-right: 10px;
	cursor: pointer;
}
div.content div.next {
	background-image: url('../GFXs/fleche_droite_1.jpg');
	width: 70px;
	height: 135px;	
	float:left;
	margin-left: 10px;
	cursor: pointer;
}
div.content div.gallery_1 {
	width: 800px;
	height: 135px;
	overflow: hidden;
	float: left;
	margin: auto;
}
div.content div.gallery_1 div.photos {
	height: 135px;
	width: auto;
	position: relative;
	left: 0px;
}
div.content div.gallery_1 div.photos div {
	float: left;
	width: auto;
	height: 135px;
	margin-right: 5px;
	margin-left: 5px;
}

Voila je comprend pas le problème même quand ça s'affiche pas si on regarde la source il y a bien les balises img donc ce n'est pas un problème de PHP, je crois que ça vient du CSS.
Merci tchao
avatar de stc
Membre
# Le 26/07/2009 à 22h39
Bah en fait j'ai trouvé la solution a mon problème, plus loin dans la page je calculais la largeur de la galerie virtuelle en javascript (car le nombre de photo peut être variable et leur largeur aussi) et les images n'avaient pas le temps de charger, donc là je calcul la largeur dans une fonction que je lance après le chargement de la page (<body onload="...">).
Voila A++ smiley