Hola Como te vá.
Introducción:
Esta es la Segunda entrega acerca de un tema que; para los que recien se inician en programación con HTML5, Javascript, CSS3 y jQuery cuesta un montón.
En este post quería dejarles un programa en HTML5 que muestra dentro de un Div hasta 25 imágenes en forma de Galeria con Barra Horizontal de Scroll.
Además se agrega el tema de Nodos MOD para crear objetos (en este caso) <Div> e <img> dentro de un Div "padre" y como si esto fuera poco como eliminarlos para evitar que las imágenes (fotos) se repitan dentro del Div.
Bueno sin más protocolos vamos al programa. Espero que les sirva no solo para aprender este tema sino para aplicarlo en vuestras páginas.
Espero que les sirva como lo fue en mi caso.
Si quieren para aprender como comenzó este trabajo visiten el post anterior:
Introducción:
Esta es la Segunda entrega acerca de un tema que; para los que recien se inician en programación con HTML5, Javascript, CSS3 y jQuery cuesta un montón.
En este post quería dejarles un programa en HTML5 que muestra dentro de un Div hasta 25 imágenes en forma de Galeria con Barra Horizontal de Scroll.
Además se agrega el tema de Nodos MOD para crear objetos (en este caso) <Div> e <img> dentro de un Div "padre" y como si esto fuera poco como eliminarlos para evitar que las imágenes (fotos) se repitan dentro del Div.
Bueno sin más protocolos vamos al programa. Espero que les sirva no solo para aprender este tema sino para aplicarlo en vuestras páginas.
<!doctype html>
<html lang="es">
<!--
Te permite ver (n) imagenes en tira de acuerdo a tus necesidades
Si presiono el boton... LIMPIA LOS VECTORES y COMIENZA DE NUEVO
Galeria de imagenes
-->
<head>
<meta charset="utf-8">
<title>Barra Horizontal V.05</title>
</head>
<body onload="agregar()">
<style>
/* Barra Horizontal de Corrimiento */
.barra-panel {overflow:auto; position:absolute; left:10px; top:80%; width:98.5%; right:20px; 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: 4500px; } /* Aca entran 20 fotos con un incremento de 130px por fotograma +/- */
.contiene-Item img {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" id="tira">
</div>
</div>
<input type="button" onclick="agregar()" value="Dame clic"/>
</body>
<script>
var bandera=0; // impide que limpie el vector recien creado al inicio del proceso
var kT = 26; // Cantidad de Imagenes
var misImagenes= new Array(kT); // Vector con las imagenes
// Completo el Vector con 22 imagenes
for (k = 0; k < kT; k++) {
if(k<10) {misImagenes [ k ] ="file:///C:/barra/img0"+k+".jpg";} else {
misImagenes[ k ] ="file:///C:/barra/img"+k+".jpg";}
};
function agregar() {
// **** Limpiar y recomenzar *****************************************************
if (bandera!=0) {
var kT=26;
for (k = 0; k < kT; k++) {
var papa = document.getElementById( "P0"+k );
papa.parentNode.removeChild(papa);
}
};
// **** Carga las Imagenes *******************************************************
var kT=26;
for (k = 0; k < kT; k++) {
var elemento = document.createElement( "div" );
elemento.id="P0"+k;
elemento.className = "contiene-Item img";
elemento.innerHTML = "<img id=H0"+k+" src="+misImagenes[ k ]+">";
document.getElementById( "tira" ).appendChild(elemento);
// document.getElementById('padre').insertBefore(nuevo_parrafo,segundo_p);
}
bandera=1;
};
</script>
</html>
Espero que les sirva como lo fue en mi caso.
Si quieren para aprender como comenzó este trabajo visiten el post anterior: