Galeria de fotos super simples usando apenas 1 arquivo PHP

0
4 Flares 4 Flares ×

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:

01.<style>
02.body {
03.     text-align:center;
04.     margin:0;
05.     padding:0;
06.}
07.div {
08.     padding:13px;
09.     display:block;
10.     border:1px solid #ddd;
11.     background:#eee;
12.     font-size:10px;
13.     font-family:Arial, Helvetica, sans-serif;
14.     color:#999;
15.     margin:0 auto;
16.}
17.div.thumb {
18.     float:left;
19.     margin:0 14px 14px 0;
20.     padding:0;
21.}
22.div.thumb a {
23.     float:left;
24.     padding:13px;
25.}
26.div.thumb a:hover {
27.     background:#b70000;
28.}
29.div.thumb img {
30.     width:100px;
31.     height:100px;
32.}
33.div p {
34.     padding:8px 0 0px;
35.     margin:0;
36.}
37.div a {
38.     color:#666;
39.     text-transform:uppercase;
40.     text-decoration:none;
41.     font-weight:bold;
42.}
43.div a:hover {
44.     color:#b70000;
45.     text-decoration:underline
46.}
47.</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:

01.<?php
02. 
03.  //URL onde o arquivo PHP vai ficar
04.  $url_galeria = "http://www.toprated.com.br/galeria.php";
05. 
06. //URL onde o arquivo PHP vai ficar
07.  $pasta_fotos = "fotos_galeria";
08. 
09.  //Início da função
10. 
11.  $fotos = array();
12. 
13.  //Loop que percorre a pasta das imagens e armazena o nome de todos os arquivos
14.  foreach(glob($pasta_fotos . '/{*_p.jpg,*_p.gif}', GLOB_BRACE) as $image) { 
15. 
16.  $fotos[] = $image;
17. 
18.  }
19. 
20.  //Verifica se deve exibir a lista ou uma foto
21.  if ($_GET["image"] == "") {
22. 
23.  //Faz o loop pelo folder de imagens
24.  for($i=0; $i < count($fotos); $i++) { 
25. 
26.  //Cria cada uma das thumbs dentro de uma <div> com link para a imagem grande
27.  echo "<div class='thumb'>";
28.  echo "<a href='" . $url_galeria . "?image=" . $i . "'>";
29.  echo "<img src='" . $fotos[$i] . "'>";
30.  echo "</a>";
31.  echo "</div>";
32. 
33.  }
34. 
35. } else {
36. 
37.  //Guarda o nome da imagem para montar o link da imagem grande
38.  $foto_g = explode("_p", $fotos[$_GET["image"]]);
39. 
40.  //Configura os links de próxima e anterior
41.  if ( $_GET["image"] == 0 ) { $anterior = ""; } else { $anterior = $_GET["image"] - 1; }
42.  if ( $_GET["image"] == count($fotos)-1 ) { $proxima = ""; } else { $proxima = $_GET["image"] + 1; }
43. 
44.  //Quando solicitada uma imagem em particular, monta a <div> e insere a imagem grande de acordo com o link
45.  echo "<div>";
46.  echo "<a href='" . $url_galeria . "?image=" . $proxima . "'>";
47.  echo "<img src='" . $foto_g[0] . "_g" . $foto_g[1] . "'>";
48.  echo "</a>";
49.  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>";
50.  echo "</div>";
51. 
52.  }
53. 
54.?>

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:

1.<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.

4 Flares Twitter 0 Facebook 0 Google+ 4 4 Flares ×

Deixe seu comentário sobre esté Post do Blog

Comente a Publicação