Foros del Web » Creando para Internet » CSS »

Galeria en div con scroll horizontal

Estas en el tema de Galeria en div con scroll horizontal en el foro de CSS en Foros del Web. Estoy componiendo una página web y quiero hacer una galeria con todas las fotos seguidas en horizontal con un scroll horizontal debajo, para desplazarse por ...
  #1 (permalink)  
Antiguo 19/02/2010, 12:51
Avatar de Freakme  
Fecha de Ingreso: julio-2007
Ubicación: Portugalete
Mensajes: 97
Antigüedad: 10 años, 4 meses
Puntos: 0
Galeria en div con scroll horizontal

Estoy componiendo una página web y quiero hacer una galeria con todas las fotos seguidas en horizontal con un scroll horizontal debajo, para desplazarse por ellas.
Algo parecido a esto: http://lorenzoherrera.com/ Pero la galeria dentro de un div, en lugar de desplazarse la página entera.

De momento estoy probando con esto:

Código:
<div id='galeria'>
  <img src='fotos/01.jpg' />
  <img src='fotos/01.jpg' />
  <img src='fotos/01.jpg' />
  <img src='fotos/01.jpg' />
  <img src='fotos/01.jpg' />
</div>
y esto:

Código:
div#galeria{
position:relative;
top:10px;
left:300px;
width:900px;
height:505px;
overflow:auto;
}

div#galeria img{
display:block;
float:left;
margin:0px;
padding:0px;
}
Pero las fotos aparecen en columna de dos, es decir, dos - salto de linea - dos - salto de linea - ...

Debieran seguir hacia la derecha, pero en su lugar cuando llegan al final del ancho del div, saltan debajo.

¿Alguien me puede echar un cable con esto?

Gracias.
  #2 (permalink)  
Antiguo 19/02/2010, 15:50
 
Fecha de Ingreso: febrero-2010
Mensajes: 9
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Galeria en div con scroll horizontal

Yo he hecho esto (el ancho del contenedor es enorme porque he puesto unas fotos tal como salen de la camara)

Css:
#contenedor{
width:3000px;
overflow:auto;
}

#portafoto{
width:auto;
float:left;

}
#portafoto2{
width:auto;
float: left;
}

Html:
<div id="contenedor">
<div id="portafoto"><img src="../../../Mis im&aacute;genes/pruebas/casa/DSC_0002.jpg" width="1286" height="854" /></div>
<div id="portafoto2"><img src="../../../Mis im&aacute;genes/pruebas/Donosti/DSC_0002.jpg" width="1286" height="854" /></div>
</div>
</body>
</html>

Funciona. Esto es solo una prueba. No se como es tu página pero mas o menos espero que esto te sirva.
Es la primera vez que lo hago. Supongo que tienes que dar a tu pagina un ancho donde entre todo porque sino te pone una foto sobre otra y poniendo width:auto en contenedor tambien.
  #3 (permalink)  
Antiguo 19/02/2010, 16:47
Avatar de Freakme  
Fecha de Ingreso: julio-2007
Ubicación: Portugalete
Mensajes: 97
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Galeria en div con scroll horizontal

pero con eso se va a mover todo el contenedor, yo quiero que el scroll lo tenga solo el div que uso para la galeria.
  #4 (permalink)  
Antiguo 19/02/2010, 18:51
 
Fecha de Ingreso: febrero-2010
Mensajes: 9
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Galeria en div con scroll horizontal

Haber si esto esta mejor almenos como idea :
Css:
#galeria{

width:300px;
height:200px;
overflow: scroll
}

#portafoto{
width:3000px;
}

Html:

<body>
<div id="galeria">
<div id="portafoto"><img src="../../../Mis im&aacute;genes/pruebas/casa/DSC_0002.jpg" width="1286" height="854" /> <img src="../../../Mis im&aacute;genes/pruebas/casa/DSC_0002.jpg" width="1286" height="854" /> </div>
</div>
</body>
</html>
  #5 (permalink)  
Antiguo 19/02/2010, 19:44
 
Fecha de Ingreso: noviembre-2009
Mensajes: 79
Antigüedad: 8 años, 1 mes
Puntos: 2
Respuesta: Galeria en div con scroll horizontal

intentaste sin ponerle width a la div
  #6 (permalink)  
