<Construir galeria de imagens ⁄ >

14084

2006-11-04

mySnippets asp

Download

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:

#container{position: relative;margin: auto;width: 650px;padding: 0px;}
 
body{text-align: center;background-color: #FBCB81;}
 
.tblIn{padding: 0px;width:100%;}
.tdCell{border-style: solid;border-width: 1px;border-color: #969696;text-align: center;}
.noBorder{border: 0;}
 
img{border: 0;}
 
/* Page Numbers */
.pages{
padding: 0;margin: 0;clear: both;font-family: Verdana, Tahoma, Arial;
font-size: 11px;color: #000000;background-color: #FBCB81;
}
.pages a, .pages span{
display: block;float: left;padding: 0.2em 0.5em;border: 1px solid #F87213;background: #fff;
}
.pages span.current{border: 1px solid #F87213;background: #F87213;color: #fff;margin: 1px;}
.pages a{border: 1px solid #F87213;color: #F87213;margin: 1px;}
.pages a:hover{border-color: #F87213;background: #FBCB81;color: #fff;}
.pages a.current{border: 1px solid #F87213;background: #F87213;color: #fff;}
.pages a:visited{border: 1px solid #F87213;color: #F87213;}

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.

<%
navCurPage=Request.QueryString("navCurPage")
 
dim navPerPage,pathToPreviousFolder,numImgsPerRow
 
navPerPage =15
pathToPreviousFolder ="_imagens_/evento/"
numImgsPerRow =5
 
 
 
'do you miss PHP ? ;-)
function echo(str)
    Response.Write(str)
end function
 
 
'obter listagem dos ficheiros
function ListContents(folderPath)
    path=Server.MapPath(folderPath)
    dim fs, item, files
    set fs = CreateObject("Scripting.FileSystemObject")
    set folder = fs.GetFolder(path)
    for each item in folder.Files
        if files<>"" then
            files=files & ";" & item.Name
       else
            files=item.Name
       end if
    next
   arrPics=Split(files,";") 
 
    ListContents=arrPics
end function
 
 
'obter a barra de paginação
function getNavBar(numPages,numCurPage)
    dim strPaginacao,i
 
    if numCurPage=0 then numCurPage=1
 
    strPaginacao=strPaginacao & "<span class='current'>P&aacute;ginas</span> "
    for i=1 to numPages
        if i-numCurPage=0 then 'é a página actual, vamos colocar sem o link
            strPaginacao=strPaginacao & "<span class='current' title='P&aacute;gina " & i & "'>" & i &"</span> "
       else
            strPaginacao=strPaginacao & "<a title='P&aacute;gina " & i & "' href='?navCurPage=" & i & "'>" & i & "</a> "
       end if 
    next
 
    getNavBar="<div class='pages'>" & strPaginacao & "</div>"
end function
 
 
'obter a fotografia
function getImageGallery(pathToPreviousFolder,imageName)
    dim picTitle, linkImgNormal, linkImgThumb
    picTitle= "any common title"
    linkImgNormal=pathToPreviousFolder & "normal/" & imageName
    linkImgThumb=pathToPreviousFolder & "thumb/" & imageName
 
    getImageGallery="<a href=""" & linkImgNormal & """ target='_blank'><img src='" & linkImgThumb & "' " _
                                & " width='125' height='94' alt='" & picTitle & "' title='" & picTitle & "' ></a>"
end function
 
'construir o output
function outputContent()
    dim strPics, arrPics, navStartAt, navEndAt, strRows, j
 
    navStartAt=navCurPage*navPerPage
    navEndAt=navStartAt+navPerPage
	arrPics=ListContents(pathToPreviousFolder & "thumb/")
 
	strRows="<tr><td class='tdCell noBorder' colspan='"& numImgsPerRow &"'>" _
	                & getNavBar(UBound(arrPics)/navPerPage,navCurPage) & "</td></tr>"
 
	if navEndAt>UBound(arrPics) then
        'o número superior é maior do que o tamanho do array, logo damos o valor max do array
	    navEndAt=UBound(arrPics)
	end if 
 
	j=0
	for i=navStartAt to navEndAt
	    j=j+1
        strPics=strPics & "<td class='tdCell'>" & getImageGallery(pathToPreviousFolder,arrPics(i)) & "</td>"
 
        if j=numImgsPerRow then 'ficam (numImgsPerRow) imagens por row
            strRows=strRows & "<tr>" & strPics & "</tr>"
            strPics=""
            j=0
        end if
    next
 
    if (j>1) then 'saiu do ciclo sem fechar o row
        strRows=strRows & "<tr>" & strPics & "</tr>"
    end if
 
    outputContent="<table class='tblIn'>" & strRows & "</table>"
 
end function
 
%>

Por fim vamos construir o html, neste ficheiro iremos fazer o include do "funcoes.asp", poderá ser algo deste tipo:

<!-- #include file ="funcoes.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>myASPGallery</title>
    <link rel="Stylesheet" href="_css_/style.css" />
</head>
<body>
    <div id="container">
        <% echo outputContent() %>
    </div>
</body>
</html>

Quite easy!

Qualquer erro/ dúvida é só dizer!

14084

2006-11-04

mySnippets asp

Download

Bookmark This