Hola
Melsan, se puede avanzar con esto y espero te sirva
solo queda esperar una mano amiga que nos ayude en agrupar
de 10 en 10 las imágenes.
Código HTML:
<html>
<head>
<title>galeria</title>
<style>
UL#listaFotos {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
UL#listaFotos LI {FLOAT: left; WIDTH: 75px; HEIGHT: 75px}
IMG.thumb {WIDTH: 60px; HEIGHT: 60px}
IMG.main {WIDTH: 295px; HEIGHT: 210px}
.marron {BORDER-RIGHT: #a6946f 2px solid; BORDER-TOP: #a6946f 2px solid; BORDER-LEFT: #a6946f 2px solid; BORDER-BOTTOM: #a6946f 2px solid; BORDER-COLLAPSE: collapse}
</style>
<script>
//
var fotoAct = "foto_0";
function PERgal(idor)
{
document.getElementById(fotoAct).style.display = "none";
document.getElementById(idor).style.display = "";
fotoAct = idor;
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="90%">
<tr>
<td width="30%" valign="top">
<img alt="Title gal 1" id="foto_0" class="marron main" src="fotos/001.jpg" />
<img alt="Title gal 2" id="foto_1" style="display:none;" class="marron main" src="fotos/002.jpg" />
<img alt="Title gal 3" id="foto_2" style="display:none;" class="marron main" src="fotos/003.jpg" />
<img alt="Title gal 4" id="foto_3" style="display:none;" class="marron main" src="fotos/004.jpg" />
<img alt="Title gal 5" id="foto_4" style="display:none;" class="marron main" src="fotos/005.jpg" />
<img alt="Title gal 6" id="foto_5" style="display:none;" class="marron main" src="fotos/006.jpg" />
<img alt="Title gal 7" id="foto_6" style="display:none;" class="marron main" src="fotos/007.jpg" />
<img alt="Title gal 8" id="foto_9" style="display:none;" class="marron main" src="fotos/008.jpg" />
</td>
<td width="70%" style="padding-left:20px" valign="top">
<ul id="listaFotos">
<li><a href="javascript:void(0);" onclick="PERgal('foto_0')"><img alt="Alt 1" class="marron thumb" src="fotos/001.jpg" /></a></li>
<li><a href="javascript:void(0);" onclick="PERgal('foto_1')"><img alt="Alt 2" class="marron thumb" src="fotos/002.jpg" /></a></li>
<li><a href="javascript:void(0);" onclick="PERgal('foto_2')"><img alt="Alt 3" class="marron thumb" src="fotos/003.jpg" /></a></li>
<li><a href="javascript:void(0);" onclick="PERgal('foto_3')"><img alt="Alt 4" class="marron thumb" src="fotos/004.jpg" /></a></li>
<li><a href="javascript:void(0);" onclick="PERgal('foto_4')"><img alt="Alt 5" class="marron thumb" src="fotos/005.jpg" /></a></li>
<li><a href="javascript:void(0);" onclick="PERgal('foto_5')"><img alt="Alt 6" class="marron thumb" src="fotos/006.jpg" /></a></li>
<li><a href="javascript:void(0);" onclick="PERgal('foto_6')"><img alt="Alt 7" class="marron thumb" src="fotos/007.jpg" /></a></li>
<li><a href="javascript:void(0);" onclick="PERgal('foto_9')"><img alt="Alt 8" class="marron thumb" src="fotos/008.jpg" /></a></li>
</ul>
<p>Pulsa sobre la imagen en miniatura para ampliarla</p>
</td>
</tr>
</table> 
