Vamos continuar com o exemplo relatado no artigo Pop-up DHTML para mostrar uma imagem. No artigo anterior havíamos criado um sistema para mostrar uma camada, na qual colocamos uma imagem. A camada sempre aparece na mesma posição absoluta da página, que não tem porquê ser a posição mais adequada. Neste artigo vamos aprender a posicionar a camada mais ou menos no centro do espaço da janela do navegador, para nos certificarmos que o visitante visualiza a camada em uma posição adequada.

O exercício, tal como realizamos, fica da seguinte maneira. Clique este link para ver o exemplo em uma página a parte.

Tal como havíamos programado no artigo anterior, a camada sempre sai no mesmo lugar. O problema é se a página for muito longa e devemos fazer um scroll para ver as partes que estiverem mais abaixo. Se baixarmos o scroll da página, poderá acontecer de não se ver a camada que acaba de se abrir e que o visitante não obtenha nenhuma resposta visível. Para entender o que quero dizer, por favor, entrar nesta página de testes.

Então, para prevenir que o usuário faça scroll na página, devemos calcular a posição da camada e atualiza-la antes de mostrá-la. O ideal é que a camada se coloque mais ou menos no centro da janela do navegador.

Para isso, mudamos um pouco o código da função que se encarrega de mostrar a imagem. Agora fazemos uso de uma série de funções de xLibrary que servem para conhecer o tamanho da janela do navegador e a posição do documento que pode variar se o usuário fizer scroll na página.

O código da função é o seguinte:

function mostra_imagem(arquivo,largura,altura){
  //xInnerHtml('c1','')
  xWidth ('ampliacao',largura + 6)
  xHeight ('ampliacao',altura + 6 + 20 + 18)
  xWidth ('c1',largura)
  xHeight ('c1',altura)
  xWidth ('fechaampliacao',largura)

  xInnerHtml('c1', '<img src="' + arquivo + '" width="' + largura + '" height="' + altura + '" border="0">')

  pos_left = parseInt((xClientWidth()-largura+3)/2)
  pos_top = xScrollTop() + parseInt((xClientHeight()-altura)/2)
  if (pos_top<10) pos_top=10
  xMoveTo('ampliacao',pos_left,pos_top)

  setTimeout("xShow('ampliacao')",50)
}

A função que mostra a imagem está parecida a como havíamos feito no exercício anterior. O único que muda é o pedaço de código onde se realiza a mudança da posição que deve levar a camada. Para isso, utilizam-se algumas funções que não havíamos visto:

• xClientWidth(): Calcula a largura da janela do navegador. Lembremos que a janela do navegador, se não está maximizada, não tem porquê ser igual de larga que a tela do usuário.
• xClientHeight(): Calcule a altura que tem (height) o espaço útil do navegador. Ou seja, o tamanho em pixels de altura da janela do navegador, sem contar com os menus, barras de botões, etc.
• xScrollTop(): que nos devolve o número de píxel que deslocou a página para baixo.

A posição da camada horizontalmente se calcula conhecendo a largura da janela do navegador, diminuindo a largura da página e dividindo por 2.

A posição da camada vertical é a soma da posição a qual se deslocou a janela com outro valor, que se obtém de diminuir ao tamanho da janela em vertical e a altura da imagem, dividido entre 2.

Em ocasiões havíamos detectado que a posição vertical da camada calculada fica com valores negativos. Por isso, antes de atualizar a posição da camada, se comprova se a posição calculada é menor que 10 e nesse caso, se fixa como 10 a posição vertical.

A posição da camada se atualiza com a função de xLibrary xMoveTo(), que recebe o nome da camada que se deseja mover e os novos valores absolutos de posição da camada, primeiro a posição desde o lado esquerdo e logo desde a parte de cima.

Um último detalhe que também mudamos com respeito ao exemplo anterior é que a camada agora se mostra com um atraso de 50 milésimos de segundos. Isto é feito assim porque senão, em alguns casos, se aprecia como se deslocava a camada à nova posição. Com este atraso, quando se mostra a camada, a posição já se encontra perfeitamente atualizada, portanto já aparece no lugar desejado.

Esperamos que estas mudanças possam tornar mais útil o script de mostra de imagens. Pode-se ver um exemplo do uso deste script em uma página a parte.

Este código foi utilizado em uma das páginas criadas pela equipe de CriarWeb.com. A página em concreto é Estilo y Moda e podemos ver o funcionamento do script nas páginas com artigos, que têm imagens e algumas se podem ampliar. Com a camada se mostram as ampliações.