problema lightbox he imagenes

[ecosysonidos]

alguien que pueda ayudarme con esto por que ya me hice bolas y no consigo hacer lo que quiero
pues bien lo que intento hacer es algo asi como una galeria de imagenes
tenerlas primero en pequeñas imagenes y al hacer clic sobre alguna de ella que esta se haga en grande junto con un lightbox

mi tabla con imagenes (que no se bien si deba de ponerlo asi)

Código:

<div id="contencolum2">
   <table width="427" height="179" border="0">
  <tr>
    <td width="92" height="78"><img src="imagenes/publicidad/doc.jpg" width="105" height="77" id="uno"/></td>
    <td width="93"><img src="imagenes/publicidad/centroecoturistico.jpg" width="104" height="77" /></td>
    <td width="93"><img src="imagenes/publicidad/maripozas.jpg" width="104" height="77" /></td>
    <td width="131"><img src="imagenes/publicidad/tradicion.jpg" width="105" height="77" /></td>
  </tr>
  <tr>
    <td><img src="imagenes/publicidad/pozole.jpg" width="105" height="77" /></td>
    <td><img src="imagenes/publicidad/torta.jpg" width="104" height="77" /></td>
    <td><img src="imagenes/publicidad/tacos-al-pastor2.jpeg" width="104" height="77" /></td>
    <td><img src="imagenes/publicidad/carniceria1.jpg" width="105" height="77" /></td>
  </tr>
  <tr>
    <td><img src="imagenes/publicidad/abarrotes.jpg" width="105" height="77" /></td>
    <td><img src="imagenes/publicidad/directoriotelefonico.jpg" width="104" height="77" /></td>
    <td><img src="imagenes/publicidad/SAM_1071.JPG" width="103" height="77" /></td>
    <td><img src="imagenes/publicidad/gasolina.jpg" width="105" height="77" /></td>
  </tr>
</table>

</div>

mi lightbox asi

Código:

<div id="light" style="display:none"></div>

el css de mi lightbox

Código:

#light {
position:absolute;
z-index:9;
background-color:#000000;
height:100%;
width:100%;
filter:alpha(opacity=60);
opacity:0.6;
}

y mi js

Código:

$(document).ready(function(){
	$("#light").hide();
		$("#uno").click(function(){
			$("#light").show();
	});
		
});

hasta el momento con este codigo lo que me hace es que al yo dar clic en la pequeña foto
me aparece el lightbox tal como lo quiero, pero no se como hacer para que al mismo tiempo
me muestre la imagen a la que le di clic en un tamaño mas grande por encima del lightbox
alquien que pueda ayudarme con esto?

[MARCASTELEON]

Hola,

Debe haber una manera de relacionar las imagenes pequeñas con las grandes, para que el script sepa que imagen grande debe mostrar al hacer click sobre una pequeña, puede ser la ruta de la imagen con una letra de mas en el nombre del archivo, o tener una base de datos, o algun parametro de la imagen. Despues, teniendo ya la ruta de la imagen grande se puede mostrar poniendola como background del div "lightbox" o creando un elemento imagen e insertandolo en el div.

Lo que te escribo son solo algunas ideas de como se podria hacer, dependiendo de las necesidades que tengas sera mejor una forma u otra de hacerlo.

Pd: te recominedo que para hacer el color de fondo del lightbox traslucido, utilices colores rgba en vez del filtro alpha y opacity, o sea:

Código CSS:

#light {
position:absolute;
z-index:9;
background-color:rgba(0,0,0,0.6);
height:100%;
width:100%;
}