Galeria en div con scroll horizontal

Freakme · #1 (**permalink**) 19/02/2010, 12:51

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.

beep · #2 (**permalink**) 19/02/2010, 15:50

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ágenes/pruebas/casa/DSC_0002.jpg" width="1286" height="854" /></div>
<div id="portafoto2"><img src="../../../Mis imá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.

Freakme · #3 (**permalink**) 19/02/2010, 16:47

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.

beep · #4 (**permalink**) 19/02/2010, 18:51

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ágenes/pruebas/casa/DSC_0002.jpg" width="1286" height="854" /> <img src="../../../Mis imágenes/pruebas/casa/DSC_0002.jpg" width="1286" height="854" /> </div>
</div>
</body>
</html>

salvatro · #5 (**permalink**) 19/02/2010, 19:44

intentaste sin ponerle width a la div

xcoltx · #6 (**permalink**) 19/02/2010, 20:20

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

Freakme · #7 (**permalink**) 20/02/2010, 02:04

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.

jomaruro · #8 (**permalink**) 20/02/2010, 07:11

Hola:

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

Saludos.

beep · #9 (**permalink**) 20/02/2010, 09:52

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;

}

beep · #10 (**permalink**) 20/02/2010, 10:17

Cita:

Iniciado por Freakme

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.

Freakme · #11 (**permalink**) 21/02/2010, 10:32

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.