galeria fotos en CSS

ryu_on_ice · #1 (**permalink**) 15/02/2006, 03:22

hola a todos!!!

Alguien sabe de algun ejemplo de una galeria de fotos, usando CSS....???

lo que pasa es que necesito integrar algo asi a una web estoy haciendo, pero no se como empezar algo asi.....(llevo poca experiencia con CSS)

saludos!!!

#2 (**permalink**) 15/02/2006, 03:39

hola esto esta hecho en css integramente:

http://gallery.menalto.com/

y a parte es un sistema totalmente configurable. yo la uso y es genial pero quizas lo malo es qeu no hay buenas traducciones aunque con un poco de tiempo puedes traducirlo tu.

saludos

RoQ · #3 (**permalink**) 15/02/2006, 08:04

http://zenphoto.org es mucho mas liviano

#4 (**permalink**) 15/02/2006, 10:23

Cita:

Iniciado por RoQ

http://zenphoto.org es mucho mas liviano

muy buena pinta tiene, gracias por la info roq no lo conocia.

RoQ · #5 (**permalink**) 15/02/2006, 12:41

No te decepcionara, es muy bueno, ligero, facil de instalar y usar, todavia esta en beta asi que no tiene mucho themes.

#6 (**permalink**) 15/02/2006, 15:23

Cita:

Iniciado por RoQ

No te decepcionara, es muy bueno, ligero, facil de instalar y usar, todavia esta en beta asi que no tiene mucho themes.

no quiero themes prefiero modelarlo a mi gusto,

ryu_on_ice · #7 (**permalink**) 16/02/2006, 03:16

HOla a todos, y gracias por atender el post....

Ya tengo un ejemplo de una galeria, es mas sencillo que los que me recomiendan.

Al agregarlo al codigo que ya tenia(hmtl y CSS), el CSS de la galeria en el dreamweaver..se descuadra todo, todo pierde acomodo....pero ya ejecutnado el html...se ve bien.(bueno se ve +/-)...

Este es...hmtl

Código HTML:

<html>
<head>
<title>.::4::.</title>
<LINK href="css/chikas4.css" type=text/css rel=stylesheet>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</style></head>

<body>
<DIV id=CONTAINER>
		<DIV class=header>
			<img src="css/bannerTOP.jpg" width="700" height="140" alt="" border="0"><!-- <H1>Logo Banner </H1> -->
		</DIV>
	  <DIV class=principal>
			<H2>Titulo principal </H2>
			<H3>Subtitulo...etc</H3>
			<P>Aenean vel leo nec ipsum mollis cursus. Quisque semper fringilla justo. Maecenas quis erat. Morbi felis.</P>
	  </DIV>
<!--galeria  -->
<div id="galeria"> 
<h3>GALERÍA CSS - Listas</h3> 
   <ul> 
      <li><a href="#"><img src="galeria_1/1.jpg" border="0" alt=""/><br/><span>imagen 1</span></a></li> 
      <li><a href="#"><img src="galeria_1/2.jpg" border="0" alt=""/><br/>imagen 2</a></li> 	  
      <li><a href="#"><img src="galeria_1/3.jpg" border="0" alt=""/><br/><span>imagen 3</span></a></li> 
	  <li><a href="#"><img src="galeria_1/4.jpg" border="0" alt=""/><br/>imagen 4</a></li> 
   </ul> 
<!--galeria-->
<!-- pie de pagina -->
<DIV class=footer>
<img src="css/footer_bar_2.gif" width="687" height="55" alt="" border="0">
<H6>asfasñlkfjñaslkdjf 2006, sdceemailleds</H6>
</DIV>
<!-- pie de pagina -->
</DIV>
<!-- fin de contenedor -->
</body>
</html>

y este el CSS

Código:

BODY {
	LINE-HEIGHT: 10px; 
	background-image: url(background.gif);
	/*BACKGROUND-COLOR: #6d6663; */
	TEXT-ALIGN: justify
}
#CONTAINER {
	MARGIN: 0px auto; 
	WIDTH: 700px; 
	HEIGHT: auto; 
	BACKGROUND-COLOR: #FFFFFF; 
	BORDER-TOP: #000000 1px solid; 
	BORDER-RIGHT: #000000 1px solid; 	
	BORDER-LEFT: #000000 1px solid; 	
	BORDER-BOTTOM: #000000 1px solid; 	
}
.header {
	BORDER-BOTTOM-COLOR: #000000 1px solid; 
	MARGIN: 0px 0px 10px; 
	WIDTH: 700px; 
	HEIGHT: 140px; 
	BACKGROUND-COLOR: #f3eabc;
	}