Antiguo 19/02/2010, 20:20
Avatar de xcoltx  
Fecha de Ingreso: diciembre-2008
Mensajes: 65
Antigüedad: 9 años
Puntos: 0
Respuesta: Galeria en div con scroll horizontal

mira no es PRO, pero la menos es una solucion temporal xD

Código:
<style type="text/css">
#gc{

	background-color:#333333;
	width:400px;
	height:120px;
	margin-left:auto;
	margin-right:auto;
	overflow:auto;
	padding:2px 2px 2px 2px;
	}
#fc{
	/*no se me ocurre mas que seguir alargando esto*/
	width:800px; 
	height:100px;
	}		
	
.foto{
	background-color:#000000;
	height:100px;
	width:90px;
	margin-right:3px;
	border:1px solid #FFFFFF;
	float:left;

	}
</style>
Código:
<div id="gc">

    <div id="fc">
    <div class="foto"></div>
    <div class="foto"></div>
    <div class="foto"></div>
    <div class="foto"></div>
    <div class="foto"></div>
    <div class="foto"></div>
    <div class="foto"></div>
    <div class="foto"></div>
    </div>

</div>
Espero que te puedas inspirar
  #7 (permalink)  
Antiguo 20/02/2010, 02:04
Avatar de Freakme  
Fecha de Ingreso: julio-2007
Ubicación: Portugalete
Mensajes: 97
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Galeria en div con scroll horizontal

Buenos días, lo primero muchas gracias por vuestra ayuda pero con esto

Código:
div#contenedor{overflow:hidden;}

div#galeria{
width:3000px;
overflow:scroll;}
Se ponen las imagenes en fila, pero en cuanto se salen del contenedor no se ven y el scroll horizontal no está disponible.
  #8 (permalink)  
Antiguo 20/02/2010, 07:11
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 en div con scroll horizontal

Hola:

¿Estas usando javascript? Porque la galería que has mostrado está hecha con javascript.

Saludos.

  #9 (permalink)  
Antiguo 20/02/2010, 09:52
 
Fecha de Ingreso: febrero-2010
Mensajes: 9
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Galeria en div con scroll horizontal

Podrias hacer una foto con Photoshop o Gimp con todas las fotos una tras otra en fila como quieres que aparezcan y colocar esa foto dentro de :

#galeria {
width:300px;
height:200px;
overflow:scroll;

}
  #10 (permalink)  
Antiguo 20/02/2010, 10:17
 
Fecha de Ingreso: febrero-2010
Mensajes: 9
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Galeria en div con scroll horizontal

Cita:
Iniciado por Freakme Ver Mensaje
Buenos días, lo primero muchas gracias por vuestra ayuda pero con esto

Código:
div#contenedor{overflow:hidden;}

div#galeria{
width:3000px;
overflow:scroll;}
Se ponen las imagenes en fila, pero en cuanto se salen del contenedor no se ven y el scroll horizontal no está disponible.
ojo overflow = scroll en el contenedor de la galeria
y no en el porta fotos con hiden quitas las barras de desplazamiento.

Última edición por beep; 20/02/2010 a las 10:22
  #11 (permalink)  
Antiguo 21/02/2010, 10:32
Avatar de Freakme  
Fecha de Ingreso: julio-2007
Ubicación: Portugalete
Mensajes: 97
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Galeria en div con scroll horizontal

Hola, de nuevo gracias por vuestras aportaciones, pero más menos ya he resuelto el asunto, al final he tenido que sacar el div donde está el menu fuera del contenedor y ponerlo debajo.

He hecho esto:
html(realmente lo hago con php pero para entendernos, así, a los sencillo, jeje):
Código:
<div id='contenedor'>
  <div id='galeria'>
    <img src='fotos/01.jpg' />
    <img src='fotos/02.jpg' />
    <img src='fotos/03.jpg' />
    <img src='fotos/04.jpg' />
  </div> //cierro galeria
</div> //cierro contenedor

<div id='menu'>
  <a href='... />
</div> //cierro menu
css:

Código:
div#contenedor{
margin:0px auto;
width:1200px;
height:520px;
overflow-x:scroll;
overflow-y:hidden;
}

div#galeria{
position:relative;
top:10px;
left:0px;
height:505px;
}

div#galeria img{
float:left;
}
Y con esto consigo tener la galeria por un lado, con las fotos todas en horizontal y un scroll horizontal también para recorrerlas.

Un saludo y gracias de nuevo.

Etiquetas: galeria, horizontal, scroll
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 16:59.