Galería de fotos con lista CSS y Lightbox
Hola, tengo un punto pendiente en la galería de fotos de una web que no consigo resolver y la verdad que no sé qué es lo que puede fallar.
El resultado final es prácticamente como la disposición de esta web con sus miniaturas:
Enlace
Y la galería es esa misma, lightbox.Bien.
Lo que pretendo es hacer lo mismo, pero con una lista en vez de (si miran el código de esa web, lo verán mejor) usar divs, una lista.
Mi problema es que no consigo hacer que se vea la miniatura usando listas. ¿alguna sugerencia o corrección?.
Código que usa la web mencionada:
<div class="thumbnail">
Bagan
</div>
Código que intento usar yo sin que aparezca la miniatura:
<ul class="subcategorias">
<li class="miniatura">
</li>
<li class="miniatura">
</li>
</ul>
Gracias de antemano.
abrandlincoln
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
chris
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
Usuario desconocido
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
chris
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.
leos
Chris
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
chris
gracias Leos
Usuario desconocido
Publica un enlace a lo que estás haciendo, así puedo ver lo que tienes en mente y por qué no está funcionando.
chris
http://christian-rooibos.es/final/index.php
siento no haber puesto el enlace anteriormente. A ver que tal.
Usuario desconocido
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;
}
chris
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