Realizamos novas melhorias ao script de Popup DHTML para mostrar uma imagem, que vimos anteriormente. Este pop-up servia para mostrar uma imagem em uma camada a parte, de maneira similar aos pop-ups tradicionais. Em geral, os pop-up se mostram em uma nova janela do navegador, porém como agora quase todos os navegadores bloqueiam os pop-ups, não convém utiliza-los.

Já havíamos publicado outro artigo com melhoras para realizar um pop-up DHTML. Vale a pena ler previamente esse artigo, assim como o primeiro artigo que apresentamos na série do pop-up DHTML.

Neste caso, a melhora consiste em mostrar o pop-up com um scroll ou deslocamento da esquerda à direita. É um simples efeito de movimento que pode dar dinamismo à apresentação da imagem.

Antes de continuar, podemos ver o exemplo em funcionamento em uma página a parte.

Esclarecemos que há que baixar as bibliotecas atualizadas de Cross-Browser, pois as funções que vamos utilizar aqui foram modificadas. Anteriormente, havia um problema com a função xClientHeight() em Firefox, que nos devolvia o número de pixels do documento em vertical, ao invés do espaço disponível na janela do navegador, em vertical. Os exemplos que realizamos nos artigos anteriores de DHTML utilizavam as bibliotecas com este problema.

Ainda assim, vale comentar, para aqueles que quiserem implementar este exemplo, que pode utilizar diretamente o código que publicamos. Porém, se quiser fazer desde zero por si mesmo (muito melhor para aprender) necessitará conhecer as bibliotecas xLibrary, baixa-las e compilar o exemplo com xCompiler.

Explicação das mudanças ao pop-up DHTML, com respeito aos anteriores artigos

Fizemos poucas modificações no código do exemplo anterior. Simplesmente, foi criado uma função situar() que se encarrega de realizar o deslocamento da camada pop-up da esquerda à direita. Antes se mostrava diretamente a imagem na posição calculada, mas agora se coloca a imagem à esquerda e logo se desloca alterando sua posição. A posição vertical não muda, o único que muda é a posição horizontal.

As posições se armazenam em variáveis. Teremos três variáveis: 1) a posição vertical, que se armazena em "pos_top". 2) Posição horizontal de transição "pos_left_atual", que é a que se atualiza repetidas vezes para realizar o efeito de movimento. E 3) a posição horizontal final "pos_left", que é a que utilizamos para saber onde deter o efeito de movimento.

As posições iniciais se calculam com estas linhas de código:

// posição horizontal final
//se calcula conhecendo a largura da janela e da imagem
pos_left = parseInt((xClientWidth()-largura)/2)

//Posição horizontal de transição
//a principio a foto tem que ficar fora da página
pos_left_atual=-largura

//a altura onde colocar a imagem se calcula em dois casos
//1) se a imagem é mais alta que a altura disponível no navegador
//2) se a imagem cabe na janela do navegador
if (xClientHeight() < altura){
    pos_top = xScrollTop() + 10;
}else{
    pos_top = xScrollTop() + parseInt((xClientHeight() - altura - 20) / 2)
}

As funções xClientHeight() e xScrollTop() para o posicionamento da imagem foram explicadas no artigo anterior do pop-up DHTML.

Logo se realiza o movimento da camada à primeira posição atual, se chama à função situar(), que veremos logo, e se mostra a camada.

xMoveTo('ampliacao',pos_left_atual,pos_top)
situar()
xShow('ampliacao')

Função situar()

Esta é uma típica função para realizar um movimento com Javascript. Chama-se a si mesma e em cada chamada altera a posição da camada. As chamadas se fazem com um atraso para que não bloqueiem o navegador quando realizar o movimento.

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

A função primeiro comprova que a posição atual é inferior à posição onde tem que ficar a camada ao final. Se já está no final, não faz nada, com o qual se detém o movimento. Se a camada não estiver na posição final, realize estas ações:

1) Altere a variável pos_left_atual
2) Mova a camada à nova posição
3) Realize uma nova chamada à função situar, com um atraso de 10 milésimos de segundos.

Conclusão

Isto é tudo o que tínhamos que explicar desta atualização do pop-up DHTML. Esperamos que lhes pareça um efeito interessante e que não tenha sido muito complicado.

Podemos ver o exemplo em funcionamento em uma página a parte.