Galeria de imagens dinâmica com PHP, Spry e o Lightbox 2

Olá pessoal, como vão todos vocês? Espero que esteja tudo ótimo. Gostaria de solicitar a vocês sugestões para nossa coluna. O que seria interessante para discutirmos a respeito? Aguardo sua opinião. Envie ao meu e-mail, por favor.

Adobe Dreamweaver CS3

PHP5

Estive pensando em uma forma simples e prática de criar uma galeria de imagens dinâmica com o Spry . A idéia é relacionar todas as imagens de um diretório em um arquivo XML; e o máximo de trabalho que quero ter, é informar o diretório onde as imagens se encontram, somente.

Sendo assim, desenvolvi um script PHP onde preciso apenas alterar o valor de uma variável que contém o nome/caminho do diretório; que ele irá gerar o arquivo XML que será interpretado pelo Spry.

Neste artigo, trabalharemos com o script PHP que desenvolvi e utilizaremos o Spry para ler e interpretar o arquivo XML por ele gerado, resultando em uma lista não ordenada com a listagem das imagens. No próximo artigo, criaremos um arquivo CSS para estilizar a lista das imagens e integraremos o Lightbox 2 criado pelo Lokesh Dhakar.

Faça donwload do arquivo images-list-in-xml.php. Se desejar, baixe algumas imagens para utilizarmos como exemplo.

Abra o arquivo; na linha 8 você encontrará a seguinte variável:

$strDirectoryPath = 'fotos';

Ela é responsável em informar o diretório onde as imagens se encontram. No exemplo acima, o nome do diretório é fotos. Altere apenas isto.

Crie uma nova página que será responsável em listar as imagens. Com ela aberta, vamos utilizar o Spry XML Data Set que se localiza na aba Spry ou Data da Insert bar. Observe:

Localização do Spry XML Data Set na Insert bar

Podemos comparar o Spry XML Data Set com um Recordset. Em ambos, teremos a definição e o armazenamento dos dados com os quais trabalharemos. No Recordset, os dados ficam em um banco de dados e utilizamos o SQL para definir como esses dados serão resgatados. Já com o Spry XML Data Set, os dados ficam armazenados em um arquivo XML e utilizamos o XPATH para navegar sobre as informações nele contida.

Observe o vídeo explicativo abaixo que demonstra a configuração do Spry XML Data Set.

Uma vez que o Spry XML Data Set foi criado, podemos utilizar o Spry Repet List; com ele será criado uma lista não ordenada, onde exibiremos as imagens informadas no arquivo XML.

O Spry Repeat List localiza-se na aba Spry ou Data da Insert Bar. Veja:

Localização do Spry Repeat List na Insert bar.

A configuração do Spry Repeat List é super simples. Observe a imagem abaixo:

Exemplo de configuração do Spry Repeat List

Configuramos o Spry Repeat List da seguinte forma:

1. Container tag: selecionamos a opção UL (lista não ordenada);
2. Spry Data Set: selecionamos a opção ds1. Atente-se que ds1 é o nome do Spry XML Data Set que foi criado;
3. Display column: coluna que será exibida. Não se preocupe com ela, iremos alterar.

Como você pôde perceber, o Spry Repeat List simplifica a criação de listas utilizando um Spry XML Data Set. O único requisito para criar um Spry Repeat List é ter definido um Spry XML Data Set. Uma vez que o Spry Repeat List cria automaticamente um Spry Region e um Spry Repeat. Observe o código gerado:

Código HTML do Spry Repeat List

Como eu disse anteriormente, as imagens serão exibidas em uma lista não ordenada. O Spry Repeat List criou a lista e a estrutura necessária para o loop. Vamos alterar o código HTML criado para que dentro de cada item da lista, tenhamos uma imagem. Observe:

Inserção da tag IMG dentro do item da lista

Importante notar que o Dreamweaver CS3 cria Code Hints específicos para um Spry XML Data Set. Isto é, quando tenho um Spry XML Data Set definido na página e digito “{” (abre chaves) é exibido um Code Hints. O que facilita na digitação dos dados. Observe:

Code Hints para um Spry XML Data Set

Nota. Tal Code Hints somente será exibido, se a “{” (abre chaves) for digitado dentro de um Spry Region.

No próximo artigo, finalizaremos nossa galeria de imagens dinâmica estilizando-a. Até breve e um abraço a todos.