P {
	FONT: 11px/120% Verdana, Arial, Helvetica, sans-serif; 
	COLOR: #586885
}
.principal {
    WIDTH: 665px; 
	HEIGHT: auto; 
	PADDING-RIGHT: 10px; 
	PADDING-LEFT: 10px; 
	PADDING-TOP: 10px; 
	PADDING-BOTTOM: 10px; 
	MARGIN: 0px 5px 0px 5px; /*117*/
	BACKGROUND-COLOR: #FFFFFF;
}
/*...........GALERIA FOTOGRAFICA........................................*/
#galeria li { 
   display:inline; 
   float:left; 
   width:110px; 
   background-color:#f5f7f9; 
   padding:5px; 
   margin:5px; 
   text-align: center; 
   border-right: #a5a7aa solid 1px; 
   border-bottom: #a5a7aa solid 1px; 
} 
/*...........GALERIA FOTOGRAFICA.........................................*/
.footer {
	MARGIN: 5px; 
	WIDTH: auto; 
	HEIGHT: 30px; 
}
.footer H6 {
	MARGIN: 5px auto; 
	FONT: bold 10px Verdana, Arial, Helvetica, sans-serif; 
	TEXT-TRANSFORM: uppercase; 
	COLOR: #666666; 
	TEXT-ALIGN: center
}

y ademas si lo veo en Iexplorer se ve bien..pero yan fireFox se desacomoda todo.....

saludos!!!

kazafun · #8 (**permalink**) 16/02/2006, 03:58

Voy a decir una cosa... soy fiel 100% a CSS, pero creo que una galeria de imagenes es una excusa perfecta para utilizar tablas.
Realmente son datos tabulados, ¿no?

#9 (**permalink**) 16/02/2006, 07:43

mmm pues las galerias ultimamente vienen integras en css, y muchas mas aplicaciones igual.

mira la que dijo roq o la que dije yo.

Jorolo · #10 (**permalink**) 16/02/2006, 14:28

Hola a todos, hola kazafun.

Cita:

Iniciado por kazafun

Voy a decir una cosa... soy fiel 100% a CSS, pero creo que una galeria de imagenes es una excusa perfecta para utilizar tablas.
Realmente son datos tabulados, ¿no?

Las imágenes no son datos, más bien son objetos.

http://html.conclase.net/w3c/html401...t/objects.html

kazafun · #11 (**permalink**) 16/02/2006, 16:21

Cita:

Iniciado por Jorolo

Hola a todos, hola kazafun.

Las imágenes no son datos, más bien son objetos.

http://html.conclase.net/w3c/html401...t/objects.html

Si, si, no niego que "tecnicamente" puedan ser objetos, pero "logicamente" creo que podrian pasar como un dato mas y considerar una tabla como un perfecta manera para presentarlos.

Quiero decir que no le veo a la tabla, como maquetacion de una galeria de imagenes, que se riña con la filosofia mas estricta de CSS.
(Ojo que no veo mal implementarla sin tablas)

Jorolo · #12 (**permalink**) 16/02/2006, 17:35

Hola de nuevo.

Cita:

Iniciado por kazafun

Si, si, no niego que "tecnicamente" puedan ser objetos, pero "logicamente" creo que podrian pasar como un dato mas y considerar una tabla como un perfecta manera para presentarlos.

Quiero decir que no le veo a la tabla, como maquetacion de una galeria de imagenes, que se riña con la filosofia mas estricta de CSS.
(Ojo que no veo mal implementarla sin tablas)

No tiene que ver (directamente) con el css. Tiene que ver con lo que es una tabla.

--------- pepe ----- pepa
edad --- 30 ------- 31
sexo -- hombre - mujer
pais --- chile ----- china
foto --- .jpg ------- .jpg

Los datos: hombre mujer estan relacionados por el factor sexo.
Los datos: 30 y hombre están relacionados por el factor pepe.

En la fila país, solo son aceptables datos que identifiquen un país.

Etc, etc, etc...

La tabulación crea relaciones entre los datos.

Al hacer una galería de imágenes, si existiesen ese tipo de relaciones entre las imágenes, se podría discutir...

Pero si no hay nada que tabular no uses tablas. las tablas son para tabular (datos tabulables) no para maquetar.

En tus comentarios usaste dos palabras ("presentarlos" "maquetacion" ) que ilustran una forma de pensar muy extendida, centrada única y exclusiva en el aspecto visual

Quien crea que el aspecto visual es lo único importante, que se olvide del diseño web y que se dedique a la fotografía.

Es mi opinión.

kazafun · #13 (**permalink**) 17/02/2006, 03:14

Pos fale. Mi opinion desde luego no es esa.

ryu_on_ice · #14 (**permalink**) 17/02/2006, 20:19

Compañeros...

Yo lo unico que quiero es hacer una galeria fotografica en donde se muestren pequeñas fotos (tubnails) algo asi como un catalogo, que al dar clic en cualquiera, me mande a otra pagina donde me muestre esa misma foto pero mas grande con unas 4 o 5 lineas de texto diciendo caracteristicas grales, y ademas otras 3 o 4 fotos del mismo producto etc.

Y el codigo que mostre al principio es mas o menos lo que ando buscando, pero, en serio soy un novatillo en eso de maquetar, y diseñar en CSS....ya mas adelante o no se si deba hacerlo desde ya, eso de la base de datos o para manejar las fotos, por que en un principio van a ser muy pocas fotos par mostrar......(me refiero hacer algo asi como una interfaz para borrar, y poner nuevas fotos etc etc...)

