[SOLUCIONADO] (NOVATO) Barra Horizontal con Imagenes

hcrisel · #1 (**permalink**) 13/01/2014, 05:48

REGALO para (NOVATOS como yo)

Hola como estas

Introducción:
Cuando recien comenzas, todo es y parece, complejo; hasta que comenzas a comprender como funciona y se comporta cada evento, atributo, función, etc. Por eso y para que no se te vaya un fin de semana entero haciendo esto aquí te lo dejo.
Este programa te permite ver una cadena de imagenes con un Scroll Horizontal A partir de este código podrás ir jugando para aplicar nuevos resultados que puedan mejorarlo.

Fuente de donde comencé este codigo--> http://jqueryui.com/slider/#side-scroll

Aplicaciones:
Un almacen de productos te muestra una linea (Hogar - Electro - Camping) y al seleccionar un tema
HOGAR por Ej. Es aqui donde mostraría los artículos ( plancha, ventilador, televisor, etc.)

Bueno vos seguramente verás como y en que usarlo. Lo que si hice ha sido modificarlo para que muestre imagenes (a distinto del original)

Te recomiendo (a) Crear una carpeta (b) Copies 20 imagenes dentro de la carpeta (c) Crear un archivo index.html dentro de la carpeta con este contenido y espero que te sirva.

Código HTML:

<!doctype html>
<html lang="es">
<!-- Link de Origen: http://jqueryui.com/slider/#side-scroll -->
<!-- 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 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>

</body>

<script>

</script>

</html>

Bien espero que te sirva!!! como a mí.