<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
<php ⁄><asp.net ⁄><vb.net ⁄><csharp ⁄><actionscript ⁄><sql ⁄>

<javascript ⁄><vb6 ⁄><vba ⁄><xml ⁄><css ⁄><asp ⁄>

 

<Construir galeria de imagens ⁄ >




clicks: 14728 14728 2006-11-04 2006-11-04 goto mySnippets mySnippets asp  Download  Bookmark This Bookmark This



Construir uma galeria de imagens em ASP não é uma tarefa complicada, tentarei demonstrar isso neste snippet.

Umas pequenas notas antes de começar:
- vamos partir do principio que não temos acesso a uma base de dados, nem a um ficheiro XML, nem a qualquer outro tipo de armazenamento de dados que nos possa indicar os ficheiros de imagens, ou seja, apenas teremos conhecimento quais as pastas em que se encontram os ficheiros;
- vamos também partir do principio que dentro dessas pastas apenas existem ficheiros de imagens válidas, sejam eles jpg, gif, png, etc.

Imaginemos um caso em que temos um conjunto de imagens relacionadas com um evento organizado pelo nosso cliente, o evento correu bem e agora o cliente deseja disponibilizar as imagens para que todos os convidados possam consultar e/ ou eventualmente mostrar a outros amigos e por aí adiante; ou até mesmo para portfolio da empresa; ...

Já temos as fotos todas tratadas e com moldura do cliente, watermarks e mais qualquer coisa que se lembrem e agora só falta partilhá-las com o resto do mundo. Devido à número elevado de fotos e as suas dimensões não é nada prático colocar as fotos no tamanho real (ou até mesmo redimensionadas) foi sugerido ao cliente que se crie umas imagens mais pequenas (thumbnails) que depois de clicadas irá abrir uma nova janela com a foto em tamanho "normal". Vamos supor que estes "thumbnails" possuem todos dimensões fixas (por ex: 125x94); ao passo que as imagens normais poderão ser de "qualquer tamanho".

Resumindo, temos de construir uma galeria de imagens e só sabemos as pastas onde se encontram os ficheiros.
Suponhamos que a estrutura de pastas e ficheiros se encontra da seguinte maneira:

- a pasta dos thumbnails:
_imagens_/thumb/1.jpg
_imagens_/thumb/2.jpg
_imagens_/thumb/qualquer_nome.jpg

- a pasta das imagens no tamanho normal:
_imagens_/normal/1.jpg
_imagens_/normal/2.jpg
_imagens_/normal/qualquer_nome.jpg

Partimos do principio que o nome das imagens está replicado igualmente pelas pastas, sendo este o caso "apenas" teremos de "vasculhar" as pastas e guardar o conteúdo do que está lá.

Enough talking! Let the code begin!

