'Galeria' de imágenes

paskuini · #1 (**permalink**) 24/05/2011, 02:48

Buenas! vuelvo a estar aquí cn mis interminables dudas....
Estoy creando una función con la que "rellenar" una plantilla de productos con una serie de variables, el problema es que al cargar la página por primera vez, la imagen no acaba de cargarse o no se que pasa q me muestra un resultado extraño; al volver a clicar ya saca el resultado que esperaba; alguien sabria como ayudarme a resolverlo?

Código HTML:

function previo(titulo_Imagen,Path_Imagen){
/* Identificar Imagen */
var titul = document.getElementById('titulo_foto')
var titulo = titul.innerHTML=titulo_Imagen
/* Averiguar tamaño de imagen */
var newImg = new Image();
newImg.src = Path_Imagen;
/* Tomar tamaño de imagen y ajustar contenedor */
var altura = newImg.height;
var ancho  = newImg.width;
var sup_ancho = ancho+40;
var sup_altura = altura+70;
/* Alinear contenedor */
var img2width =sup_ancho;
var alignwidth= -0.5*(img2width);
document.getElementById('images2').style.display='block';
document.getElementById('images2').style.width= sup_ancho +'px';
document.getElementById('images2').style.height= sup_altura +'px';
document.getElementById('images2').style.position='relative';
document.getElementById('images2').style.marginLeft='50%';
document.getElementById('images2').style.left=alignwidth +'px';
document.getElementById('vistaprevia').style.backgroundPosition='center';
document.getElementById('vistaprevia').style.backgroundRepeat='no-repeat';
document.getElementById('vistaprevia').style.padding='0px';
document.getElementById('vistaprevia').style.margin='20px';
document.getElementById('vistaprevia').style.width=ancho +'px';
document.getElementById('vistaprevia').style.height=altura +'px';
document.getElementById('vistaprevia').style.backgroundImage="url('" + Path_Imagen + "')";
}

paskuini · #2 (**permalink**) 27/05/2011, 02:13

vale

Tecna · #3 (**permalink**) 27/05/2011, 08:29

Buenas,

se me ocurre que pueda ser porque tarda más en cargar la imagen que en ejecutarse la función y por eso sólo falla la primera vez si la imagen no esta en caché, una posible solución sería usar un temporizador para lanzar la función.

InKarC · #4 (**permalink**) 27/05/2011, 09:21

El problema si es que la imagen no ha cargado cuando ejecuta la funcion; tiene que detectar la carga de la imagen, algo asi:

Código Javascript:

Ver originalwindow.onload = function(){
var pic=new Image();
pic.src= document.getElementById("images2").src
if(pic.complete) cargada(); else {pic.onload= cargada; pic.onError = cargada };
}
 
function cargada(){
//aqui va elcodigo cuando ya cargo la imagen
}

paskuini · #5 (**permalink**) 01/06/2011, 04:24

pero, es una "galería" de imágenes, quiero decir que al final habrá 4 o 5 fotos distintas, cada una en 30 páginas distintas de productos distintos.... entonces, tendré que precargar TODAS las imágenes? porque eso hará la carga muy lenta, no?

InKarC · #6 (**permalink**) 01/06/2011, 21:52

Nadie dijo nada de precargar; lo unico que se esta haciendo es detectando cuando la imagen termina de cargar y ejecutar una funcion alli. La pagina va a ser igual de rápida con o sin javascript.

paskuini · #7 (**permalink**) 15/06/2011, 05:23

Bueno, llevo todavía tiempo dándole vueltas al asunto y no acabo de solucionarlo.
La cuestión es que tengo una "plantilla" con variables javascript que mando desde otra página; las variables definen el título y el contenido de la página. El caso es que en ésta plantilla tengo una minigalería con 6 fotos DISTINTAS para cada producto, es decir: necesito pasarlas por variables también de alguna forma. Otro punto es que esta minigalería muestra miniaturas que se pueden ampliar al hacer click; de forma que se abren en un div que tenía con display:none. El caso es que la imagen no se me carga al primer click, si no al segundo, como si tuviese que cargarla.

InKarC me respondió hace tiempo, pero no acabé de entender el método... tampoco lo explicó demasiado :S

paskuini · #8 (**permalink**) 21/06/2011, 02:25

Cita:

Iniciado por paskuini

Bueno, llevo todavía tiempo dándole vueltas al asunto y no acabo de solucionarlo.
La cuestión es que tengo una "plantilla" con variables javascript que mando desde otra página; las variables definen el título y el contenido de la página. El caso es que en ésta plantilla tengo una minigalería con 6 fotos DISTINTAS para cada producto, es decir: necesito pasarlas por variables también de alguna forma. Otro punto es que esta minigalería muestra miniaturas que se pueden ampliar al hacer click; de forma que se abren en un div que tenía con display:none. El caso es que la imagen no se me carga al primer click, si no al segundo, como si tuviese que cargarla.

InKarC me respondió hace tiempo, pero no acabé de entender el método... tampoco lo explicó demasiado :S

paskuini · #9 (**permalink**) 22/06/2011, 02:46

paskuini · #10 (**permalink**) 23/06/2011, 06:52

empiezo a sentirme como un spammer... de verdad, ¿nadie puede ayudarme? creo que es la primera vez que me pasa esto en éste foro

paskuini · #11 (**permalink**) 27/06/2011, 02:26

pido por favor a los moderadores que borren mis ultimos mensajes, ya que no son mas que comentarios pidiendo una ayuda que no recibí y no sirven para mas que para complicar la búsqueda.

paskuini · #12 (**permalink**) 30/06/2011, 03:37

ya ni los moderadores leen los mensajes?... un poquito de ayuda, por favor....

paskuini · #13 (**permalink**) 01/07/2011, 01:17

7... ¡¡¡7!!!

caricatos · #14 (**permalink**) 01/07/2011, 01:36

Hola:

No estoy siguiendo el tema, pero veo que cuando creas el objeto Image, inmediatamente consultas su tamaño... y como te han comentado, seguramente no se conozca en ese momento ese dato.

La solución que te han dado es esperar que se cargue para averiguar ese tamaño.
Si no quieres pasar por ese paso, la alternativa es que esa imagen sea el fondo de una capa... pienso que serviría la misma donde la muestras, y para tu provecho, no necesitas hacer cálculos: backgroundPosition="center center"...

Saludos