Me llamo Rober y soy nuevo en el foro y bastante novato en esto de la programación. En la universidad estudié algo de html y javascript, pero al parecer no lo suficiente
El caso es que he creado una página web, la cual os invito a visitar brevemente:
Código:
Como podreis ver es una galería fotográfica con un menú en árbol a la izquierda que va modificando las galerías que aparecen el un iframe de fondo blanco a la derecha que únicamente tiene una tabla con las miniaturas y al hacerles click se abren con el lytebox.w w w.robertoyoldi.com/pepe.htm
Bueno, es caso es que funcionar, funciona, pero es gracias a que la página la tengo alojada en mi hosting de pago. Los problemas surgen cuando tras ingresar el usuario y contraseña, las páginas de thumbnails que aparecen en el iframe, se cargan desde mi servidor doméstico, que no es más que un pocketpc acer n50 que uso como servidor.
Cuando cargo el iframe con una página de mi servidor, al parecer el pobre no tiene chicha suficiente y no carga algunos de los thumbnails, sustituyéndolas por un cuadro con un aspa roja. No es que esté mal dirigida la etiqueta <img>, creedme, esque sencillamente se aturulla.
Pero también hay otro problema y es que hasta que no se cargan todas las imágenes y el marco gris alrededor de las miniaturas se vuelve cuadrado, tampoco funciona el lytebox y al hacer click en una imagen se abre en el iframe en vez de en el lytebox.
Bien, pedazo de rollo que os he metido, vamos con las preguntas.
1ª Quisiera hacer de algún modo que los thumbnail se cargasen en orden, es decir:
- Que se cargue el primer thumb
- Que se compruebe que se ha cargado
- Si no ha cargado que vuelva a hacer la petición de carga
- Si lo ha cargado, que cargue el siguiente thumb, y compruebe, etc etc
2º Quisiera que no pudiese hacerse click en el iframe hasta que no estén todas cargas y así asegurarme de que el lytebox funcionará. Me da igual si durante la carga el iframe se pone ennegrecido o con una imagen o texto de cargando...
Esta segunda pregunta no tengo ni idea de como solucionarla.
Para lo primero he buscado y probado todo lo que he visto sobre "precargar" en google y al final he creado este código para precargar 12 thums y asignarlos a las 12 imagenes del body. El problema es que me funciona el local, pero al subirlo a internet (hosting de pago) me sale un error que dice:
"Out of memory at line 9"
Código:
A ver si podeis ayudarme. Gracias y Saludos <html>
<head>
<title>Documento sin título</title>
<script type="text/javascript">
function cargar(){
var thb001=new Image();thb001.src="thb/t_001.jpg";
if(thb001.complete){t001.src="thb/t_001.jpg"; }else {cargar();}
var thb002=new Image();thb002.src="thb/t_002.jpg";
if(thb002.complete){t002.src="thb/t_002.jpg"; }else {cargar();}
var thb003=new Image();thb003.src="thb/t_003.jpg";
if(thb003.complete){t003.src="thb/t_003.jpg"; }else {cargar();}
var thb004=new Image();thb004.src="thb/t_004.jpg";
if(thb004.complete){t004.src="thb/t_004.jpg"; }else {cargar();}
var thb005=new Image();thb005.src="thb/t_005.jpg";
if(thb005.complete){t005.src="thb/t_005.jpg"; }else {cargar();}
var thb006=new Image();thb006.src="thb/t_006.jpg";
if(thb006.complete){t006.src="thb/t_006.jpg"; }else {cargar();}
var thb007=new Image();thb007.src="thb/t_007.jpg";
if(thb007.complete){t007.src="thb/t_007.jpg"; }else {cargar();}
var thb008=new Image();thb008.src="thb/t_008.jpg";
if(thb008.complete){t008.src="thb/t_008.jpg"; }else {cargar();}
var thb009=new Image();thb009.src="thb/t_009.jpg";
if(thb009.complete){t009.src="thb/t_009.jpg"; }else {cargar();}
var thb010=new Image();thb010.src="thb/t_010.jpg";
if(thb010.complete){t010.src="thb/t_010.jpg"; }else {cargar();}
var thb011=new Image();thb011.src="thb/t_011.jpg";
if(thb011.complete){t011.src="thb/t_011.jpg"; }else {cargar();}
var thb012=new Image();thb012.src="thb/t_012.jpg";
if(thb012.complete){t012.src="thb/t_012.jpg"; }else {cargar();}
}
</script>
</head>
<body onload="javascript:cargar();">
<img src="thb/t_001.jpg" name="t001" />
<img src="thb/t_002.jpg" name="t002" />
<img src="thb/t_003.jpg" name="t003" />
<img src="thb/t_004.jpg" name="t004" />
<img src="thb/t_005.jpg" name="t005" />
<img src="thb/t_006.jpg" name="t006" />
<img src="thb/t_007.jpg" name="t007" />
<img src="thb/t_008.jpg" name="t008" />
<img src="thb/t_009.jpg" name="t009" />
<img src="thb/t_010.jpg" name="t010" />
<img src="thb/t_011.jpg" name="t011" />
<img src="thb/t_012.jpg" name="t012" />
</body>
</html>
