Foros del Web » Programando para Internet » Javascript »

'Galeria' de imágenes

Estas en el tema de 'Galeria' de imágenes en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/05/2011, 02:48
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 14 años, 8 meses
Puntos: 7
'Galeria' de imágenes

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 + "')";
}
  #2 (permalink)  
Antiguo 27/05/2011, 02:13
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 14 años, 8 meses
Puntos: 7
Respuesta: 'Galeria' de imágenes

vale
  #3 (permalink)  
Antiguo 27/05/2011, 08:29
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 14 años, 2 meses
Puntos: 45
Respuesta: 'Galeria' de imágenes

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.
  #4 (permalink)  
Antiguo 27/05/2011, 09:21
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 18 años, 4 meses
Puntos: 87
Respuesta: 'Galeria' de imágenes

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 original
  1. window.onload = function(){
  2. var pic=new Image();
  3. pic.src= document.getElementById("images2").src
  4. if(pic.complete) cargada(); else {pic.onload= cargada; pic.onError = cargada };
  5. }
  6.  
  7. function cargada(){
  8. //aqui va elcodigo cuando ya cargo la imagen
  9. }
  #5 (permalink)  
Antiguo 01/06/2011, 04:24
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 14 años, 8 meses
Puntos: 7
Respuesta: 'Galeria' de imágenes

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?
  #6 (permalink)  
Antiguo 01/06/2011, 21:52
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 18 años, 4 meses
Puntos: 87
Respuesta: 'Galeria' de imágenes

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.
  #7 (permalink)  
Antiguo 15/06/2011, 05:23
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 14 años, 8 meses
Puntos: 7
Respuesta: 'Galeria' de imágenes

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
  #8 (permalink)  
Antiguo 21/06/2011, 02:25
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 14 años, 8 meses
Puntos: 7
Respuesta: 'Galeria' de imágenes

Cita:
Iniciado por paskuini Ver Mensaje
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
  #9 (permalink)  
Antiguo 22/06/2011, 02:46
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 14 años, 8 meses
Puntos: 7
Respuesta: 'Galeria' de imágenes

  #10 (permalink)  
Antiguo 23/06/2011, 06:52
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 14 años, 8 meses
Puntos: 7
Respuesta: 'Galeria' de imágenes

empiezo a sentirme como un spammer... de verdad, ¿nadie puede ayudarme? creo que es la primera vez que me pasa esto en éste foro
  #11 (permalink)  
Antiguo 27/06/2011, 02:26
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 14 años, 8 meses
Puntos: 7
Respuesta: 'Galeria' de imágenes

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.
  #12 (permalink)  
Antiguo 30/06/2011, 03:37
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 14 años, 8 meses
Puntos: 7
Respuesta: 'Galeria' de imágenes

ya ni los moderadores leen los mensajes?... un poquito de ayuda, por favor....
  #13 (permalink)  
Antiguo 01/07/2011, 01:17
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 14 años, 8 meses
Puntos: 7
Respuesta: 'Galeria' de imágenes

7... ¡¡¡7!!!
  #14 (permalink)  
Antiguo 01/07/2011, 01:36
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: 'Galeria' de imágenes

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: visor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:44.