Melhorando o pop-up DHTML para mostrar uma imagem

Centralizamos uma camada onde se mostra uma imagem, para que fique mais ou menos no meio do espaço da janela do navegador.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 05/9/07
Valorize este artigo:
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.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato