Afficher un tableau en javascript via des données recuperer en php

Bonjour à toutes et tous, je suis entrain d'essayer de me faire une galerie photo via des répertoires.

En effet, j'ai des photos stockées dans 2 répertoires bien distincts l'un ayant pour nomination thumbs ( accueillant les photos miniatures ) et l'autre ayant pour nom slides (accueillant les photos tailles réelles).
Je me sert donc de php pour scanner le répertoire et sous répertoires pour ainsi afficher mes miniatures.
Lorsque je clique sur une de mes miniatures, la photo s'affiche à droite ( via java script ).
Mon souci étant, lorsque j'ai beaucoup de photos, si je cliques sur une qui se situe en bas de page, alors il faut remonté en haut pour la visionner.
Je cherche donc une solution pour couper mon tableau en plusieurs morceaux, et ainsi mettre des liens dessous.
Lorsque je voudrais cliquer sur le lien 2 ( par exemple ), eh bien les données du tableau 2 devraient se charger, en effacant le tableau 1.
Mais tout ceci devient compliqué avec mes whiles, opendir, readdir ....
Je me tourne donc vers vous pour me guider dans ma requete.
Je vous montre donc ce que j'ai pour le moment "codé" :

a écrit :

<style type="text/css">

ul#galerie_mini
{

list-style-type: none ;
}
dt{
color:#E45000;
}

</style>
<script type="text/javascript">
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
big_photo.src =('images/logo2008.jpg');// chargement par defaut de notre logo
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale

for(var i = 0 ; i < liens.length ; i++)
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
{
liens.onclick = function()
// Au clique sur ces liens
{
big_photo.src = this.href ; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.alt = this.title ; // On change son titre
titre_photo.firstChild.nodeValue = this.title ; // On change le texte de titre de la photo
return false ; // Et pour finir on inhibe l'action réelle du lien
}
}
}

window.onload = displayPics ;
</script>
<?
if (empty($session)){
?><img src="../images/photo.jpg" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="circle" coords="414,122,112" href="index.php?page=media&session=2008" />
<area shape="circle" coords="159,353,85" href="index.php?page=media&session=2007" />
<area shape="circle" coords="415,360,87" href="index.php?page=media&session=2006" />
<area shape="circle" coords="681,358,88" href="index.php?page=media&session=2005" />
</map>
<?
}else{
//$dir="./photos-videos/$session";
$dir="./photos-videos/$session";
if (is_dir($dir)){//cherche le repertoire de l'annee

/*$ouverture=opendir($dir);
while (false !== ($sousrepertoire = readdir($ouverture))) {
if ($sousrepertoire!= "." && $sousrepertoire!= ".." && !ereg('thumbs',$sousrepertoire) && !ereg('slides',$sousrepertoire)) {// supression de repertoires à la con
echo "<h1><a href=\"index.php?page=media&session=$session/$sousrepertoire";
$souscat="$dir/$sousrepertoire";
$souscat=opendir($souscat);
while (false !== ($thumbs = readdir($souscat))){
if ($thumbs!="." && $thumbs!=".." && !ereg('thumbs',$thumbs) && !ereg('slides',$thumbs) && !ereg('res',$thumbs) && !ereg('jpg|JPG',$thumbs)&& !ereg('html|HTML',$thumbs)){// supression de repertoires à la con
echo "/$thumbs\">$sousrepertoire $thumbs</a></h1><br/> ";
}
if (ereg("thumbs|slides",$thumbs)){
echo "\">$sousrepertoire </a></h1>";
}
}
}// fin du de la gestion repertoire
}// fin de l'ouverture des dossiers*/

$thumbs="$dir/thumbs";
//echo "<h2>$thumbs</h2>";
$thumbs1=$thumbs;
if (is_dir($thumbs)){
$thumbs=opendir($thumbs);
echo "<div id=\"galerie\"><ul id='galerie_mini'><table width='800' border='0'>
<tr>
<td valign='top' width='290'>
<table id='tab' border='0' >
<tr>";
$photomax=5;
$nbphoto=0;
$numphoto=0;


while($mini=readdir($thumbs)){
if (eregi('jpg|JPG',$mini)){
if ($nbphoto==$photomax){
echo "</tr><tr>";
$nbphoto=0;
}
//<img src='.$dir/$mini'/>
$mini=eregi_replace("é","%e9",$mini) ;
$mini=eregi_replace(" ","%20",$mini) ;
echo "<td align='left'><a href=\"$dir/slides/$mini\"><img src='$thumbs1/$mini' alt=\"$mini\" width='60'></a></td>";

$nbphoto++;
}

}
echo " </tr>
</table>
</td>
<td valign='top' align='center'></ul><dl id=\"photo\"><dt>Cliquez sur une photo de gauche pour l'afficher<br></dt><br><dd><img width='420' id=\"big_pict\" src=\"$dir/slides/$mini\" alt=\"$mini\"/><dd></dl></td>
</tr>
</table></div>";
}else{
$ouverture=opendir($dir);
while (false !== ($sousrepertoire = readdir($ouverture))) {
if ($sousrepertoire!= "." && $sousrepertoire!= ".." && !ereg('thumbs',$sousrepertoire) && !ereg('slides',$sousrepertoire)) {// supression de repertoires à la con
// echo "<h1><a href=\"index.php?page=media&session=$session/$sousrepertoire";
$souscat="$dir/$sousrepertoire";
$souscat=opendir($souscat);
while (false !== ($thumbs = readdir($souscat))){
if ($thumbs!="." && $thumbs!=".." && !ereg('thumbs',$thumbs) && !ereg('slides',$thumbs) && !ereg('res',$thumbs) && !ereg('jpg|JPG',$thumbs)&& !ereg('html|HTML',$thumbs)){// supression de repertoires à la con
echo "<h1><a href=\"index.php?page=media&session=$session/$sousrepertoire/$thumbs\">$sousrepertoire $thumbs</a></h1><br/> ";
}
/* if (ereg("thumbs|slides",$thumbs)){
echo "\">$sousrepertoire </a></h1>";
}*/
}
}// fin du de la gestion repertoire
}// fin de l'ouverture des dossiers
echo "Cliquez sur les liens pour afficher vos photos.";
}
}else{
echo "<p id=\"p1\">$session Vous avez fait une erreur dans l'url</p>";
}
}
?>

Je vous remercie par avance.