[SOLUCIONADO] Lindo Scroll de Imagenes... pero

hcrisel · #1 (**permalink**) 14/01/2014, 16:33

Hola espero que este bien.

Te molesto para pedir una opinión.
Hice una barra de scroll horizontal en la cual me deja ver todas las imagenes que necesito.
Este fragmento muestra donde tengo el problema.

Código HTML:

 <div class="barra-panel borde-Panel punta-Izq punta-Der">
		<div class="barra-Scroll">
			<div class="contiene-Item"><img src='./img01.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img02.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img03.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img04.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img05.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img06.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img07.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img08.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img09.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img10.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img11.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img12.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img13.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img14.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img15.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img16.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img17.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img18.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img19.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img20.jpg' width="150px" height="100px"></div>
			<div class="contiene-Item"><img src='./img21.jpg' width="150px" height="100px"></div>

		</div>
	</div>

Como es evidente necesitaba hacer eso en una sola línea para garantizarme que no dependiera de la cantidad de imagenes el tener que tocar la página. Fue así que desarrolle lo mismo con un array.

Pero este código solo me muestra la primera imagen y no el resto.

Código HTML:

<!doctype html>
<html lang="es">
<!-- Galeria de imagenes -->

<head>
	<meta charset="utf-8">
	<title>Barra Horizontal de Guchi</title>
</head>

<body>

	<style>
 		 /* Barra Horizontal de Corrimiento */
 		.barra-panel {overflow:auto; position:absolute; left:10px; top:80%; width:98.5%; right:20; height:140px; z-index:1; }
		.borde-Panel {border: 1px solid RGB(0,0,0); background: RGB(215,201,168); }
		.punta-Izq {border-top-left-radius: 5px;}
		.punta-Der {border-top-right-radius: 5px;}
		.barra-Scroll {width: 3630px;} /* Aca entran 20 fotos con un incremento de 130px por fotograma +/- */
		.contiene-Item {border: 1px solid RGB(0,0,0); width: 150px; height: 100px; float: left; margin: 10px;}
	</style>

	<div class="barra-panel borde-Panel punta-Izq punta-Der">
		<div class="barra-Scroll">
                        <div class="contiene-Item"><img id="fotos" width="150px" height="100px"></div>  *** ESTA ES LA LINEA DEL PROBLEMA ***
		</div>
	</div>

</body>

<script>
    var i = 0;

    Ki = 22; var misImagenes= new Array(Ki);
    for (k = 0; k < Ki; k++) {
        if(k<10) {misImagenes [ k ] ="file:///C:/barra/img0"+k+".jpg";} else {
        misImagenes [ k ] ="file:///C:/barra/img"+k+".jpg";}
    }

	function agregar() {
    if(i>20){ var NumImagen = 0; i=1 } else { var NumImagen = i+=1; }
	    document.getElementById("fotos").src = misImagenes[(i-1)];
    }

    window.onload=agregar;
</script>

</html>

Bueno... Espero que puedas darme alguna opinión al respecto. Muchas Gracias!!

ZoroRoronoa · #2 (**permalink**) 14/01/2014, 20:40

El codigo muestra el problema, pero Yo no se cual es.
Desarrollaste un array, pero estamos en CSS no javascript.

Amigo, dinos que es lo que quieres lograr, solo de opinion te recuerdo que existe jQuery.

archaDev · #3 (**permalink**) 14/01/2014, 21:27

¿Lo que quieres hacer es un slider?

Repites muchas veces el mismo código, para ahorrar un poco el trafico crea un estilo en vez de repetir muchas veces ' width="150px" height="100px".

Código:

.contiene-Item img { width:150px; height:100px; }

hcrisel · #4 (**permalink**) 15/01/2014, 13:03

Cita:

ZoroRoronoa Gracias por tu opnión... estoy aprendiendo a caminar y jQuery esta en mis planes... por ahora estoy acostumbrandome y aprendiendo JavaScript y CSS3... en cuanto me sienta seguro paso a JQuery...

Gracias por tu comentario.

Cita:

archaDev Gracias !!! padre no sabía que podía aplicarlo de ese modo también... muy agradecido de mi parte.

Aunque parezca mentira me dieron un gran empujón para terminar con este objetivo auto propuesto.

Les deseo lo mejor. Hasta el próximo empujón