Foros del Web » Diseño web » CSS »

galeria fotos en CSS

Estas en el tema de galeria fotos en CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/02/2006, 02:22
Avatar de ryu_on_ice  
Fecha de Ingreso: abril-2005
Mensajes: 309
Antigüedad: 9 años, 4 meses
Puntos: 0
galeria fotos en CSS

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)  
Antiguo 15/02/2006, 02:39
Avatar de MindPaniC  
Fecha de Ingreso: enero-2005
Ubicación: Entre montañas... en el norte
Mensajes: 2.112
Antigüedad: 9 años, 7 meses
Puntos: 2
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
  #3 (permalink)  
Antiguo 15/02/2006, 07:04
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 9 años, 4 meses
Puntos: 0
http://zenphoto.org es mucho mas liviano
  #4 (permalink)  
Antiguo 15/02/2006, 09:23
Avatar de MindPaniC  
Fecha de Ingreso: enero-2005
Ubicación: Entre montañas... en el norte
Mensajes: 2.112
Antigüedad: 9 años, 7 meses
Puntos: 2
Cita:
Iniciado por RoQ
http://zenphoto.org es mucho mas liviano
muy buena pinta tiene, gracias por la info roq no lo conocia.
  #5 (permalink)  
Antiguo 15/02/2006, 11:41
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 9 años, 4 meses
Puntos: 0
No te decepcionara, es muy bueno, ligero, facil de instalar y usar, todavia esta en beta asi que no tiene mucho themes.
  #6 (permalink)  
Antiguo 15/02/2006, 14:23
Avatar de MindPaniC  
Fecha de Ingreso: enero-2005
Ubicación: Entre montañas... en el norte
Mensajes: 2.112
Antigüedad: 9 años, 7 meses
Puntos: 2
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,
  #7 (permalink)  
Antiguo 16/02/2006, 02:16
Avatar de ryu_on_ice  
Fecha de Ingreso: abril-2005
Mensajes: 309
Antigüedad: 9 años, 4 meses
Puntos: 0
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!!!

Última edición por ryu_on_ice; 17/02/2006 a las 19:19
  #8 (permalink)  
Antiguo 16/02/2006, 02:58
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 847
Antigüedad: 10 años, 8 meses
Puntos: 13
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?
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #9 (permalink)  
Antiguo 16/02/2006, 06:43
Avatar de MindPaniC  
Fecha de Ingreso: enero-2005
Ubicación: Entre montañas... en el norte
Mensajes: 2.112
Antigüedad: 9 años, 7 meses
Puntos: 2
mmm pues las galerias ultimamente vienen integras en css, y muchas mas aplicaciones igual.

mira la que dijo roq o la que dije yo.
  #10 (permalink)  
Antiguo 16/02/2006, 13:28
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 8 años, 10 meses
Puntos: 1
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
  #11 (permalink)  
Antiguo 16/02/2006, 15:21
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 847
Antigüedad: 10 años, 8 meses
Puntos: 13
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)
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #12 (permalink)  
Antiguo 16/02/2006, 16:35
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 8 años, 10 meses
Puntos: 1
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.
  #13 (permalink)  
Antiguo 17/02/2006, 02:14
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 847
Antigüedad: 10 años, 8 meses
Puntos: 13
Pos fale. Mi opinion desde luego no es esa.
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #14 (permalink)  
Antiguo 17/02/2006, 19:19
Avatar de ryu_on_ice  
Fecha de Ingreso: abril-2005
Mensajes: 309
Antigüedad: 9 años, 4 meses
Puntos: 0
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!!
  #15 (permalink)  
Antiguo 17/02/2006, 19:31
 
Fecha de Ingreso: febrero-2006
Mensajes: 114
Antigüedad: 8 años, 6 meses
Puntos: 0
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!
  #16 (permalink)  
Antiguo 18/02/2006, 02:49
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 847
Antigüedad: 10 años, 8 meses
Puntos: 13
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.
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #17 (permalink)  
Antiguo 20/02/2006, 02:22
Avatar de ryu_on_ice  
Fecha de Ingreso: abril-2005
Mensajes: 309
Antigüedad: 9 años, 4 meses
Puntos: 0
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!!!!
  #18 (permalink)  
Antiguo 20/02/2006, 02:26
Avatar de JavierB
Moderata
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.055
Antigüedad: 12 años, 6 meses
Puntos: 766
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,
  #19 (permalink)  
Antiguo 20/02/2006, 02:53
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.092
Antigüedad: 12 años, 4 meses
Puntos: 1132
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #20 (permalink)  
Antiguo 20/02/2006, 06:39
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.816
Antigüedad: 11 años, 5 meses
Puntos: 51
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
  #21 (permalink)  
Antiguo 20/02/2006, 19:49
Avatar de ryu_on_ice  
Fecha de Ingreso: abril-2005
Mensajes: 309
Antigüedad: 9 años, 4 meses
Puntos: 0
gracias por el enlace.. era exactamante lo que andaba buscando...la tomare en cuenta!!!


saludos!!
  #22 (permalink)  
Antiguo 01/09/2008, 11:10
 
Fecha de Ingreso: junio-2008
Mensajes: 3
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: galeria fotos en CSS

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

Saludos.
  #23 (permalink)  
Antiguo 01/09/2008, 12:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 7 años, 2 meses
Puntos: 537
Respuesta: galeria fotos en CSS

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #24 (permalink)  
Antiguo 28/11/2011, 07:19
 
Fecha de Ingreso: noviembre-2011
Mensajes: 6
Antigüedad: 2 años, 9 meses
Puntos: 2
Respuesta: galeria fotos en CSS

muchas gracias por su aportacion, pues sirve perfectamente para lo que andaba buscando
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 01:48.
SEO by vBSEO 3.3.2