Vamos construir um CSS muito simples, nada de especial:
  1. #container{position: relative;margin: auto;width: 650px;padding: 0px;}
  2.  
  3. body{text-align: center;background-color: #FBCB81;}
  4.  
  5. .tblIn{padding: 0px;width:100%;}
  6. .tdCell{border-style: solid;border-width: 1px;border-color: #969696;text-align: center;}
  7. .noBorder{border: 0;}
  8.  
  9. img{border: 0;}
  10.  
  11. /* Page Numbers */
  12. .pages{
  13. padding: 0;margin: 0;clear: both;font-family: Verdana, Tahoma, Arial;
  14. font-size: 11px;color: #000000;background-color: #FBCB81;
  15. }
  16. .pages a, .pages span{
  17. display: block;float: left;padding: 0.2em 0.5em;border: 1px solid #F87213;background: #fff;
  18. }
  19. .pages span.current{border: 1px solid #F87213;background: #F87213;color: #fff;margin: 1px;}
  20. .pages a{border: 1px solid #F87213;color: #F87213;margin: 1px;}
  21. .pages a:hover{border-color: #F87213;background: #FBCB81;color: #fff;}
  22. .pages a.current{border: 1px solid #F87213;background: #F87213;color: #fff;}
  23. .pages a:visited{border: 1px solid #F87213;color: #F87213;}
  24.  



Vamos criar um ficheiro com o nome "funcoes.asp" que irá conter as funções necessárias para construir a galeria, este ficheiro será "chamado" pelo ficheiro responsável pela construção do html.
Como o nosso cliente tem muitas fotografias torna-se pouco praticável mostrar tudo na mesma página, para isso iremos construir uma barra de paginação, o número de fotos a mostrar por página é facilmente actualizável como poderão ver no código.
  1. <%
  2. navCurPage=Request.QueryString("navCurPage")
  3.  
  4. dim navPerPage,pathToPreviousFolder,numImgsPerRow
  5.  
  6. navPerPage =15
  7. pathToPreviousFolder ="_imagens_/evento/"
  8. numImgsPerRow =5
  9.  
  10.  
  11.  
  12. 'do you miss PHP ? ;-)
  13. function echo(str)
  14.     Response.Write(str)
  15. end function
  16.  
  17.  
  18. 'obter listagem dos ficheiros
  19. function ListContents(folderPath)
  20.     path=Server.MapPath(folderPath)
  21.     dim fs, item, files
  22.     set fs = CreateObject("Scripting.FileSystemObject")
  23.     set folder = fs.GetFolder(path)
  24.     for each item in folder.Files
  25.         if files<>"" then
  26.             files=files & ";" & item.Name
  27.        else
  28.             files=item.Name
  29.        end if
  30.     next
  31.    arrPics=Split(files,";") 
  32.  
  33.     ListContents=arrPics
  34. end function
  35.  
  36.  
  37. 'obter a barra de paginação
  38. function getNavBar(numPages,numCurPage)
  39.     dim strPaginacao,i
  40.  
  41.     if numCurPage=0 then numCurPage=1
  42.  
  43.     strPaginacao=strPaginacao & "<span class='current'>P&aacute;ginas</span> "
  44.     for i=1 to numPages
  45.         if i-numCurPage=0 then 'é a página actual, vamos colocar sem o link
  46.             strPaginacao=strPaginacao & "<span class='current' title='P&aacute;gina " & i & "'>" & i &"</span> "
  47.        else
  48.             strPaginacao=strPaginacao & "<a title='P&aacute;gina " & i & "' href='?navCurPage=" & i & "'>" & i & "</a> "
  49.        end if 
  50.     next
  51.  
  52.     getNavBar="<div class='pages'>" & strPaginacao & "</div>"
  53. end function
  54.  
  55.  
  56. 'obter a fotografia
  57. function getImageGallery(pathToPreviousFolder,imageName)
  58.     dim picTitle, linkImgNormal, linkImgThumb
  59.     picTitle= "any common title"
  60.     linkImgNormal=pathToPreviousFolder & "normal/" & imageName
  61.     linkImgThumb=pathToPreviousFolder & "thumb/" & imageName
  62.  
  63.     getImageGallery="<a href=""" & linkImgNormal & """ target='_blank'><img src='" & linkImgThumb & "' " _
  64.                                 & " width='125' height='94' alt='" & picTitle & "' title='" & picTitle & "' ></a>"
  65. end function
  66.  
  67. 'construir o output
  68. function outputContent()
  69.     dim strPics, arrPics, navStartAt, navEndAt, strRows, j
  70.  
  71.     navStartAt=navCurPage*navPerPage
  72.     navEndAt=navStartAt+navPerPage
  73. 	arrPics=ListContents(pathToPreviousFolder & "thumb/")
  74.  
  75. 	strRows="<tr><td class='tdCell noBorder' colspan='"& numImgsPerRow &"'>" _
  76. 	                & getNavBar(UBound(arrPics)/navPerPage,navCurPage) & "</td></tr>"
  77.  
  78. 	if navEndAt>UBound(arrPics) then
  79.         'o número superior é maior do que o tamanho do array, logo damos o valor max do array
  80. 	    navEndAt=UBound(arrPics)
  81. 	end if 
  82.  
  83. 	j=0
  84. 	for i=navStartAt to navEndAt
  85. 	    j=j+1
  86.         strPics=strPics & "<td class='tdCell'>" & getImageGallery(pathToPreviousFolder,arrPics(i)) & "</td>"
  87.  
  88.         if j=numImgsPerRow then 'ficam (numImgsPerRow) imagens por row
  89.             strRows=strRows & "<tr>" & strPics & "</tr>"
  90.             strPics=""
  91.             j=0
  92.         end if
  93.     next
  94.  
  95.     if (j>1) then 'saiu do ciclo sem fechar o row
  96.         strRows=strRows & "<tr>" & strPics & "</tr>"
  97.     end if
  98.  
  99.     outputContent="<table class='tblIn'>" & strRows & "</table>"
  100.  
  101. end function
  102.  
  103. %>




Por fim vamos construir o html, neste ficheiro iremos fazer o include do "funcoes.asp", poderá ser algo deste tipo:
  1. <!-- #include file ="funcoes.asp" -->
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.     <title>myASPGallery</title>
  7.     <link rel="Stylesheet" href="_css_/style.css" />
  8. </head>
  9. <body>
  10.     <div id="container">
  11.         <% echo outputContent() %>
  12.     </div>
  13. </body>
  14. </html>
  15.  



Quite easy!

Qualquer erro/ dúvida é só dizer!









clicks: 14728 14728 2006-11-04 2006-11-04 goto mySnippets mySnippets asp  Download  Bookmark This Bookmark This