Galería de fotos con lista CSS y Lightbox

Por favor.... cómo no me fijé en eso...en fin, muchísimas gracias, así si funciona.
Lo más gracioso es cuando lo pruebo en IE6... que directamente no me aparece la galería jeje, en fin... gracias por todo. A ver qué está mal ahora para que no se vea en ese navegador...(por lo menos el ietester no lo reconoce).

saludos

La razón por la que no puedes ver las imágenes dentro del enlace es que en el css (general.css) la propiedad de indentación de texto es negativa (text-indent:-9000%;), lo cual quiere decir que las imágenes si están pero se están desplegando fuera de pantalla. Basta con que elimines la línea "text-indent:-9000%;" y ya.

Debe quedar así:


.subcategorias a {
background:url(../imagenes/subcategorias_sprite.png) no-repeat;
display:block;
height:116px;
}


http://christian-rooibos.es/final/index.php

siento no haber puesto el enlace anteriormente. A ver que tal.

Publica un enlace a lo que estás haciendo, así puedo ver lo que tienes en mente y por qué no está funcionando.

gracias Leos

Es muy sencillo, primero debe elegir el tercer ícono y completar con el url que quieres apuntar. Luego le pondrás el nombre que quieras entre las etiquetas. Ya lo solucioné en tu post. Saluti

Snyyaissues, muchas gracias por las molestias. mientras esperaba la respuesta de alguien seguí probando y bueno, realmente si me funciona, pero no me muestra la miniatura por lo siguente:
Veo que no mostré el css, que es donde reside el fallo seguro, y puede que deba añadir algo al xhtml, pero bueno, ahora lo adjuntaré.

Mi fallo creo que es el siguiente: He creado una imagen para hacer los estados de las miniaturas(reposo y rollover).
El css es el siguiente:
.subcategorias {width:540px; height:116px; margin:20px 0px 0px 38px;} /*opcional*/
.subcategorias li {float:left; margin:0px 15px 15px 0px; }
.subcategorias a {background: transparent url(../imagenes/subcategorias_sprite.png) no-repeat; display:block; height:116px; text-indent:-9000%;}

/*ESTADO NORMAL--------------------------------------*/
.miniatura a {width:120px;}

/*ESTADO ROLLOVER------------------------------------*/
.miniatura a:hover {width:120px; background-position:0px -116px;}

.subcategorias li a img {margin-top:29px;}

Y el código xhtml:
<ul class="subcategorias">
<li class="miniatura">

</li>
<li class="miniatura">

</li>
</ul>

Bien. La imagen img está dentro del enlace. Yo creía que al ser así, podría poner un fondo cualquiera con cualquien comportamiento como el que he creado, entonces si saco la imagen del enlace, el resultado será la imagen miniatura encima o debajo del fondo que usé, desplazando la imagen al fondo.

Realmente no se me ocurre cómo hacer, más que cambiar mi idea, y seguir el ejemplo del enlace...pero me rompe mi idea principal con el diseño que hice para esta galería.

Una vez más, gracias, pero ven la idea? alguna solución? no creo que sea cosa de otro mundo...pero no lo veo.

De seguro no estás aplicando la propiedad rel="lightbox" en el enlace y por eso el efecto del Lightbox no te funciona.
Te preparé un ejemplo que funciona con una lista: http://mb.diptongonante.com/demos/lightbox-lista/

Puedes descargarlo de acá: http://mb.diptongonante.com/demos/lightbox-lista/lightbox-lista.zip

Si copias y pegas funciona....no sé por qué dan error muchos de los links que postea la gente en esta web. Creo que los citamos mal a la hora de aplicar las etiquetas de publicar.
Si copias y pegas funcionará
miraré ese enlace a ver.
gracias

hola hola, el link me da error :(
para listas mi punto de partida suele ser http://css.maxdesign.com.au/listamatic/
hope it helps,
p