Galleria di immagini in una tabella con javascript

[fbcyborg]

Salve a tutti,
Sto cercando di inserire 2 gallerie fotografiche in una tabella 2x2.
Nella prima riga ci sono i titoli "Galleria1", "Galleria2", mentre nella seconda riga ci sono le immagini vere e proprie che scorrono.

Per fare ciò mi sono servito di uno script che ho trovato su html.it e l'ho riadattato alle mie esigenze.

In una pagina ho messo questo codice html:

Codice: [Seleziona]

<table style="border-width: 1px" align="left" border="1">
<tbody>
<tr>
<td align="center">Settecento</td>
<td align="center">Sintesi</td>
</tr>
<tr>
<td>
<script language="Javascript">
<!--
var settecento = new Array ("images/Prodotti/settecento/pav1.jpg",
"images/Prodotti/settecento/pav2.jpg",
"images/Prodotti/settecento/pav3.jpg",
"images/Prodotti/settecento/pav4.jpg",
"images/Prodotti/settecento/pav5.jpg",
"images/Prodotti/settecento/pav6.jpg",
"images/Prodotti/settecento/pav7.jpg",
"images/Prodotti/settecento/pav8.jpg",
"images/Prodotti/settecento/pav9.jpg",
"images/Prodotti/settecento/pav10.jpg",
"images/Prodotti/settecento/pav11.jpg",
"images/Prodotti/settecento/pav12.jpg",
"images/Prodotti/settecento/pav13.jpg",
"images/Prodotti/settecento/pav14.jpg",
"images/Prodotti/settecento/pav15.jpg",
"images/Prodotti/settecento/pav16.jpg");
var pictureNumber = 0;
var totalNumber = settecento.length;
function previous1(){
if (document.images){
if (pictureNumber > 0) pictureNumber--
document.images.slides1.src  = settecento[pictureNumber]
}
}
function next1(){
if (document.images){
if (pictureNumber < totalNumber-1)  pictureNumber++
document.images.slides1.src  = settecento[pictureNumber]
}
} 
//--></script>
<div align="center">
<img src="http://localhost/joomla/images/Prodotti/settecento/pav1.jpg" name="slides1" height="200" width="150" />
<br />
<a href="javascript:previous1()" align="left">Indietro</a>
<a href="javascript:next1()" align="right">Avanti</a>
</div>
</td>
<td>
<script language="Javascript">
<!--
var sintesi = new Array ("images/Prodotti/sintesi/sintesi1.jpg",
"images/Prodotti/sintesi/sintesi2.jpg",
"images/Prodotti/sintesi/sintesi3.jpg",
"images/Prodotti/sintesi/sintesi4.jpg");
var pictureNumber = 0;
var totalNumber = sintesi.length;
function previous(){
if (document.images){
if (pictureNumber > 0) pictureNumber--
document.images.slides2.src  = sintesi[pictureNumber]
}
}
function next(){
if (document.images){
if (pictureNumber < totalNumber-1)  pictureNumber++
document.images.slides2.src  = sintesi[pictureNumber]
}
} 
//--></script>
<div align="center">
<img src="http://localhost/joomla/images/Prodotti/sintesi/sintesi1.jpg" name="slides2" height="200" width="150" />
<br />
<a href="javascript:previous()" align="left">Indietro</a>
<a href="javascript:next()" align="right">Avanti</a>
</div>
</td>
</tr>
</tbody>
</table>
Il primo problema è che nel primo caso mi fa vedere solo 4 immagini in galleria, mentre sono 16. Il secondo è OK (almeno così sembra).

Un'altro problema invece è che in un'altra pagina/contenuto del sito ho un'altra tabella ed ho messo questo codice:

Codice: [Seleziona]

<table align="left" border="1">
<tbody>
<tr>
<td>&nbsp;Fail</td>
<td>Dierre&nbsp;</td>
</tr>
<tr>
<td>
<p>
Anteprima<br />
non disponibile
</p>
</td>
<td>
<script language="Javascript">
<!--
var dierre = new Array ("images/Prodotti/dierre/dierra1.jpg",
"images/Prodotti/dierre/dierra2.jpg",
"images/Prodotti/dierre/dierra3.jpg",
"images/Prodotti/dierre/dierra4.jpg",
"images/Prodotti/dierre/dierra5.jpg",
"images/Prodotti/dierre/dierra6.jpg",
"images/Prodotti/dierre/dierra7.jpg",
"images/Prodotti/dierre/dierra8.jpg",);
var pictureNumber = 0;
var totalNumber = dierre.length;
function previous3(){
if (document.images){
if (pictureNumber > 0) pictureNumber--
document.images.slides3.src  = dierre[pictureNumber]
}
}
function next3(){
if (document.images){
if (pictureNumber < totalNumber-1)  pictureNumber++
document.images.slides3.src  = dierre[pictureNumber]
}
} 
//--></script>
<div align="center">
<img src="http://localhost/joomla/images/Prodotti/dierre/dierra1.jpg" name="slides3" height="200" width="150" />
<br />
<a href="javascript:previous3()" align="left">Indietro</a>
<a href="javascript:next3()" align="right">Avanti</a>
</div>
</td>
</tr>
</tbody>
</table>
In questo caso però vedo solo la prima immagine.. Non cambia se premo avanti o indietro...

Perché?
Sono alle prime armi con il javascript.