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 .
|
ShareThis
Pode postar os arquivos completo ou me enviar por e-mail para que eu possa ver como vai ficar.
Porque depois não fica como eu queria então é perca de tempo
Parabéns pelo post!
Completando…
Vih que tem um exemplo de como vai ficar no primeiro post, mas a página não carrega, tem algum problema, pensei que pudesse ser navagador, mas testei Firefox e IE mas a imagem não carrega.
Obrigado!
Oi gisele.
Olha seria muito legal de sua parte se voce fizesse como alguns colunistas que postam os arquivos prontos, permitindo-nos ver como va ficar.
Oi gisele seu post esta muito bom, pena que eu trabalho com php rsrsrrs, sera que vc poderia por favor postar os arquivos completos para eu ver como fica e poder passar para php, vc esta explicando tudo certinho mais na hr de por as pastas to ficando meio confuso.
Desde já muito obrigado!!!
Estou esperando alguma resposta sua.