Galeria de fotos com CSS

Publicado em: 21/11/2006

Introdução

Neste tutorial mostrarei uma técnica de construção de uma galeria de imagens baseada em CSS. O funcionamento da galeria segue o padrão tradicional e consagrado de mostrar o conjunto de todas as fotos da galeria agrupado em forma de versões reduzidas, conhecidas como "thumbnails", que funcionam como uma espécie de gatilho para visualização da versão ampliada. Antes de prosseguir na leitura visite a página contendo a galeria em funcionamento.

A técnica utilizada

O princípio de funcionamento da galeria baseia-se em uma técnica desenvolvida pelo mestre Eric Meyer, denominada "Pure CSS Menu" que consiste em inserir um elemento SPAN dentro de um elemento LINK e manipular as propriedades display e position do elemento SPAN para obter o efeito de esconder/aparecer o conteúdo de SPAN.
No caso da galeria de fotos o elemento LINK contém o thumbnail e o elemento SPAN a foto em tamanho natural resultando em uma marcação conforme mostro a seguir:

<a href="#">
<img src="foto.jpg" alt="" /> <!-- thumbnail --> 
<span>
<img src="foto.jpg" alt=""  /> <!-- foto ampliada -->
</span> 
</a>

Você deve ter notado que ao passar o mouse sobre o thumbnail além de ser mostrada a foto ampliada, surge também uma legenda com breve descrição da foto. O texto da legenda está contido em outro elemento SPAN agora aninhado dentro do SPAN anterior, resultando na marcação típica para a galeria:

<a href="#">
<img src="foto.jpg" alt="" /> <!-- thumbnail --> 
<span>
<img src="foto.jpg" alt=""  /> <!-- foto ampliada -->
<span class="legenda">
Legenda da foto <!-- legenda --> 
</span>
</span>
</a>

As premissas de construção da galeria

Vamos projetar nossa construção levando em consideração que a galeria deverá:

1. conter um número de fotos limitado, com a finalidade de reduzir o tempo de carregamento da página e acomodar a galeria em resoluções de 800 x 600px — escolhi um total de 14 fotos por página;
2. para cumprir a condição acima dimensionei os thumbnails com 75 x 50px em duas colunas e as fotos com 500 x 375px — resultando uma largura total da galeria igual a 680px;
3. utilizar um conjunto único de fotos para os thumbnails e fotos ampliadas — reduzir via CSS a foto ampliada para obter o thumbnail;
4. mostrar fotos do recente evento InterCon 2006 realizado pelo iMasters

A estrutura da galeria

Optamos por uma página contendo:

1. um topo personalizável definido pela div#topo ocupando toda a largura da tela do usuário;
2. a div.galeria container para os thumbnails e a foto ampliada com largura total igual a 680px;
3. a div.img-aqui para as fotos ampliadas com largura igual a 500px;
4. a lista ul.fotos contendo os thumbnails com largura igual a 150px;
5. um rodapé personalizável definido pela div#rodape ocupando toda a largura da tela do usuário;;

A marcação estrutural é bem simples como você pode ver a seguir:

<div id="topo">
  <h1>iMasters etc...</h1>
  <h2>Galeria de fotos com CSS</h2>
</div>

<div class="galeria">
  <div class="img-aqui"></div>
  <ul class="fotos">
  ...
  </ul>
</div>

<div id="rodape"></div>

Construindo o layout

O topo e o rodapé:

Declaramos uma altura fixa, não declaramos largura com a finalidade de permitir que o topo se estenda por toda a tela do usuário e colocamos uma imagem de fundo. Para o topo empregamos a técnica conhecida como image replacement para esconder de navegadores gráficos o correspondente textual da imagem empregada.

O lista ul.fotos contendo os thumbnails em duas colunas:

Declaramos uma largura fixa para o elemento UL que é o container dos elementos LI.
Para obter-se duas colunas de elementos LI basta flutuar (por exemplo: à esquerda) estes elementos e forçar duas colunas declarando a largura fixa de UL igual a um valor que acomode a largura total de dois LI, forçando assim sempre o terceiro LI a se posicionar uma linha abaixo.
Estabelecemos uma largura de thumbnail igual a 75px, resultando em 2 * 75px = 150px a largura de dois LI. Adicionando as espessuras das bordas decorativas nos thumbnails chegamos a uma largura total para UL igual a 162px.
Você poderá em um primeiro momento declarar uma largura total para UL igual a um valor um pouco menor que 3 * 75px = 225px, digamos 220px pois este valor também forçará duas colunas e depois ir colocando bordas e margens a seu gosto e então fazer o cálculo final da largura total.

A seguir flutue UL à esquerda para posicionar as duas colunas de thumbnails à esquerda no layout e declare position relative para estabelecer uma base de posicionamento para as fotos ampliadas e para a legenda. Esconda os SPANS com display:none.

A div.img-aqui para mostrar as fotos ampliadas e a legenda:

Nesta DIV iremos fazer aparecer as fotos ampliadas. Para que não tenhamos uma área vazia quando a página for carregada colocamos uma imagem de fundo nesta DIV simulando uma capa de álbum de fotos. Esta imagem será coberta pela foto ampliada quando o usuário passear com o mouse sobre os thumbnails.

O Internet Explorer

O IE precisa de alguns "hacks" para fazer funcionar nossa galeria. Usei comentários condicionais para tal propósito e que podem ser vistos no código fonte da página da galeria. Para estudar o efeito de cada "hack" sugiro que você retire uma de cada vez as regras CSS do comentário condicional e visualize a galeria.

Palavras finais

Maujor! Mas esta galeria não pode ser adaptada às minhas necessidades.
Pode sim. Embora tenhamos utilizado um roteiro para a construção desta galeria que resultou em um layout com limitada flexibilidade, mostrei um resultado final bem próximo das necessidades práticas e reais para ser usada em uma galeria de fotos.
Contudo, com alguns conhecimentos CSS, é possível alterar tamanhos, quantidade e disposição dos thumbnails na página, bem como posicionamentos.
Leve em consideração prioritariamente o tempo de carregamento da página e a área útil (salvo casos particulares eu considero 800 x 600px e não esqueça da limitação de altura além da largura) disponível no navegador do usuário. Insira as adaptações para o seu caso.

Maujor! e se eu quiser mostrar 140 fotos e não 14 como na página do seu tutorial?
Gafanhoto! construa 10 páginas e insira em cada página uma navegação do tipo
«anterior   inicial   seguinte»

Maujor! a qualidade gráfica dos thumbnails é horrível. Há como construir os thumbnails com melhor resolução?
Há sim. Observe que usamos uma só imagem por foto mostrada. O thumbnail é uma redução via CSS da imagem original de 500 x 375px, tal redução resulta em uma resolução baixa quando renderizado o thumbnail. Se no seu caso você precisa melhorar a qualidade dos thumbnails, construa no seu editor gráfico a foto thumbnail com as dimensões reais (no caso 75 x 50px) e a resolução desejada e declare esta foto no SPAN do thumbnail no elemento LI do código.

As regras CSS para a galeria foram incorporadas à página da galeria. Assim, consulte o código fonte daquela página para ter acesso à marcação e às CSS. Bons estudos!