|
Gerar
conteúdo html dinamicamente usando linguagens como ASP e PHP (server-side)
juntamente com um banco de dados é relativamente fácil,
mas muitas vezes pode ser dispensada, como no caso do site da Courovale
(www.courovale.com.br)
onde há uma quantidade relativamente grande de imagens a serem
ampliadas, mas que um banco de dados só traria mais trabalho para
o desenvolvimento, então optou-se por uma solução
rápida e prática: JavaScript.
No
exemplo do site mencionado há dois tipos de janelas distintas,
uma na seção Empresa e outra na seção Produtos.
Neste tutorial, vou usar um exemplo baseado no script da seção
Empresa por este ser mais simples e flexível, pois as janelas da
outra seção são mais específicas e tem um
tamanho de imagem fixo, o que não ocorre com a maioria dos projetos
onde as imagens tem tamanhos variados.
O
primeiro passo é gerar um arquivo html que será o Master,
ou seja, definir o layout da janela pop up, temos que ter todas a imagens
que serão inseridas e uma imagem de exemplo para a janela. colocaremos
também uma função javascript para fechar a janela,
a tabela abaixo será o conteúdo deste arquivo-exemplo:
Agora
vamos entrar no código Javascript. Criaremos um arquivo texto em
branco e nele colocamos o código abaixo, atentando apenas para
a parte que está em negrito/itálico. Esta parte do código
marcada é o conteúdo do arquivo "master" apenas
modificado em algumas partes colocando-se variáveis nos lugares
onde se faz necessário.
Observe também que está se usando aspas
duplas e simples. Este detalhe é importantíssimo para o
javascript poder rodar. O que antes era aspas duplas no html fica
com aspas simples e as strings no javascript devem ser com aspas duplas.
Coloquei vários comentários para deixar bem claro o código:
function
centrar(foto,largura,altura,secao,descricao) {
// largura = largura da imagem passada por parâmetro
mais 4 (2+2)
// pixel de borda da tabela horizontalmente
largura = largura + 4
// largcel = largura menos largura do logotipo
usado
largcel = largura - 84
// altura = altura mais altura do logotipo mais
altura das
// bordas (4*2) da tabela verticalmente
altura = altura + 42 + 25 + 8
// posiciona a nova janela centralizada na tela
independentemente
// da resolução do usuário e do tamanho da janela
posx = (screen.width/2)-(largura/2)
posy = (screen.height/2)-(altura/2)
// configurações da janela
features="width=" + largura + " height="
+ altura + " top=" + posy + " left=" + posx
newin = window.open("","janela",features)
newin.blur()
// início da geração do
conteúdo html
var arquivo = ""+
"<html>" +
"<head>" +
"<title>" + secao + " - " + descricao +
"</title>" +
"</head>" +
"<body text='#000000' leftmargin='0' topmargin='0' bgcolor='#FFFFFF'>"
+
"<table width=" + largura + " border='0' cellspacing='2'
cellpadding='0' bordercolor='#FFFFFF'>" +
" <tr> " +
" <td width='80'><img src='logo_pf.gif' width='80' height='42'></td>"
+
" <td bgcolor='#FFA824' width=" + largcel + ">"
+
" <div align='center'><img src='" + secao + ".gif'
width='150' height='42'>" +
" </td>" +
" </tr>" +
" <tr> " +
" <td colspan='2'><img src='" + foto + ".jpg'></td>"
+
" </tr>" +
" <tr> " +
" <td colspan='2' bgcolor='#FFA824'>" +
" <div align='right'><a href='javascript:window.close()'>"
+
"<img src='btn_fechar.gif' border='0'></a></div>"
+
" </td>" +
" </tr>" +
"</table>" +
"</body>" +
"</html>"
// fim da geração do conteúdo
html
newin.document.open()
// imprime conteúdo gerado
newin.document.write(arquivo)
newin.document.close()
newin.focus()
} |
Bom
vamos agora salvar este arquivo texto com o nome melhor convier, apenas
vamos cuidar para salvar com a extensão .js, eu vou salvar como
"popup_dinamico.js", na tag HEAD do html que vai conter os links
para abrir as pop up é necessário inserir o link relativo
a este arquivo .js, no meu caso ficaria assim:
<script
language="javaScript" type="text/javascript" SRC="popup_dinamico.js"></script>
Veja
agora um exemplo de como usar o script:
javascript:centrar('popup_dinamico3',280,358,'popup_dinamico2','foto01')
clique na imagem para ampliar
Baixe aqui esse exemplo
|
