Criar uma galeria de fotos

Como Fazer Um Site >> Criar um Site >> Criar uma galeria de fotos



Disponibilizo aqui uma galeria de fotos que eu próprio desenvolvi.


Veja aqui a DEMO da galeria de fotos.

Criei-a inicialmente para fazer um site de fotografias, mas tenho-a usado também sempre que quero adicionar uma página com fotos a algum site existente.

Trata-se de uma galeria de fotos muito simples, muito fácil de usar e configurar. Se a quiser usar no seu site basta colocar 3 arquivos no seu servidor juntamente com a pasta que contém as suas fotografias (veja a imagem). Apenas o arquivo index.html tem que ser editado fazendo nele algumas alterações muito simples.

Página principal

As fotografias são apresentadas na página principal (cujo ficheiro é o index.html) formando filas horizontais.
No código html do arquivo index.html vai encontrar o seguinte bloco de código:

<div class="mini">
<a href="#" onclick="javascript:see(this); return false;">
<img src="images/DSC4358.jpg"><br><span>Borboleta azul</span></a>
</div>

Para que apareça uma nova foto só tem que criar um novo bloco de código (só tem que o copiar e colar) e alterar o que está a vermelho, introduzindo o nome do arquivo e a legenda que quer que apareça abaixo da foto. Lembre-se que os arquivos das suas fotos têm que ser colocados na pasta "images".

Se quer remover uma foto, para que deixe de aparecer na sua galeria de fotos, basta apagar o bloco de código dessa foto.

Depois de criar um bloco de código para cada uma das suas fotos, ficará com uma sequência de blocos de código, listados de cima para baixo. As respectivas fotos vão surgir na página principal ordenadas ao longo de linhas horizontais, da esquerda para a direita.

Janela de visualização

Clicar numa das miniaturas da página principal faz com que se abra uma nova janela de visualização onde a foto aparece em tamanho aumentado. Esta janela não tem que ser editada. O seu conteúdo (foto e título) são gerados automaticamente a partir das informações que já introduziu na página principal. As páginas geradas automaticamente na janela de visualização são páginas novas, com título e tags "meta", pelo que poderão até ser indexadas pelos motores de busca.

A galeria é responsiva

Experimente aumentar ou diminuir a janela do seu browser. Verá que a galeria de fotos é responsiva ajustando automaticamente o número de miniaturas que é apresentada por cada linha horizontal em função da largura do browser.

Isto significa que a galeria de fotos está apta a ser acedida a partir de outros dispositivos tais como celulares, smartphones ou tablets.

Experimente também com a janela de visualização. Depois de esta se abrir no seu computador aumente ou diminua a janela e vai ver que o tamanho da foto se adapta. Portanto a visualização da foto expandida vai também adaptar-se à largura do dispositivo que o internauta estiver a usar.

Pode testar como a galeria de fotos responde a diferentes dispositivos colocando o endereço da DEMO (http://www.comofazerumsite.com/criarsite/galeria-de-fotos) na página "Testar resoluções de tela".

Algumas opções

  • Tamanho

    Tenho usado a galeria de fotos com miniaturas de 120x80 na página principal e com fotos com um tamanho original de cerca de 600x400. Mas caso pretenda usar outras dimensões poderá ajustar as suas preferências no ficheiro index.html numa secção destinada a esse efeito.


  • Copyright

    Nessa mesma secção poderá também definir uma mensagem de copyright para aparecer por baixo da foto na janela de visualização.


  • Miniaturas

    As miniaturas apresentadas na página principal não são verdadeiras miniaturas. São as fotos originais que são ali apresentadas num tamanho que é reduzido pelo browser. Isto pode fazer com que a página principal leve algum tempo a apresentar as imagens (este problema far-se-á sentir especialmente se você usar muitas fotos na página principal ou se o visitante do seu site tiver uma ligação de internet lenta).

    Se quiser melhorar o desempenho da página principal poderá usar miniaturas verdadeiras. Para isso use um editor de fotos para criar versões de tamanho reduzido de todas as suas fotos (reduza por exemplo todas as fotos de maneira que tenham 120px de largura). O Photoshop permite reduzir várias fotos ao mesmo tempo (se preferir um software gratuito também poderá fazê-lo com o Photoscape). Depois disso, você deve manter a pasta "images", mas deve criar uma outra pasta, por exemplo com o nome "miniaturas", e colocar nesta última pasta as miniaturas que criou. Por fim para que tudo funcione deve ir ao html da página index.html e alterar o endereço de todas as imagens de src="images/XXXXX.jpg"  para  src="miniaturas/XXXXX.jpg".


  • Organização das fotos por assuntos

    Se você tiver muitas fotos poderá ser interessante ter várias sub-galerias dentro da sua galeria principal.

    Imagine por exemplo que você é amante de animais. Em vez de apresentar cães, gatos, cavalos, etc, tudo "misturado" na mesma página principal, pode criar uma pasta para cada animal, uma para gatos, outra para cães, outra para cavalos, etc. Em cada uma dessas pastas você coloca então os 3 arquivos da galeria juntamente com a pasta das fotos de um dos animais.

    Poderá então usar o arquivo index.html para criar uma página principal onde o visitante pode visualizar as diferentes categorias (esta ficaria por exemplo instalada numa pasta com o nome "galeria-principal"). Assim, será apresentado apenas uma foto de um gato, uma foto de um cão, uma foto de um cavalo, etc (a pasta das fotos para essa página terá uma foto de um gato, uma foto de um cão, etc). Quando o visitante clicar numa dessas fotos em vez de se abrir a janela de visualização dessa foto deverá abrir-se em vez disso a sub-galeria correspondente a essa foto. Para fazer isso, no arquivo index.html da página principal o bloco de código de cada foto deverá ser alterado. Por exemplo no caso da foto do gato esse bloco de código seria alterado para:

    <div class="mini">
    <a href="http://www.SeuSite.com/galeria-principal/sub-galeria-gatos">
    <img src="images/XXXXX.jpg"><br><span>Gatos</span></a>
    </div>

Espero que esta galeria de fotos lhe permita criar um excelente espaço online com fotografias. Que possa ser tão útil para você como tem sido para mim.

Para fazer download use o link abaixo.

DEMO  |  DOWNLOAD

 



Registro de Dominio:
Namecheap.com

Domínios a preços acessíveis.
Inclui serviço de privacidade gratuito.

Hospedagem para seu site:

banner de afiliado

Eu próprio uso esta empresa
de hospedagem para alojar
os meus sites.

Criar Site Grátis:

Loja Virtual Grátis:

BLOG | FÓRUM | Política de Privacidade
Copyright © 2015 - ComoFazerUmSite.com
Design com Dreamweaver

.