bueno la solución, (bueno la de un aficionado), es la siguiente.
He creado una estructura... Ventana/tira/fotograma, para entendernos, donde ventana será donde visualizamos... es decir ponemos un ancho fijo, el que queramos...
la tira será donde pongamos los fotogramas... que pueden ser una imagen como cualquier otro contendor.. div, span, o nav (para los puristas), e incluso usar una imagen (esto no es recomendable por seguir un poco al DOM).
la tira alineará los fotogramas gracias al display.inline,
Bien esto es básicamente lógico y las mentes pensantes lo deducen rápidamente... introducimos un overflow en "la ventana" y listo. Pero nos viene la duda de ... ¿como calibrar el ancho de la tira? supongo que se actualizan los contenidos ("fotogramas") y ahí no veo otra forma que hacer un pequeño script.. he de reconocer que me dio mis
scripquebraderos de cabeza. Pero en realidad es un sencillo bucle que nos recorrerá la estructura dom detectando.. en este caso las IMG que hay, recogiendo su ancho.width y sacándola suma... posteriormente actualizando el ancho total de la tira.. (width).
----vaya casi parece un mini tutorial.
ahora el codig-estructura-html
Código HTML :
<!-- cuadro tira de imagenes -->
<div id="Ventana" >
<div id="Tira" >
<p class="fotograma"><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p><p class="fotograma "><img class="imagenes" src="arte_files/00.jpg" alt="" ></p>
</div>
</div>
Hay un detalle si dejamos saltos de linea... las imagenes pueden colarnos un "margin" no deseado, por eso es mejor... todo pegadito.
y esto el css, no hay mucho misterio...
Código HTML :
.imagenes{
height: 300px;
width: 300px;
border: 0;
margin:0;padding:0;
}
.fotograma {
border:0px;
display:inline;
margin-right:5px;
}
#Tira{}
#Ventana{
overflow:auto;
width:800px;
height: 320px;
float:left;
border:solid 10px orange;
}
En la Tira no es necesario poner un width predeterminado ya que lo pondrá el script.
y este es javascript
Código Javascript :
function carga(){
var temp=0;
var caja=document.getElementById("Tira");
var cells = caja.getElementsByTagName("img");
for (var i = 0; i < cells.length; i++) {
temp= temp+ cells[i].clientWidth+5;
}
Es obvio modificar tanto "Tira" como la tag "img" según cada uno. Y ya para terminar de teoría
aquí os dejo un enlace al resultado práctico... que mas que decir que es un espacio temporal... si cristalab dispone de alguno para dejar allí estos resultado que lo avise o que lo cuelgue allí.