Un galerìa de imagenes sencilla solo en CSS

Carxl · #1 (**permalink**) 05/04/2008, 12:04

Hola a todos, cómo van??

Recurro a ustedes por que no sé como hacer una cosa

La idea es hacer una galería de imágenes como esta:
http://www.forocreativo.net/actividades/30476

Consiste en que se mostrarán x cantidad de imágenes pequeñas(thumbnails), y que cuando piquen en cualquiera, se muestre en un div esa misma imagen mas grande.

He buscado en google y he encontrado muchas galerías espectaculares, muy bonitas. Pero la idea es hacer una sencilla como esa pero solo en estilos. Esa galería (la del vínculo), pertenece intelectualmente a Quique. Èl con mucho gusto me ayudó

Alguna idea de como hacerlo con CSS,?? O necesariamente de tendrà que hacer en javascript?? Es que he intentado hacerlo solo y me ha quedado grande jejeje.

Saludos

Mikmoro · #2 (**permalink**) 05/04/2008, 15:56

Hola, Carxl.

A ver si te gusta esta:

http://www.araudi.net/minigaleria_css.html

Este es el código:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Galeria CSS</title>
<style type="text/css">
* { margin: 0px;
padding: 0px;
outline: 0;
}
a { border: 2px outset rgb(165, 165, 165);
padding: 1px 8px;
text-decoration: none;
color: rgb(0, 0, 0);
cursor: text;
margin-left: 4px;
background-color: rgb(212, 208, 200);
font-size: 13px;
font-family: Arial,Helvetica,sans-serif;
line-height: 22px;
}
a:focus, a:active { background-color: transparent;
border: 2px inset rgb(165, 165, 165);
}
a span {
position: absolute;
top: 50px;
left: 3px;
visibility: hidden;
}
a:focus span, a:active span { visibility: visible;
}
</style>
</head>
<body>
 
<a href="#">Foto 1<img src="img/2.jpg" /> 
Cerrar</a>
<a href="#">Foto 2<img src="img/1.jpg" /> 
Cerrar</a>
<a href="#">Foto 3<img src="img/3.jpg" /> 
Cerrar</a>
</body>
</html>

Mikel.

GastoNike · #3 (**permalink**) 06/04/2008, 13:58

aqui hay otra con tutorial y todo:

demo: http://metalize.liveonstyle.com/wp-content/uploads/2007/07/css-gallery.html

tuto
http://metalize.liveonstyle.com/2007/07/02/galeria-de-imagenes-en-css/

esta genial

Saludos.

Carxl · #4 (**permalink**) 06/04/2008, 16:42

Mikmoro, GastoNike muchas gracias por sus aportes, las dos me sirven resto...

Permitánme estudiarlas. observarlas y les comento... Realmente me han sido de gran ayuda!!

Saludos

Carxl · #5 (**permalink**) 07/04/2008, 15:05

Hola a todos, cómo van?

GastoNike, intenté implementar dicha galería, pero por cuestiones de tiempo no logré adaptarla a mis necesidades. Creo que me demoraría mucho implementándola antes de que me azote mi jefe jejeje

.

Mikmoro, la idea tuya vendría siendo la que necesito(por la sencillez), pero pasa que cuando uno pica en la imagen se desaparece

La idea sería que cuando uno pique la imagen se quedara ahí, no desapareciera

Seguiré intentando y les comento

Saludos

Carxl · #6 (**permalink**) 07/04/2008, 15:41

Mmmmmmmmmmmmmmmmmmmmmmmm malas noticias...

Por cuestiones del cliente, las galerías que ustedes me pasaron y ayudaron a mirar, mas otras que yo ya había montado no quedaron como finales.

Ahora me toca hacer esta: http://www.costumbreshop.com/app/art...ria=3&marca=0&

Muchas gracias por la ayuda!! Posteare en el otro foro a ver si alguien tiene idea como hacerla

Saludos

Mikmoro · #7 (**permalink**) 07/04/2008, 16:58

Bueno, pues supongo que la accesibilidad la dejarán para otro momento (o para otra vida). Habrán hecho un estudio de mercado y tendrán claro a quién le quieren vender. Tú, acurrar

Recuerdo que hace mucho tiempo había un script de lupa parecido en Dynamic Drive.

Mikel.

juaniquillo · #8 (**permalink**) 07/04/2008, 17:06

aquí te dejo un plugin para jquery para hacer eso:
http://www.mind-projects.it/blog/jqzoom_v10

Mikmoro · #9 (**permalink**) 07/04/2008, 17:21

No lo conocía.

Mikel.