Hemos realizado nuevas mejoras al script de Popup DHTML para mostrar una imagen, que vimos anteriormente. Este popup servía para mostrar una imagen en una capa aparte, de manera similar a los popups tracionales. En general los popup se muestran en una nueva ventana del navegador, pero como ahora casi todos los navegadores bloquean los popups, no conviene utilizarlos.

Ya habíamos publicado otro artículo con mejoras para realizar un popup DHTML. Merece la pena leer previamente ese artículo, así como el primer artículo que presentamos en la serie del popup DHTML.

En este caso, la mejora consiste en mostrar el popup con un scroll o desplazamiento de izquierda a derecha. Es un sencillo efecto de movimiento que puede dar dinamismo a la presentación de la imagen.

Antes de continuar, podemos ver el ejemplo en marcha en una página aparte.

Aclararemos que hay que descargarse las librerías actualizadas de Cross-Browser, pues las funciones que vamos a utilizar aquí han sido modificadas. Anteriormente había un problema con la función xClientHeight() en Firefox, que nos devolvía el número de píxeles del documento en vertical, en lugar del espacio disponible en la ventana del navegador, en vertical. Los ejemplos que hemos realizado en los anteriores artículos del popot DHTML utilizaban las librerías con este problema.

Así mismo comentar, para el que quiera implementar este ejemplo, que puede utilizar directamente el código que hemos publicado. Pero si quiere hacerlo desde cero por si mismo (mucho mejor para aprender) necesitará conocer las librerías xLibrary, descargarlas y compilar el ejemplo con xCompiler.

Explicación de los cambios al popup DHTML, con respecto a anteriores artículos

Hemos hecho pocas modificaciones al código del ejemplo anterior. Simplemente se ha creado una función situar() que se encarga de realizar el desplazamiento de la capa popup de izquierda a derecha. Antes se mostraba directamente la imagen en la posición calculada, pero ahora se coloca la imagen a la izquierda y luego se desplaza alterando su posición. La posición vertical no cambia, lo único que cambia es la posición horizontal.

Las posiciones se almacenan en variables. Tendremos tres variables: 1) la posición vertical, que se almacena en "pos_top". 2) Posición horizontal de transición "pos_left_actual", que es la que se actualiza repetidas veces para realizar el efecto de movimiento. Y 3) la posición horizontal final "pos_left", que es la que utilizamos para saber dónde detener el efecto de movimiento.

Las posiciones iniciales se calculan con estas líneas de código:

// posición horizontal final
//se calcula conociendo el ancho de la ventana y de la imagen
pos_left = parseInt((xClientWidth()-ancho)/2)

//Posición horizontal de transición
//al principio la foto tiene que quedar fuera de la página
pos_left_actual=-ancho

//la altura donde colocar la imagen se calcula en dos casos
//1) si la imagen es más alta que el alto disponible en el navegador
//2) si la imagen cabe en la ventana del navedador
if (xClientHeight() < alto){
    pos_top = xScrollTop() + 10;
}else{
    pos_top = xScrollTop() + parseInt((xClientHeight() - alto - 20) / 2)
}

Las funciones xClientHeight() y xScrollTop() para el posicionamiento de la imagen fueron explicadas en el artículo anterior del popup DHTML.

Luego se realiza el movimiento de la capa a la primera posición actual, se llama a la función situar(), que veremos luego, y se muestra la capa.

xMoveTo('ampliacion',pos_left_actual,pos_top)
situar()
xShow('ampliacion')

Función situar()

Esta es una típica función para realizar un movimiento con Javascript. Se llama a si misma y en cada llamada altera la posición de la capa. Las llamadas las hace con un retardo para que no bloquee el navegador cuando realice el movimiento.

function situar(){
    if (pos_left_actual < pos_left){
       pos_left_actual += 20
       xMoveTo('ampliacion', pos_left_actual,pos_top);
       setTimeout ('situar()',10)
    }
}

La función primero comprueba que la posición actual es inferior a la posición donde se tiene que quedar la capa al final. Si ya está al final, no hace nada, con lo que se detiene el movimiento. Si la capa no está en la posición final, realiza estas acciones:

1) Altera la variable pos_left_actual
2) Mueve la capa a la nueva posición
3) Realiza una nueva llamada a la función situar, con un retardo de 10 milisegundos.

Conclusión

Esto es todo lo que teníamos que explicar de esta actualización del popup DHTML. Esperamos que os parezca un efecto interesante y no haya resultado demasiado complicado.

Podemos ver el ejemplo en marcha en una página aparte.