Foros del Web » Creando para Internet » CSS »

Galeria de imagenes en CSS

Estas en el tema de Galeria de imagenes en CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/04/2009, 03:12
 
Fecha de Ingreso: marzo-2009
Mensajes: 15
Antigüedad: 8 años, 8 meses
Puntos: 0
Galeria de imagenes en CSS

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).
  #2 (permalink)  
Antiguo 10/04/2009, 07:47
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Galeria de imagenes en CSS

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.

  #3 (permalink)  
Antiguo 10/04/2009, 09:38
 
Fecha de Ingreso: marzo-2009
Mensajes: 15
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: Galeria de imagenes en CSS

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
  #4 (permalink)  
Antiguo 10/04/2009, 10:18
 
Fecha de Ingreso: marzo-2009
Mensajes: 15
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: Galeria de imagenes en CSS

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!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:35.