Listando arquivos de um diretório em PHP

  

14/08/2009
Rodrigo Aramburu

Mostrei no meu último artigo como criar uma galeria de fotos utilizando JQuery e o plugin
PrettyPhoto, mas ele tinha um problema, ou melhor uma dificuldade, para adicionar uma nova foto
tínhamos que abrir o arquivo e acrescentar o código HTML para a nova foto. Para não termos esse
tipo e trabalho que inventaram a informática .
Vamos ver então um simples script que lê um determinado diretório e monta a tag HTML para a
imagem:
$dir = "fotos";
$d = opendir($dir);
$i = 0;

$nome = readdir($d);
while( $nome != false ){
if( !is_dir($nome) and ($nome != 'Thumbs.db') ){
$arquivos[$i] = $nome;
$i++;
}
$nome = readdir($d);
}
sort($arquivos);

foreach($arquivos as $arq){
echo '<img src="',$dir, " alt="" /> ';
}

Na linha 1 definimos o diretório que será lido e armazenamos em uma variável para facilitar a
manutenção do código, na linha 2 abrimos um manipulador de diretório com a função opendir() que
nos retorna um ponteiro para ser utilizado em funções posteriores.
Bom agora podemos percorrer o diretório, mas antes vamos iniciar um contador (linha 3) para
podermos armazenar em um array os nomes dos arquivos para poder entre outras coisas ordená-los.
Na linha 5 começamos a ler os arquivos e fazemos isso utilizando a função readdir() que retorna o
nome do próximo arquivo do diretório aberto com a função opendir. Na linha 6 entramos em um
laço que executa enquanto o nome do arquivo retornado pela função readdir() não for falso, ou seja
não tenha listado todos os arquivos do diretório.
Dentro do laço (linha 7) fazemos um teste, se o nome retornado não for um diretório ( com a função
is_dir()) e se o nome for diferente de “Thumbs.db”, aqueles arquivos chatos e miniaturas do
windows que as vezes upamos sem querer
Na linha 8 armazenamos o nome do arquivo no array e na linha 9 incrementamos nosso contador.
fora do if lemos o próximo arquivo do diretório para o teste do while.
Na linha 13 utilizamos a função sort() para ordenar nosso array onde estão armazenados os nomes
das imagens. Isto é muito útil principalmente se os nomes dos arquivos sejam seqüênciais e
correspondem também a uma miniatura em outro diretório como é o mais indicado caso queiram
utilizar esse script para criar uma galeria com o PrettyPhoto.
Agora basta juntar os nomes do arquivos do array com as tags para exibir as fotos como é feito na
linha 16, utilizando um foreach para percorrer array.
Este script facilita bastante a vida principalmente se s galerias criadas forem grandes ou precisar
adicionar fotos frequentemente, espero que tenham gostado quem quiser baixar o exemplo clique
aqui.

Construindo uma Galeria de Fotos com o plugin PrettyPhoto

do JQuery
  

30/06/2009
Rodrigo Aramburu

Algo que muitas pessoal tem me perguntado é como criar uma galeria de fotos bem legal. Uma que
estou utilizando muito, é feita com um plugin do JQuery chamada PrettyPhoto, ela utiliza um efeito
chamado lightbox, que é parecido com um POPUP, mas bem mais estiloso .
Bom para começar baixe o PrettyPhoto 2.4.3 e descomacte em uma pasta. Ele é divido em 3 pastas
css, js e images, para usalo você vai precisar das 3.
Crie um novo documento HTML e inclua na tag header a bilbioteca JQuery, o plugin que esta na
pasta js, a folha de estilo que esta na pasta css:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
1 <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-
2 8"></script>
3 <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css"
charset="utf-8" />
Agora para criarmos a nossa galeria vamos precisar das fotos e das suas miniaturas, para nosso
exemplo vamos armazena-la em uma pasta chamada img.
Para cada imagem vamos criar um link para imagem grande que quando clicado vai abri-la em
nossoo lightbox.
1 <a href="img/foto1-g.jpg" rel="prettyPhoto">
2    <img src="img/foto1-p.jpg" alt="Foto do Espaço 1" />
3 </a>
O atributo rel=”prettyPhoto” é utilizado para selecionar os links que devem fazer parte de nossa
galeria e para isso deve ser aplicado o plugin PrettyPhoto que será responsavel por abrir a imagem
que esta no atributo href de nosso link no lightbox.
Para aplicar o plugin nos links acrescentamos na tag header o seguinte código:
1 <script type="text/javascript" charset="utf-8">
2     $(document).ready(function(){
3         $("a[rel^='prettyPhoto']").prettyPhoto();
4     });
5 </script>
Exemplo de galeria feita com PrettyPhoto.
Bem simples não?
Existem muitos Plugins para JQuery com as mais variadas funções, então não tente reinventar a
roda todo dia, apenas procure uma que sirva no seu caminhão.
Aquele Abraço.