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.





