Galeria de fotos super simples usando apenas 1 arquivo PHP

Galeria de fotos super simples usando apenas 1 arquivo PHP

São inúmeras as situações em que um site ou blog precisa de uma galeria de fotos e nem sempre é possível encontrar uma solução prática e rápida para isso. A maioria dos sistemas de galeria de fotos necessita de edições no código fonte, configuração de frameworks javascript ou instalação de mega painéis de controle que são verdadeiros exageiros quando tudo o que se quer é apenas exibir 20, 30 fotos de maneira simples e rápida. Segue então uma solução extremamente simples e rápida que usa apenas 1 arquivo (isso mesmo, 1 arquivo) PHP.

A solução

Para desenvolver esse micro sistema de galeria de fotos vou usar uma função PHP muito útil, a Glob(). Essa função nos permite ter acesso às pastas do servidor e retornar listas de arquivos de acordo com o seu nome ou extensão. Então é isso que faremos, vamos exibir todas as imagens de uma pasta usando PHP. Salvaremos duas versões de cada foto, uma miniatura (thumbnail) e uma imagem maior, e usaremos a função Glob() para exibí-las corretamente. Ao final teremos uma galeria igual a essa:


Preparando as imagens

A primeira coisa a fazer é preparar e cortar as imagens nos formatos corretos. A galeria funcionará mesmo que cada imagem tenha um tamanho diferente, mas ficaria com aspecto horrível. Então o ideal é cortar todas no mesmo formato. Para esse exemplo cortei as thumbs em quadrados de 100px x 100px e as imagens maiores em 500px x 500px.

Crie uma pasta com nome “fotos_galeria” (ou outro nome que preferir) e salve todas as imagens dentro dela, nomeando as thumbs com um “_p” no final do nome do arquivo, exemplo: foto1_p.jpg; e as imagens maiores com um “_g” no final, exemplo: foto1_g.jpg.

Agora faça o upload da pasta para o seu servidor PHP. Sua URL vai ficar algo parecido com:
http://www.seudominio.com.br/fotos_galeria

Preparando o arquivo PHP

O arquvo PHP responsável pela criação da galeria é extremamente simples e está dividido em duas partes. A primeira parte é o o bloco de estilos CSS da página e o segundo o bloco da função PHP responsável pela lógica da galeria.

O trecho CSS
O CSS não precisa de nenhuma alteração a não ser claro que você queira alterar o visual da galeria. Veja abaixo:

<style>
body {
     text-align:center;
     margin:0;
     padding:0;
}
div {
     padding:13px;
     display:block;
     border:1px solid #ddd;
     background:#eee;
     font-size:10px;
     font-family:Arial, Helvetica, sans-serif;
     color:#999;
     margin:0 auto;
}
div.thumb {
     float:left;
     margin:0 14px 14px 0;
     padding:0;
}
div.thumb a {
     float:left;
     padding:13px;
}
div.thumb a:hover {
     background:#b70000;
}
div.thumb img {
     width:100px;
     height:100px;
}
div p {
     padding:8px 0 0px;
     margin:0;
}
div a {
     color:#666;
     text-transform:uppercase;
     text-decoration:none;
     font-weight:bold;
}
div a:hover {
     color:#b70000;
     text-decoration:underline
}
</style>

O trecho PHP
O trecho que contém o código PHP responsável pela montagem da galeria também não é complicado e precisa apenas de 2 pequenas modificações para que funcione corretamente no seu servidor. No início do bloco você deverá:
- Informar a URL onde o arquivo PHP estará publicado. No meu caso: http://www.toprated.com.br/galeria.php;
- Informar o nome da pasta onde estarão as imagens. No meu caso: fotos_galeria;
Confira o trecho completo já comentado e explicado linha a linha:


