Slideshow begint achteraan (java&php)

[ElsyV]

Ik heb een slideshow op een pagina die altijd goed werkte. Maar omdat het zo bewerkelijk was heb ik dmv php het script aangepast zodat de foto's automatisch geplaatst worden samen met een database.

Het enige wat nu fout gaat is dat de slideshow achteraan begint. In de broncode staan alle foto's wel netjes op volgorde van 1 tot ......
Hoe kan dit?
Ik heb trouwens geen verstand van javascript.

Je kunt op deze testpagina kijken voor een voorbeeld of om de broncode te zien:
Testpagina


Fotoalbum code:

[PHP]Klik op het plaatje, dan muis op foto zetten en op de pijl klikken voor de slideshow.<br />Javascript moet ingeschakeld zijn op uw computer.
<?php
echo '<table>';
$query = "SELECT * FROM album_land ORDER BY naam";
	$result = mysql_query($query);
	if(!$result)
		{
    	trigger_error(mysql_error().' ('.$query.')');
		}
		else
			{
			while($row = mysql_fetch_assoc($result))
			{
			echo '<tr>';
			echo '<td colspan="5" class="fotoland">'.$row['naam'].'</td>';//naam van het land
			echo '</tr>';
			echo '<tr>';

			
			$querythumb = "SELECT * FROM album_thumb WHERE land_id = ".$row['id']." ORDER BY naam";
			$resultthumb = mysql_query($querythumb);
			
			if(!$resultthumb)
				{
    			trigger_error(mysql_error().' ('.$querythumb.')');
				}
				else
					{
					$querydatum = "SELECT DATE_FORMAT(datum, '%M %Y') AS reisdatum, omschrijving FROM album_thumb WHERE land_id = ".$row['id']."";
					$resultdatum = mysql_query($querydatum);
					$rowdatum = mysql_fetch_assoc($resultdatum);
						$teller = 0 ;					
						while($rowthumb = mysql_fetch_assoc($resultthumb))
						{
							if($teller > 6)
								{
						echo '<td class="fotojaar">'.$rowdatum['reisdatum'].'<br />';//jaar van het bezoek
						//laat de thumb foto zien
						?><a id="thumb<?php echo $rowthumb['slideshow']; ?>" href="<?php echo $rowthumb['groot']; ?>.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'group<?php echo $rowthumb['slideshow']; ?>' })"> <img src="<?php echo $rowthumb['klein']; ?>.jpg" alt="Klik voor het volledige formaat" border="0"
		title="Klik voor het volledige formaat" /> </a><br />
        			  <?php echo $rowthumb['omschrijving'];//omschrijving van het bezoek
							echo '</td>'.PHP_EOL;//einde div fotojaar
								}
								else
									{
									echo '</tr>';
									}
									$teller ++;
									
									
									
									
							
							
                        //omschrijving van de thumbnail foto -->
                        echo'<div class="highslide-caption"> '.$rowthumb['omschrijving'].'</div>'.PHP_EOL;
						 						
  
  						//laat alle foto's zien
						$queryfoto = "SELECT * FROM album_foto WHERE thumb_id = ".$rowthumb['id']." ORDER BY foto";
						$resultfoto = mysql_query($queryfoto);
						if(!$resultfoto)
						{
    					trigger_error(mysql_error().' ('.$queryfoto.')');
						}
						else
							{
							while($rowfoto = mysql_fetch_assoc($resultfoto))
								{
      							echo '<div class="hidden-container">';
								?> <a href="<?php echo $rowfoto['foto']; ?>.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb<?php echo $rowthumb['slideshow']; ?>', slideshowGroup: 'group<?php echo $rowthumb['slideshow']; ?>' })"></a>
								<!--omschrijving van de foto -->
                                <?php
      							echo '<div class="highslide-caption"> '.$rowfoto['omschrijving'].'</div>'.PHP_EOL;
  								echo '</div>'.PHP_EOL;
								
  								}//einde while foto
						}//einde query foto
								}//einde while thumb
								
								
						}//einde query thumb
						
						
  			}//einde query land
			
			}
						echo '</tr>';
						echo '</table>'.PHP_EOL;

  ?> 
[/PHP]

Code voor in het head gedeelte:

[PHP]<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>

<!--
	2) Optionally override the settings defined at the top
	of the highslide.js file. The parameter hs.graphicsDir is important!
-->

<script type="text/javascript">
	hs.graphicsDir = 'highslide/graphics/';
	hs.align = 'center';
	hs.transitions = ['expand', 'crossfade'];
	hs.outlineType = 'rounded-white';
	hs.fadeInOut = true;
	hs.numberPosition = 'caption';
	hs.dimmingOpacity = 0.75;
	hs.showCredits = false; 
<?php
	for($i = 1 ; $i < 12 ; $i++)
		{ 
?>
	// Add the controlbar
   if (hs.addSlideshow) hs.addSlideshow({
   		slideshowGroup: 'group<?php echo $i; ?>',
	  interval: 5000,
      repeat: false,
      useControls: true,
      fixedControls: true,
      overlayOptions: {
         opacity: .75,
         position: 'top center',
         hideOnMouseOut: true
      }
   });
   
<?php
   		}
?>
	
</script>[/PHP]