GALERIA DE IMAGENS NO DREAMWEAVER – ParteII
Introdução
Olá a todos,
No primeiro tutorial vimos como criar uma galeria de imagens pelo Dreamweaver e como editar várias imagens de uma vez.
Nesse tutorial vamos ver como criar a galeria de uma forma que não seja necessário linkar imagem por imagem.
Vamos estar usando ASP, mas pra quem usa PHP não sentirá dificuldade de ajustar o código para tal linguagem, pois o código é bem simples!
Pré-Requisitos
Macromedia Dreamweaver e uma noção de ASP (Recomendo a todos que façam o primeiro tutorial).
Objetivo
Facilitar a criação da galeria de imagens vista no primeiro tutorial.
Conteúdo
No primeiro tutorial pra que nossa galeria funcionasse, tínhamos que adicionar a imagem pequena e linka-la com a grande. Isso não é cansativo quando falamos de 5 ou 6 fotos, mas e quando temos 100 fotos? Imaginem o tempo que isso tomaria de nós! Graças a Deus isso não é necessário! A programação nos salva desse cansaço.
Mãos a obra!
Abra o arquivo que você criou no primeiro tutorial e vamos fazer alterações nele. Seu código deve ficar igual o código a seguir:
<html>
<head>
<title>Galeria de Fotos</title>
<%
// Aqui está dando um request nas variáveis total, caminho e caminho2 para capturar o valor dessas váriáveis que são atribuidos no próprio link
total = request(”total”) // variável que irá armazenar o númerio de fotos que há na página
caminho= request(”caminho”) //variável que irá armazenar o caminho na imagem ampliada
caminho2=request(”caminho”) //variável que irá armazenar o caminho na imagem pequena
img = 1 //aqui atribuimos a variável img o valor 1 (para que a imagem não seja contada a partir do 0 (zero)
%>
<!– Funções em javascript que fazem com que ao passar o mouse eu uma imagem apareça ela ampliada (Não é necessário mexer nessas funções) –>
<script language=”JavaScript” type=”text/JavaScript”>
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(”?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName==”Netscape”)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(”#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//–>
</script>
<!– Fim das funções –>
</head>
<!–No Body chamamos a função MM_preloadImages –>
<body onLoad=”MM_preloadImages(”,”,”,”,”,”,”,”,”)”>
<table>
<tr>
<td>
<!– Imagem que aparecerá quando o mouse não estiver por cima de nenhuma imagem –>
<img src=”imagens/padrao.jpg” alt=”" name=”imagem_base” width=”350″ height=”247″ id=”imagem_base”>
</td>
</tr>
<table>
<%
// Conta quantos arquivos contém na pasta
set FSYS = Server.CreateObject(”Scripting.FileSystemObject”)
// Declara as variáveis i, img
dim i, img
i = 1 // recebe valor inicial igual a 1 (nossas imagem terão que ter o nome img1.jpg, img2.jpg e assim por diante.
img=+”img” + CStr(i) // aqui concatena dois valores img + a variável i.
nomepastaarqjpg= server.MapPath(”./imagens”) &”\” & img & “.jpg” // ele atribui a nomepastaarqjpg os caminhos das imagens ./imagens é o nome da pasta que estou armazenando as fotos,mais a variável img que estamos declarando acima e a extenção da imagem que é .jpg
while FSYS.FileExists(nomepastaarqjpg) //enquanto existir o caminho que é atribuido em nomepastaarqjpg ele irá criar esses caminhos.
i=i+1
img=+”img” + CStr(i)
nomepastaarqjpg= server.MapPath(”./imagens”) &”\” & img & “.jpg”
wend
%>
<% // Aqui verifica se sobra é vazio (sempre vai ser na primeira página, pois o valor dessa variável só é atribuida se tiver um número de fotos maior que nosso limite por página.
// Se essa condição for verdadeira então:
if request(”sobra”)=”" then
img = 1 // img recebe um valor inicial igual a 1
sobra = i //sobra recebe o valor igual a i (que seria o total de imagem que tem em nossa pasta)
limit = 90 // e aqui atribuimos um limite de 90 fotos por página, caso queira mais fotos ou menos lembre-se que terá de alterar em outras partes desse código.
else
// Se sobra não for vazia (isso quer dizer que o número de imagens dentro da pasta é maior que 90) então:
if request(”sobra”)<>”" then
sobra = request(”sobra”) // dá um request em sobra pra saber o valor total dessa variável.
sobra = sobra – 90 // e subtrai pelo nosso limite de fotos por página.
end if
limit = 90 // declaramos novamente que limit é igual a 90.
//Aqui estamos falando que nossa galeria terá 4 páginas (Suponha que nossa pasta tem 340 fotos e nosso limite é de 90 fotos por página, logo nossa galeria terá 4 páginas)
//Essa variável n é chamada em um link mais abaixo, quando formos definir a paginação da galeria.
if request(”n”) <= 4 then
n=request(”n”) //Dá um request na variável n pra saber seu valor
img = 90*n+1 //Aqui uma conta para atribuir o valor exato das imagens para que elas não comecem sempre na img1.jpg (Pega o limit e multiplica pelo valor de n+1.
end if
end if
%>
<!–Dá um request nas variáveis caminho e caminho2 –>
<% caminho= request(”caminho”) %>
<% caminho2= request(”caminho”)%>
<!–Se n for igual a 4 (esse numero tem que ser alterado de acordo com o numero de páginas que sua galeria terá)–>
<% if request(”n”) = 4 then
limit = 70 // limite igual 70 (esse valor é referente ao exemplo que citei acima, caso nossa galeria tenha 340 imagens, quando chegar na quarta página só terá 70 fotos pra preencher, se o limite continuasse 90 as 20 que faltaria pra completar esse valor, ficaria com link quebrado)
end if
%>
<tr>
<!–Para i=1 até o limit que recebe o valor de acordo com as verificações acima ele irá contruir nossa galeria –>
<%for i=1 to limit step 1 %>
<!– Faz a concatenação das variaveis para mostrar o caminho que ele deve criar para cada imagem, tanto a pequena como a grande –>
<% caminho = + caminho + “/” + “img”+ CStr(img) + “_peq.jpg”
%>
<% caminho2 = + caminho2 + “/” + “img”+ CStr(img) + “.jpg” %>
<!– A partir daqui ele cria a galeria, repare que antigamente nessa linha aparecia o caminho de cada imagem, agora substituimos pelas variáveis que definimos acima –>
<td><a href=”javascript:;” onMouseOver=”MM_swapImage(’imagem_base’,”,’<%=caminho2%>’,1)” onMouseOut=”MM_swapImgRestore()”><img src=”<%=caminho%>”></a></td>
<!– O Contador define quantas colunas terá a tabela –>
<%contador = contador+1%>
<%if contador = 15 then %>
<tr></tr>
<%contador = 0%>
<%end if%>
<% caminho= request(”caminho”) %>
<% caminho2= request(”caminho”) %>
<%img=img+1%>
<%next%></tr>
</table>
</td>
</tr>
<tr>
<td >
<!– Aqui cria o “Próximo” e o “Voltar” caso o número de imagens for maior que o limite que você colocou por página, lembre de alterar na linha abaixo o limite caso seu limite não seja 90 –>
<%if request(”limit”) <>”" AND request(”n”)>0 then %>
<a href=”index.asp?limit=90&caminho=<%=caminho%>&total=<%=total%>&n=<%=n-1%>&sobra=<%=sobra%>”>VOLTAR</a>
<%end if%>
<%if request(”n”)<= 2 then %>
<a href=”index.asp?limit=90&sobra=<%=sobra%>&caminho=<%=caminho%>&total=<%=total%>&n=<%=n+1%>”>PRÓXIMO</a>
<%end if%>
</td>
</tr>
</table>
</body>
</html>
Por fim, no link que chamará a imagem você irá atribuir o caminho ( o nome da pasta onde está armazenada as imagens) e o total (quantas imagens há na pasta). Exemplo:
<a href=”index.asp?caminho=images&total=340″>LINK</a>
Considerações Finais
Espero que tenham gostado.
Qualquer dúvida fiquem a vontade em me escrever.
Gostaria que me escrevessem com sugestões para próximos tutoriais. Assim vejo qual a maior dificuldade do pessoal em relação ao Dreamweaver 
Abraços!
Autor: Gisele C. Negreiros – Colunista do Portal MXSTUDIO
Qualquer dúvida envie um email para gisele@mxstudio.com.br ou acesse o nosso fórum .
|