<?php

  //URL onde o arquivo PHP vai ficar
  $url_galeria = "http://www.toprated.com.br/galeria.php";

 //URL onde o arquivo PHP vai ficar
  $pasta_fotos = "fotos_galeria";

  //Início da função

  $fotos = array();

  //Loop que percorre a pasta das imagens e armazena o nome de todos os arquivos
  foreach(glob($pasta_fotos . '/{*_p.jpg,*_p.gif}', GLOB_BRACE) as $image) { 

  $fotos[] = $image;

  }

  //Verifica se deve exibir a lista ou uma foto
  if ($_GET["image"] == "") {

  //Faz o loop pelo folder de imagens
  for($i=0; $i < count($fotos); $i++) { 

  //Cria cada uma das thumbs dentro de uma <div> com link para a imagem grande
  echo "<div class='thumb'>";
  echo "<a href='" . $url_galeria . "?image=" . $i . "'>";
  echo "<img src='" . $fotos[$i] . "'>";
  echo "</a>";
  echo "</div>";

  }

 } else {

  //Guarda o nome da imagem para montar o link da imagem grande
  $foto_g = explode("_p", $fotos[$_GET["image"]]);

  //Configura os links de próxima e anterior
  if ( $_GET["image"] == 0 ) { $anterior = ""; } else { $anterior = $_GET["image"] - 1; }
  if ( $_GET["image"] == count($fotos)-1 ) { $proxima = ""; } else { $proxima = $_GET["image"] + 1; }

  //Quando solicitada uma imagem em particular, monta a <div> e insere a imagem grande de acordo com o link
  echo "<div>";
  echo "<a href='" . $url_galeria . "?image=" . $proxima . "'>";
  echo "<img src='" . $foto_g[0] . "_g" . $foto_g[1] . "'>";
  echo "</a>";
  echo "<p><a href='" . $url_galeria . "?image=" . $anterior . "'>Foto anterior</a> | <a href='" . $url_galeria . "'>Voltar para a galeria</a> | <a href='" . $url_galeria . "?image=" . $proxima . "'>Próxima foto</a></p>";
  echo "</div>";

  }

?>

Publique

Pronto, basta publicar seu arquivo e testar online. O resultado final deve ficar como este: http://www.toprated.com.br/galeria.php.
Se quiser inserir a galeria no meio de outra página como fiz acima, basta usar um iframe simples linkando para o seu arquivo, dessa forma:

<iframe frameborder="0" allowtransparency="yes" scrolling="no" src="http://www.toprated.com.br/galeria.php" width="710" height="570"></iframe>

Para facilitar a vida dos mais preguiçosos segue link para o pacote com os arquivos usados nesse exemplo, incluindo o arquivo PHP e as imagens. Aliás, todas as fotos são do site SHC.ru, um ótimo lugar para procurar imagens Royalty Free.

Como eu disse, o intuito dessa micro galeria de fotos é ser o mais simples possível, portanto é óbvio que ela pode ser melhorada, e muito. Você pode adicionar ícones à navegação de próxima e anterior, por exemplo. Mas acredito que é uma boa opção para quem está procurando uma solução rápida e fácil para a partir dela criar a sua própria galeria de fotos. Espero que ajude.
Uma última dica: Se pretende usar esse arquivo em várias galerias diferentes dentro do seu site, é extremamente recomendável que você separe o CSS, crie uma folha de estilos individual e a use como um link na página para que suas alterações reflitam em todas as galerias simultanemante.



