Galeria de imagens

Créditos: Esta é uma versão adaptada de um código originalmente desenvolvido por Nathan Smith e esta sendo publicada com a devida permissão do autor

O grande barato da foto digital

Publicar e compartilhar fotos na Internet vem se tornando a cada dia uma prática cada vez mais comum e difundida.
Com a popularização da fotografia digital, a tomada de fotos viu-se da noite para o dia completamente livre dos fatores que freiavam seu uso irrestrito, notadamente a necessidade de revelar as fotos com todos os riscos, custos e incovenientes inerentes ao processo.

Meu netinho e minha netinha com menos de 3 anos de idade possuem cada um deles uma foteca com mais de 4.000 fotos. Uma quantidade infinitamente maior que o acêrvo de fotos colecionadas por seus pais e avós juntos durante toda a vida, em jurásicos “Álbuns de fotografias”.

O grande barato da foto digital, é o de não impor limites à quantidade de tomadas, ressalvados o tempo de carga das baterias e a capacidade das placas de memória, não havendo mais a necessidade de se munir de rolos e mais rolos de filmes de “12, 24 ou 36 poses” e tampouco se preocupar com preço e qualidade de revelação.
Tomar fotos digitais tem risco Zero e pode-se dizer que não há limites. A maioria dos bebezinhos com 1 mês de idade já tem uma fototeca respeitável para os padrões de alguns poucos anos atrás.

Galerias de fotos

Como consequência, uma das formas de armazenar e compartilhar fotos com amigos e familiares consiste na criação de galeria de imagens, onde avós e parentes no Brasil podem navegar e acompanhar o crescimento e evolução de netos e filhos na Inglaterra.
Blogueiros do mundo todo podem compartilhar imagens via Flicker, Morguefile e tantos outros sites especializados em imagens.

E, há ainda aqueles que preferem desenvolver suas próprias galerias usando tecnologias baseadas em scripts ou em flash.
E por que não baseadas em CSS?

Isso mesmo! galeria de fotos construidas com folhas de estilo em cascata, independentes de scripts e de plugins.

Esta matéria tem por objetivo mostrar os fundamentos de construção de uma galeria de imagens baseada em folhas de estilo em cascata.
Variações em torno do código mostrado, permitirão obter galerias com layout e funcionalidades completamente diferentes desta apresentada.

Quer ver o efeito final antes de continuar a ler ? Pois não! Eis a galeria explicada nesta matéria.

A espinha dorsal da galeria

O elemento HTML que irá sustentar a galeria é o elemento ul ou seja, nossa conhecida lista não ordenada. Cada item da lista será uma foto.
A escolha de uma lista para abrigar as fotos, permite acresentar fotos à galeria simplesmente adicionando-se mais um item <li>foto</li> à lista. Além disto você terá a opção de grupar o layout como fizemos nesta matéria ou linearizá-lo verticalmente em uma “tira” de fotos

Observe o código a seguir:

<ul class="hoverbox">
 
 <li>
   <a href="#">
     <img src="foto01.jpg" alt="descrição da foto" />
     <img src="foto01.jpg" alt="descrição da foto" class="preview" />
   </a>
 </li>

<li>
...
foto2
foto2
...
</li>
...
</ul>

Como funciona

Observe que em cada item li da lista colocaremos duas vezes a mesma foto usando dois elementos img dentro do item e que ao segundo elemento foi atribuida uma classe .preview
Uma foto vai ser a miniatura (thumbnail) e a outra, a foto ampliada que aparece quando o mouse passa em cima da miniatura.

Como o navegador Internet Explorer não suporta a pseudo-classe :hover em outro elemento que não seja uma âncora (ou link), as imagens foram enclausuradas dentro de um elemento a link morto <a href="#">.

Foi atribuida uma classe .hoverbox ao elemento ul para facilitar o posicionamento da galeria na página.

Para maiores detalhes copie e cole o código fonte da página que contém a galeria no seu editor HTML e faça suas mudanças e experimentos.
Coloquei alguns comentários no código fonte que irão orientá-lo nas adaptações.

Um desafio para você compartilhar

Que tal montar uma galeria com o seguinte layout:
No canto esquerdo da tela as miniaturas aparecem em uma coluna (na vertical como se fosse uma tira) e quando o usuário passa o mouse sobre a miniatura a foto ampliada aparece à direita da miniatura. Ver esquema a seguir:

Se você encontrar a solução hospede e mande o link ou envie via email para eu publicar e compartilharmos com os colegas leitores

[ATUALIZAÇÃO]

Em 2006-04-17: O Newton Horta usou o código da galeria no seu Blog para mostrar belas fotos de Fortaleza