Galeria de imagenes en CSS

[vengiss]

Hola,

Estoy haciendo una galeria de imagenes para un sitio web utilizando solo CSS (por los momentos) donde en la parte superior me muestre una lista de imagenes pequeñas o "thumbnails" y luego de darles click me muestre la imagen en grande en la parte inferior.

Los thumbnails los estoy mostrando como una lista usando 2 columnas de 7 imagenes (actualmente solo tengo 7 imagenes mientras pruebo), pero se me presentaron dos problemas:

1. No puedo colocar la imagen en miniatura en los thumbnails de la imagen grande.
2. No puedo mostrar la imagen cuando se hace "click" en la imagen sino cuando hago hover (estoy usando li:hover como prueba)

Ahora mi pregunta, existe la manera de solucionar esos problemas utilizando solo CSS? O es necesario utilizar JS o alguna otra herramienta? He buscado algunas galerias pre-diseñadas pero las que he encontrado full CSS no funcionan como me gustarian y las que si utilizan JS.

Aqui les coloco el codigo CSS y la seccion respectiva:

Código:

/* Galeria de Imagenes */

#lista-galeria {
	list-style-type: none;
	margin-left: 8px;
}

#lista-galeria li {
	float: left; 
	display: block; 
	width: 60px; 
	height: 60px; 
	background-position: 50% 50%; 
	cursor: pointer; 
	border: 3px solid #fff; 
	outline: 1px solid #ddd; 
	margin-right: 14px; 
	margin-bottom: 14px;
}

#lista-galeria li a img {
	position: absolute;
	top: 640px;
	display: none;
	right: 80px;
	height: 440px;
	width: 600px;
	left: 465px;
	bottom: 0px;
}

#lista-galeria li:hover img {
	display:block;
}

#lista-galeria li:hover {
	outline-color: #bbb;
}

Codigo HTML:

Código HTML:

<ul id="lista-galeria">
      <li class="thumb"><a href="#"><img src="imagenes/galeria/alpine sunset.JPG" alt="Alpine Sunset" /></a></li>
      <li class="thumb"><a href="#"><img src="imagenes/galeria/bandera española.JPG" alt="Bandera Española" /></a></li>
      <li class="thumb"><a href="#"><img src="imagenes/galeria/belle de noit.JPG" alt="Belle de Noit" /></a></li>
      <li class="thumb"><a href="#"><img src="imagenes/galeria/black magic.JPG" alt="Black Magic" /></a></li>
      <li class="thumb"><a href="#"><img src="imagenes/galeria/blue rose.JPG" alt="Blue Rose" /></a></li>
      <li class="thumb"><a href="#"><img src="imagenes/galeria/bolero.JPG" alt="Bolero" /></a></li>
      <li class="thumb"><a href="#"><img src="imagenes/galeria/chicago peace.JPG" alt="Chicago Peace" /></a></li>
</ul> 

Nota: Estoy utilizando la etiqueta <a> con la propiedad a:active para que muestre la imagen al click pero no logro que funcione, solo he logrado que funcione con li:hover y li:active (solo la muestra mientras se presiona el click en el item).

[jomaruro]

Hola:

Échale un vistazo a este artículo donde explica el funcionamiento de una galería como la que tu quieres (si no me equivoco).

Saludos.

[vengiss]

Gracias por el link, puedo usar 2 imagenes (una pequeña y una grande) para solucionar mi primer problema pero todavia no logro solucionar el problema del click.

El problema principal es que el objeto "a" no me lo esta reconociendo, por ejemplo el siguiente codigo funciona perfectamente:

Código:

#lista-galeria li:hover{
	outline-color: #bbb;}

Muestra el borde al colocar el mouse sobre el item, pero el siguiente no funciona aunque deberia hacer lo mismo:

Código:

#lista-galeria li a:hover{
	outline-color: #bbb;}

No se que puede estar pasando :s

[vengiss]

Hola, bueno logre que funcionara a la perfeccion usando un javascript que consegui (lastima que no puedo postear el url, pero se consige facil en google)

Hubiera querido utilizar solo CSS pero hubiera tenido que cargar de nuevo las imagenes en formato pequeño y no queria recargar el sitio.

Gracias igualmente!