Você gostou deste post?

  • http://www.gemellaro.com.br Alexandre Gemellaro

    Realmente muito simples e extremamente funcional!

    Vlw pela tuto! ;)

  • http://Seuwebsite Onélio

    Ótimo código.

    Tudo está bem explicado.

    Prático e simples… Parabéns!

  • http://newromantic.net Evelyn

    Essa ferramenta é ótima pra quem gosta de postar muitas fotos como eu! Só não é muito prática porque o corte das fotos tem que ser feito manualmente né?

  • http://www.bebesbrasil.com.br LucasRsillva

    Boaa!
    Valeu!

  • http://Seuwebsite Fabio R Machado

    Acontece este erro:
    Notice: Undefined index: image in

    Na linha:
    //Verifica se deve exibir a lista ou uma foto
    if ($_GET["image"] == “”) {
    Como resolver?

  • http://Seuwebsite Junior Sobral

    mesma bronca do fabio

    Notice: Undefined index: image in
    Na linha:
    //Verifica se deve exibir a lista ou uma foto
    if ($_GET["image"] == “”) {

  • http://Artepana Pana

    Perfeeeeeito!!

    Fiquei atrás de galerias, por vários dias, e até então todas eram muito complicadas, essa sem dúvidas, é perfeita, simples e prática!!!

    Valeu mesmo…

  • http://Seuwebsite Rafael

    Bom dia a todos, gostei bastante da galeria, e gostaria de dar uma sugestão, porque você não cria uma maneira para a galeria redimensionar as imagens automaticamente ? tipo o próprio código criaria as thumbnails e as imagens grandes (com seus tamanhos e tudo).

  • http://Seuwebsite rodrigo

    mesma bronca do fabio

    Notice: Undefined index: image in
    Na linha:
    //Verifica se deve exibir a lista ou uma foto
    if ($_GET["image"] == “”) {

  • http://www.iolardemartini.com.br Iolar Demartini

    Parabéns cara, adorei esta galeria muito simples e facil de usar.

    Abraço.

  • michela

    Gostaria de colocar um botão like embaixo de cada foto, para curtir só a que eu gostei. alguem sabe como fazer isso? obrigada

  • Silfsantiago

    ei, costei muito kkkkkk

  • http://pulse.yahoo.com/_RWXM56DXAB4GRMZ4VZVCT4WZWE Marcos

    Utilizo e muito esse teu tutorial, excelente viu!
    Gostaria de saber se tem algum parametro para que mostre junto dos Thumbs o nome do arquivo com uma fonte 1 ou 2 bem pequeno mesmo!
    Obrigado e parabéns!

  • http://twitter.com/_marcoscampos Marcos Campos

    olá, primeiro parabéns e obrigado por disponibilizar essa excelente ferramento, valeu mesmo.
    Gostaria de saber a linha de comando para que junto das fotos de thumbs “as pequenas” apreceça o nome do arquivo logo abaixo de cada uma com uma fonte bem pequena.
    Se for possível.

    Obrigado mais uma vez. abraço.

  • rafael

    Acho que se você adicionar o código do “like” na página que exibe as imagens em tamanhos grandes vai dar certo…

  • http://www.siteparaempresas.com.br/blog/?p=74 Galeria de fotos super simples usando apenas 1 arquivo PHP | Site para Empresas

    [...] O trecho CSS O CSS não precisa de nenhuma alteração a não ser claro que você queira alterar o visual da galeria. Veja abaixo: view source [...]

  • Luknhas_123

    cara funfo perfeito  aqui, queria saber se vc tem alguma dica para colocar comentario nas fotos do facebook to quebrando a cabeça e nao ta indo so consigo por o msm para tds as fotos, queria por fotos um caixa de comentario

  • Luknhas_123

    Mais como coloca pra exibir? echo….?

  • http://www.facebook.com/profile.php?id=1298827251 Anne Caroline

    Notice: Undefined index: image in
    Na linha:
    //Verifica se deve exibir a lista ou uma foto
    if ($_GET["image"] == “”) {

    Mesmo Erro D:
    Porque aparece isso? :S

  • David

    parabens pela iniciativa e tbm pelo belo trabalho…
    muito bom

  • john

    o que devo colocar nesse comando aqui if ($_GET["image"] == “aqui”) {    ?????

  • Luciano Riedi

    Três vivas para o Mestre Domênico!!! Muito raramente faço comentários nos sites ou blogs que eu acesso. Mas, meu amigo, essa sua galeria de fotos em PHP é simplesmente a melhor opção que encontrei para resolver os meus problemas. E, mesmo correndo o risco de ser repetitivo, parabéns e muito obrigado!

    Luciano Riedi – RS

  • Suporte

    Uma pequena ajuda…

    Como altero o código para que ao clicar na miniatura ela mesma seja ampliada?
    GratoGardel

  • Diogo Kogut

    com link para a imagem grande echo “”; echo “”; ECHO “”; ECHO “”; echo ”
    “; } } else { //Guarda o nome da imagem para montar o link da imagem grande $foto_g = explode(“_p”, $fotos[$_GET["image"]]); //Configura os links de próxima e anterior if ( $_GET["image"] == 0 ) { $anterior = “”; } else { $anterior = $_GET["image"] – 1; } if ( $_GET["image"] == count($fotos)-1 ) { $proxima = “”; } else { $proxima = $_GET["image"] + 1; } //Quando solicitada uma imagem em particular, monta ae insere a imagem grande de acordo com o link echo “”; echo “”; ECHO “”; ECHO “”; echo “FOTO ANTERIOR | VOLTAR PARA A GALERIA | PRÓXIMA FOTO
    “; echo “”; } ?>

    Esta dando esse erro!!!

    Me ajudem!!!

    Abraço