con el codigo mostrado, me podrian dar una idea a seguir o alguna sugerencia..??

Saludos!!

man0l0 · #15 (**permalink**) 17/02/2006, 20:31

Que yo creo que no hay que ser tan estrictos (mientras no se comentan errores en los tag).

La Internet no fue hecha para nosotros, pero ahora todos la usamos :P, entonces, ¿por qué no usar una tabla para mostrar una galería de imágenes si se nos facilita un 100% el diseño y no se afecta la visualización ni accesibilidad de esta?, la idea es "no abusar".

www.google.cl usa tablas
la página de inicio de firefox usa tablas

¿es google inaccesible?, yo no conozco a nadie que se haya quejado.

esto aveces se torna como los "fanáticos religiosos", por aquí leo muchas veces fanáticos CSS o no sé como decirlo. :P

Saludos!

kazafun · #16 (**permalink**) 18/02/2006, 03:49

Cita:

Iniciado por ryu_on_ice

Compañeros...

Yo lo unico que quiero es hacer una galeria fotografica en donde se muestren pequeñas fotos (tubnails) algo asi como un catalogo, que al dar clic en cualquiera, me mande a otra pagina donde me muestre esa misma foto pero mas grande con unas 4 o 5 lineas de texto diciendo caracteristicas grales, y ademas otras 3 o 4 fotos del mismo producto etc.

Y el codigo que mostre al principio es mas o menos lo que ando buscando, pero, en serio soy un novatillo en eso de maquetar, y diseñar en CSS....ya mas adelante o no se si deba hacerlo desde ya, eso de la base de datos o para manejar las fotos, por que en un principio van a ser muy pocas fotos par mostrar......(me refiero hacer algo asi como una interfaz para borrar, y poner nuevas fotos etc etc...)

con el codigo mostrado, me podrian dar una idea a seguir o alguna sugerencia..??

Saludos!!

Sugerencia: Haz la galeria de imagenes con una tabla.

ryu_on_ice · #17 (**permalink**) 20/02/2006, 03:22

Compañeros....

Despues de estarle dando vueltas y vueltas al asunto, le he tomado la palabra y aceptado la sugerencia a kazafun de hacerlo con tablas......

y pues la cuestion de la galeria ya quedo listo, ahora sigo con lo de la base de datos, espero seguir contando con su apoyo en los foros correspondientes......

Saludos y Gracias!!!!

JavierB · #18 (**permalink**) 20/02/2006, 03:26

Hola a todos.

No se si llego un poco tarde, pero el otro día encontré esta página que me pareció interesante:

http://www.cssplay.co.uk/menu/gallery_click.html#nogo

Saludos,

caricatos · #19 (**permalink**) 20/02/2006, 03:53

Hola:

Aunque no sea el tema, me gustaría dar mi opinión sobre el uso de tablas en una galería de imágenes.

Se trata de crear una presentación, en donde uno considera mostrar una galería de fotos en n filas y m columnas... y en eso no creo que haya dudas que se trata de una "estructura tabular".

Estamos acostumbrándonos a los estándares, y por eso queremos tener razonamientos "estrictos" como una validación, pero todos los días tenemos que pelearnos con nuestras páginas procurando ser fieles a esas ideas. Mejor intentemos usar razonamientos "dinámicos", y ser fieles a otras cosas como hacer bien el trabajo.

Aprovecho para poner una referencia a mi galería de imágenes, que si bien está basada en javascript, tiene una importante presencia de estilos: http://www.pepemolina.com/galeria/

Bueno, en la galería que yo uso (la página de mi perfil), los datos son también tabulados... la miniatura, el año, el motivo...

Saludos

kahlito · #20 (**permalink**) 20/02/2006, 07:39

Cita:

Iniciado por JavierB

Hola a todos.

No se si llego un poco tarde, pero el otro día encontré esta página que me pareció interesante:

http://www.cssplay.co.uk/menu/gallery_click.html#nogo

Saludos,

Gracias por el enlace Moderata, buscaba esa misma galería hace ya bastante tiempo

es una de mis favoritas

ryu_on_ice · #21 (**permalink**) 20/02/2006, 20:49

gracias por el enlace.. era exactamante lo que andaba buscando...la tomare en cuenta!!!

saludos!!

JavaPez · #22 (**permalink**) 01/09/2008, 11:10

Alguien tiene el codigo de esta http://www.cssplay.co.uk/menu/gallery_click.html#nogo (la de los thumbnails a la izquierda)

Saludos.

kseso? · #23 (**permalink**) 01/09/2008, 12:47

Hola JavaPez.
Bienvenido a FdW.
Si solo quieres el código, a través de "Ver --> Código fuente de la página" lo tienes, pero mejor a través de "Archivo --> Guardar página completa como" (esto en firefox).

Un saludo

P.D.: No suele estar bien visto revivir post tan antiguos (¿viste la última respuesta? Es del 21 de Febrero de 2006) y además es más efectivo que abras post nuevo para consulta nueva.

nicolasdd · #24 (**permalink**) 28/11/2011, 08:19

muchas gracias por su aportacion, pues sirve perfectamente para lo que andaba buscando