Gallerie photos javascript avec miniatures

Bonjour

J'ai créé un genre de gallerie photos en javascript pour un site.

En gros on a deux colonnes d'images miniatures qui sont mises dans un tableau à l'aide de ce code javascript

Voici ma gallerie ICI

function menuVignettes() 
{
	var i;
	
	for (i = 1 ; i < 6 ; i++) 
	{
		url = "photos/soundstation/miniatures/" + i + ".jpg" ; 
		document.write("<tr><td><img src='" + url + "' onclick='changePhoto(" + i  + ")' /></td></tr>") ;
	}
	
}

function changePhoto(n) 
{
	document.grandePhoto.src = "photos/soundstation/normales/" + n + ".jpg" ;
}

et dans ma page html j'ai ceci

<table width="60" height="300" border="0" align="left">
<tr>
				
<script type="text/javascript">

menuVignettes() ;

</script>
				
</tr>
</table>

Alors le problème c'est que je dois faire une nouvelle colonne de miniatures toutes les 5 images (sinon ca descend trop bas dans ma page)

Je suis parvenu à faire ce qu'il fallait mais je doute fort que se soit fort pratique et je suis sur qu'il y a plus simple et meilleur comme codage.

Si quelqu'un pouvait m'aider à améliorer cela ce serait sympa

Sinon la suite de mon code donne ça

JAVA (une deuxieme fonction qui est la même que la première mais porte un autre nom "menuVignettes2" et dont la valeur de mon "i" est 6 cette fois ci pour passer aux photos suivantes miniatures)

function menuVignettes2() 
{
	var i;
	
	for (i = 6 ; i < 11 ; i++) 
	{
		url = "photos/soundstation/miniatures/" + i + ".jpg" ; 
		document.write("<tr><td><img src='" + url + "' onclick='changePhoto(" + i  + ")' /></td></tr>") ;
	}
	
}

et voici mon code html suite (qui est le même code que mon premier tableau html mais c'est un deuxieme qui viendra se coller comme une colonne au premier tableau qui contient ma première colonne de miniatures photos de 1 à 5)

 <table width="60" height="300" border="0" align="left">
<tr>
				
     <script type="text/javascript">

     menuVignettes2() ;

     </script>
							
</tr>
</table>

Et la ou ma photo grandeur normale s'affichera

<table width="600" height="300" border="0">
<tr>
<td>

<div align="center"><img name="grandePhoto" src="photos/soundstation/normales/1.jpg"/></div>

</td>
</tr>
</table>

En gros je répète une boucle et des fonctions ... Ce qui doit prendre un peu plus de temps. Et j'aimerais savoir si quelqu'un aurait une meilleure idée

Merci à vous
Modifié par donfino (10 Feb 2007 - 22:14)