Galeria de Fotos PHP + Flash + XML

  • Autor do post:
  • Categoria do post:PHP DEV

Lendo um diretório com PHP, gerando um XML contendo o nome das fotos e exibindo com Flash.

A galeria consiste em uma animação Flash que lê um arquivo XML contendo o caminho e nome das fotos, então imaginei que poderíamos criar uma pequena rotina em PHP que fosse capaz de ler um diretório recuperar o nome dos arquivos de fotos e a partir disso gerar um XML com os dados. Isso nos faz evitar  ter que editar o XML a cada foto nova, assim, basta jogar a foto dentro do diretório e pronto.

Vejam os prints da Galeria, não acho que seja algo para um sistema, mas ficaria muito bacana em um site.

 

Vocês só vão entender quando ver funcionado.  Veja o exemplo on-line aqui.

Você pode arrastar as fotos mantendo pressionado o botão do mouse.
Para exibir/ampliar uma foto utilize o duplo click sobre a foto,
o mesmo deve acontencer para que ela seja minimizada.

Pessoal após ter liberado o download estou informando uma alteração que foi feita, o PHP agora verifica a extensão dos arquivos no diretório e caso a extensão não esteja no array $exts do arquivo PHP o arquivo lido não será adicionado ao XML,
Portanto, adicione as extensões que deseja na galeria na linha abaixo:

$exts = array(‘jpg’,’png’,’jpeg’,’gif’);     // 5º linha do arquivo PHP

Abraços,

Download do pacote atualizado e corrigido

Rafael Clares,

Este post tem 55 comentários

  1. escobar

    muito legal se poder me enviar o codigo ficario muito grato

  2. Dede Siqueira

    Gostei do sistema…
    gostaria de poder testar.
    abracos

  3. Paulo De Tarso

    Olá Amigo,
    Muito bom esse seu exemplo… Que galeria perfeita.. Diferente da que vemos por ai… Poderias posta os fontes? Me permitirias utilizar ela no meu site pessoal?

    Abraços, Fica com Deus.

    P.S. Qualquer coisa, me manda por email os fontes. e-mail: [email protected]

  4. marco

    Ei já vi em algum lugar, mas não tive acesso aos codigos.

  5. Paulo Afonso

    Nossa Rafael, muito legal o post.
    Adorariamos muito o código fonte.
    Disponibiliza aí pra gente.
    Valeu!!

  6. Rafael Clares

    os fontes já estão disponíveis para download…
    obrigado pelos comentários

  7. Paulo De Tarso

    Oi Rafael,
    Fiz o Download da Sua Galeria.
    Ela esta funcionando no Mozilla, mas no IE ela não funciona avisa que: “não é permitido espaços em branco” mas não consigo identificar aonde estariam esses espaços. E daí ela não roda no IE. Poderias me dar alguma dica, do que provávelmente seja isso.

    Fico no aguardo amigo,
    Abraços.

  8. Rafael Clares

    Olá Paulo, amigão verifique se o diretório contém apenas imagens e se alguma foto tem o nome incorreto (extensão, espaço nome, caracteres invalidos…) o script php não está tratando os aquivos do diretório, ou seja, o que ele encontrar no diretório irá tentar incluir na galeria… Bem, isso é simples de resolver, basta adicionar no script uma verificação do tipo de arquivo antes de incluir no XML, talvez eu adicione essa verificação qdo eu arrumar um tempinho… mas de modo geral teste com outras fotos ou diretório.

  9. Paulo De Tarso

    Oi Rafael,

    Lá venho Eu novamente importunar. Mas passei para te dizer, que conseguir solucionar o problema da Galeria, que não exibia no IE. Era simplesmente no começo do Arquivo Indez.php, aonde tinha “<?”. O EasyPHP esta desabilitado, dai colocando o “<?php” funcionou perfeitamente… Não tinha atentado para isso no Php.ini, acostumado com o Xampp que já vem com isso configurado. Corrigida esses detalhes, esta tudo funcionando perfeitamente.

    Outro ponto que pude observar, é que o arquivo php ler todo e qualquer arquivo que esteja na pasta “images”, sendo assim ele inclusive ler os Famigerados arquivos ‘Thumbs.db’, e termina refletindo no arquivo XML que por tabela o swf ler e exibe como se fosse uma foto em branco.

    Tens alguma dica, para tal situação… O XML contém a linha com o nome “”

    Como a função ler os arquivos contidos na pasta, ela automaticamente coloca na lista o nome de todos arquivos contidos na pasta. E como esse thumbs é uma praga, termina entrando no meio.

    Abraços, Aguardo contato. =)

  10. Rafael Clares

    Paulo, resolvido e disponibilizado a nova versão. Valeu

  11. Lucasbaalberith

    olá. Gostaria de saber de tem como fazer esta lista de fotos ficarem na horizontal, com as fotos retinhas, sem ficarem de cabeça pra baixo.. porém que também dê pra arrastá-las e tal…

  12. Rafael Clares

    Olá Lucas, amigo tem como fazer sim mas não é o propósito do POST, para fazer isso você pode alterar o fonte do flash que está junto no pacote do download. Não tenho nem noções de flash. Boa sorte.

  13. Gustavo Braga

    Boa Tarde Rafael! Tudo bem com você?
    Primeiramente gostaria de lhe dar os parabéns pela iniciativa da criação do blog… MUITO BOM MESMO… você está de parabéns… mesmo eu sendo Web Design (formado) Não pude deixar de desfrutar deste blog maravilhoso… rsrs confeço que o download é o botão mais acessado por mim… rsrs porém, sou Design né… programador ainda preciso estudar!…

    … RAfael, eis aqui um dúvida cara! Gostei demais dessa galeria de photos cara! MTO BOM MESMO… TÃO BOM, QUE EU ESTAVA QRENDO USÁ-LO… porém tem algumas limitações, né? como não poder colocar photos com tamanhos diferentes de W:480 e H:360 e vice-versa… assim como usar um outro fundo no lugar do fundo original, até abri o “galleryhorvert” transformei em .fla pra tentar mexer, mas não deu, qdo decompila ele, o arquivo não fica o mesmo!…

    Seguinte Rafael, eu gostaria de saber se é possível colocar photos de diferentes tamanhos e se é possível também trocar este fundo e ou tirar ou deixar ele alpha…

    Desculpa minha folga… mas como disse, Design só se ferra com isso!… to pensando em fazer outra facul, só que de Analise e Desenvolvimento de Sistemas, ou sistemas pra Web, confeço que o seu blog me deu uma força a mais!…

    … mas é isso Rafael… mais uma vez, PARABÉNS MESMO…

    1. Rafael Clares

      Olá Gustavo!!!
      Cara fico feliz que tenha alguma coisa aqui que sirva para ti. Como você deve ter percebido eu não escrevo muito aqui, não tenho tanto tempo e quando escrevo sei que não será nada extraordinário ao mesmo tempo que sei que é algo que alguém procura, a verdade é que gosto de descubrir minha própria forma de fazer as coisas, isso não quer dizer que sejam as melhores mas fico feliz por chegar ao resultado que espero. Muito obrigado por seu comentário isso realmente me motiva a continuar escrevendo aqui. Valeu! Bem amigo vamos ao que interesse não é …. Realmente essa galeria é bacana e tem algumas limitações mesmo em sua atual compilação, mas bem, você é web certo ? Ninguém melhor que você para deixar mais bonita essa galeria, ok … Vou te dizer uma coisa, dá para mudar o tamanho da foto, dá para mudar o background (que diga-se de passagem, acho horrível rs), etc… Agora cara vem aí algo que me parece que você passou batido… Quando você fez o download e descompactou os arquivos talvez não tenha se interessado pela pasta SRC (Source) … lá está o que você procura, o arquivo .FLA !!! Boa sorte brother, se tiver ou não sucesso nos fale aqui ok …
      Um forte abraço,

  14. Marcos

    Perfeito, muito legal, tava dificil de achar algo assim.
    OBrigadão

  15. Gustavo Braga

    Fala Rafael… Tudo bem com você?

    Seguinte Irmão… eu abri o .fla na pasta src, porém, é a mesma coisa cara… mesmo que eu apenas abra, sem mexer em nada e aperte ctrl+enter pra gerar o arquivo .swf ele já estraga tudo cara! não funciona abre como tá n .fla, o fundo pequeno e as duas sombras, não acontece nada cara!…

    … será que tem jeito irmão? e outra que o arquivo do .fla a hora que eu abro e gero o .swf ele dá o erro de #include não existir o arquivo do #include!…

    Cara desculpa te encher o saco, mas é que eu me apaixonei pelo album cara!…

    . valeu!

    1. Rafael Clares

      Brother, esse albúm foi só uma dica eu não desenvolvi como deve ter percebido, a única coisa que posso fazer por você é te dar esse link para você viajar e não ficar triste com o albúm rs….
      http://www.ffiles.com/flash/photo_galleries/
      Quanto a galeria…uma dica que dou é … veja a versão do flash em que você está criando o SWF, outra, veja as opções de exportação do SFW….tem muita coisa que deve ou não ser marcada lá… opçoes de action scripts, blah …definitivamente eu abri o Flash umas 5 vezes na minha vida…. dá uma olhada nesse link ai, tente baixar denovo o pacote, de repente fui eu que zoei o do src. abraços

    2. Rafael Clares

      O Fla, pede um “include” mc_tween2.as, que o arquivo mc_tween2.MXP, já se encarrega de carregar no flash CS4, mas se for nos flash anteriores, basta adicionar o as (action script externo), na pasta do FLA, pois o arquivo é necessário apenas na hora de compilar, e ele funcionará com suas alterações, tranquilamente.

  16. fabricio

    genial Rafael… gostaria de usar tb.. mas nao consigo mudar o fundo…
    seria interessante embaixo colocar um instrucaozinha do tipo ” clique duas vezes na imagem para ampliar e reduzir”.. pois sabe como a internet é inclusiva ne hehehe
    entao…se puder me ajudar a trocar o fundo e ficaria muito grato

    1. Rafael Clares

      Fabricio, me desculpe mas não fiz a galeria e não conheço Flash, talvez seja interessante procurar em uma comunidade sobre o assunto. Eu gostei da galeria no formato que estava quando baixei e resolvi dar a dica, apenas isso, infelizmente.

      1. Rafael Clares

        O Fla, pede um “include” mc_tween2.as, que o arquivo mc_tween2.MXP, já se encarrega de carregar no flash CS4, mas se for nos flash anteriores, basta adicionar o as (action script externo), na pasta do FLA, pois o arquivo é necessário apenas na hora de compilar, e ele funcionará com suas alterações, tranquilamente!

  17. Marcos

    Rafael, eu estava procurando outra coisa mas, to rindo que nem criança, Show de bola, pela dica.
    ao que estou procurando é um cadastro com fotos que possa rodar no windows. Valeu.

    1. Rafael Clares

      ha-ha ! Pow Marcos, não tem nada a ver mesmo!

  18. Joao

    OLá rafael, realmente MUITO BOM este tutorial, inclusve eu gostaria de se possivel uma aulinha uma hora dessas quando tiver um tempinho de como incluir mais informação no XML… por exemplo para um SWF que tenha Texto..
    OK, mas eu gostaria mesmo é fazer uma observação quanto ao Flash que o pessoal não consegue alterar, se é que me permite.
    O Fla, pede um “include” mc_tween2.as, que o arquivo mc_tween2.MXP, já se encarrega de carregar no flash CS4, mas se for nos flash anteriores, basta adicionar o as (action script externo), na pasta do FLA, pois o arquivo é necessário apenas na hora de compilar, e ele funcionará com suas alterações, tranquilamente.
    Espero ter ajudado o pessoal ai quanto ao flash.
    Sucesso Rafael, e obrigado pela ajuda!

    1. Rafael Clares

      Aeee João, cara muito obrigado por compartilhar seu conhecimento conosco!
      Tenha certeza que está sim permitido a fazer qualquer observação, muito bom, eu mesmo quando arrumar um tempinho irei dar uma boa olhada nessa dica!
      Abraços e obrigado

  19. Lauratto

    Exelente post, funcionou beleza e de fácil acesso e admnistração, parabéns

    1. Rafael Clares

      Lauratto, obrigado pelo comentário!

  20. Sheila

    Olá Rafael, sua galeria é sensacional. Gostaria de utliza-la em meu site pssoal, poderia ser? Então fiz upload e no apareceram algumas mensagens de erro. Vc poderia dar uma olhada? http://www.manhaes.com/galeria/ Muito obrigada!

    1. Rafael Clares

      Oi Sheila,
      isso pode ocorrer por 2 motivos e são eles:
      – o diretório de fotos não tem permissão de gravação.
      – o comando fopen não está habilitado em seu host.

      Bem, o primeiro é simples e basta dar permissão de gravação via FTP ou solicitar ao seu host, moleza!
      Já o segundo, putz … se realmente estiver desabilitado esse comando as chances de seu host habilitar “para você” são realmente muito pequenas, isso é ruim pq qualquer aplicação que você tentar criar que seja baseada em leitura de diretórios não conseguirar rodar nesse servidor/host. Mas solicite ao suporte para habilitarem para ti o fopen.
      Boa sorte e se isso futuramente te irritar muito (ha-ha) dá uma lida no topo/header desse blog, tem uma propaganda ridícula de host, mas o serviço é excelente….

      Valeu pelo comentário,
      Bjoka

  21. Vitor Ramos

    Galera, sou novo por aqui e no mundo flash, dreamwever etc…
    Na verdade sou um fotografo entusiasta por tecnologia e quero montar um album assim com minha fotos…
    Mas… COMO FAÇO ISSO FUNCIONAR?? Rsrsrs…
    Meu contato para dicas: [email protected].
    Conto com vocês!
    Abraxxx…

    1. Rafael Clares

      Olá Vitor,
      basta você inserir as fotos que deseja dentro da pasta de fotos e só isso.
      Claro que, o programa é em também em PHP, logo, você precisa ter um servidor Web que reode o PHP.
      Se não tiver dê uma procurada no google para saber como instalar e rodar o PHP, agora se tiver uma hospedagem basta enviar os arquivos para lá.
      Abraços

  22. Anderson

    Voce poderia enviar o codigo ?

    1. Rafael Clares

      Anderson,
      Tem o código ao fim do post.

  23. André Luís

    Olá , achei sei exemplo extremamente criativo Parabéns.

    Bom eu publiquei os arquivos em meu servidor LINUX apareceu o erro

    Warning: fopen(fotos.xml) [function.fopen]: failed to open stream: Permission denied in /home/impactsi/public_html/teste/index.php on line 8

    Warning: fwrite(): supplied argument is not a valid stream resource in /home/impactsi/public_html/teste/index.php on line 10

    Warning: fwrite(): supplied argument is not a valid stream resource in /home/impactsi/public_html/teste/index.php on line 11

    Warning: fwrite(): supplied argument is not a valid stream resource in /home/impactsi/public_html/teste/index.php on line 34

    Warning: fwrite(): supplied argument is not a valid stream resource in /home/impactsi/public_html/teste/index.php on line 35

    Com o SMART FTP, cliquei no arquivo XML e mudei a permissão dele para gravação/leitura/execução 764. Mas o erro continua .

    Queria saber como editar o arquivo SWF também para mudar a cor de fundo.
    Encontrei um arquivo na pasta “src” Seria ele o fla ? da galeria ? Abri com o flash cs4 e aparece um erro tmb
    Error opening include file mc_tween2.as: File not found.

    1. Rafael Clares

      Andre,
      o arquivo fotos.xml esta no mesmo diretorio que o index.php?
      pq o endereço que vc esta passando no comando fwrite() diz que sim, é isso mesmo?

      se estiver, coloque o trecho do codigo php que possui a chamada ao metodo fwrite() aqui para analisarmos.

      Quanto ao .fla, é isso mesmo. Leia os comentários, um amigo colocou ai a solução do problema com o mc_tween2.as.

      abs

  24. leandro

    muito bom cara!gostaria de saber se o conteúdo disponibilizado por vc aki é freeware , ou seja , se posso modificar e usar nos meus projetos acadêmicos e comerciais.abçs e parabéns.

    1. Rafael Clares

      Leandro, obrigado pelo comentário, fico feliz que tenha lhe servido. Todo o conteúdo é open source e não está sob nenhuma licença, fique à vontade para modificar e usar ou vender se for o caso.
      abraços,

  25. Richard Moreira

    Nossa, encontrei o seu site por acaso e adorei, sua galeria em flash+xml+php é nota 10! Nunca conseguiria fazer uma igual, gostaria de saber se posso usar o arquivo disponibilazado em um site que estou construindo em flash. Desde de já um abraço!

    1. Rafael Clares

      Richard, obrigado pelo comentário. Pode usar tudo que estiver para download aqui… ok !!!
      Abraços

  26. thais

    oiiiii…to fazendo um prototipo de um site no meu curso de webdesign e queria colocar esse album no site….ele nao vai ser publicado…mais queria colocar no meu TCC …como faco usar ele?amei esse album!

    1. Rafael Clares

      Thais, pode utilizar o albúm a vontade, como usar está no Post, basta ler e colocar, caso haja, suas dúvidas no blog. tchau

  27. rodismariola

    MARAVILHOSO… gostaria de saber como poderia incluir um texto agregado à imagem (um texto tipo floating q apareceria sobre ou ao lado da imagem.) e uma busca pra que apareçam somente as imagens (e respectivos textos) relacionados à ela…
    claro q não quero te encher pedindo pra q vc ‘faça pra mim’ mas q me dê um caminho… achei lindo e gostaria de criar um blog diferente…
    ah! outra pergunta… posso colocar vídeos tb?
    achei perfeito!

  28. wilsom camargo

    perfect muito boa essa galeria sucesso!!!

  29. wilsom camargo

    otimo o site,otimo artigos parabens!!

  30. Franklin

    Obrigado!!!

  31. junio mota

    Olá Rafael, cara a dica dessa galeria foi realmente boa… agora da uma olhada pra mim no link http://naesquinadecamacari.com.br/galeria to deixando disponivel pra vcs verem e verem qual o problema que esta dando ai neste ponto. o arquivo xml esta no mesmo local que o index.php não fiz nenhuma alteração somente descompactei os arquivos e joguel a pasta galeria para o meu servidor web, para poder ver se funcionaria perfeitamente e resultou em alguns erros que tudo indica seja php. e percebi ainda que o erro começa na linha 8 onde tem o argumento de $ponteiro já o argumento da linha 7 $arquivo que indica o local do arquivo esta certo…
    pra facilitar a operação e observação to colocando aqui todo o código php para análize

    01. <?php
    02. ob_start();
    03. $dir = "images";
    04. $conteudo = "";
    05. $exts = array('jpg','png','jpeg','gif');
    06.
    07. $arquivo = "fotos.xml";
    08. $ponteiro = fopen($arquivo, "w");
    09.
    10. fwrite($ponteiro, "n”);
    11. fwrite($ponteiro, “n”);
    12.
    13. if (is_dir($dir)) {
    14. if ($d = opendir($dir))
    15. {
    16. while (($file = readdir($d))!== false)
    17. {
    18. if (filetype($dir.’/’.$file) == ‘file’)
    19. {
    20. $extensao = explode(“.”, $file);
    21. for($i=0; $i<=count($exts)-1; $i++)
    22. {
    23. if($extensao[1] == $exts[$i])
    24. {
    25. $conteudo .= "n”;
    26. }
    27. }
    28.
    29. }
    30. }
    31. closedir($d);
    32. }
    33. }
    34. fwrite($ponteiro, $conteudo);
    35. fwrite($ponteiro, “n”);
    36. ob_flush();
    37. ?>
    38.
    39.
    40. Galeria em Flash
    41. body{margin:0px;}
    42.
    43.
    44.
    45.
    46. http://flash/galleryhorvert.swf
    54.
    55.
    56.
    57.
    58.

    AGORA ABAIXO OS ERROS QUE APARECERAM AO PUBLICAR…

    Warning: fopen(fotos.xml) [function.fopen]: failed to open stream: Permission denied in /home/naesquinadecamac/www/galeria/index.php on line 8

    Warning: fwrite(): supplied argument is not a valid stream resource in /home/naesquinadecamac/www/galeria/index.php on line 10

    Warning: fwrite(): supplied argument is not a valid stream resource in /home/naesquinadecamac/www/galeria/index.php on line 11

    Warning: fwrite(): supplied argument is not a valid stream resource in /home/naesquinadecamac/www/galeria/index.php on line 34

    Warning: fwrite(): supplied argument is not a valid stream resource in /home/naesquinadecamac/www/galeria/index.php on line 35

    *** MESMO APARECENDO OS ERROS A GALERIA FUNCIONA PERFEITAMENTE ***
    Isso muito me incomodou… gostaria que me ajudasse a resolver esse problema…

    Gostei muito desta galeria e já bolei uma ideia para ela ficar no meu site. rs

    Grato pela ajuda pessoal…

    Mais uma vez valeu pela dica RAFAEL… muito bom seu blog

    1. Rafael Clares

      Junio, legal a iniciativa de ter colocado tudo isso no comentário, mas teria sido mais fácil para vc se tivesse tentado entender o que a mensagem (de erro) estava lhe informando, não acha ?
      Para programar tem que ter ou, o mínimo de entendimento em inglês técnico ou no mínimo curiosidade de saber o que está sendo informado na tela.
      No seu caso a primeira linha está dizendo que “Permission denied” ou “Permissão negada” que quer dizer que você precisa dar permissão de leitura no arquivo xml, através do FTP, claro!

      Boa sorte!

  32. junio mota

    é verdade só hoje pela manhã que fui parar para ler o que estava escrito, e realmente o problema é de permissão, mais se eu acrescento fotos na pasta elas não aparecem na galeria, o que devo fazer??

    1. Rafael Clares

      Junio, é o mesmo caso, dê permissão na pasta fotos, isso está sendo explicado no post.
      abraços

  33. Loisse Rodrigues

    Olá, Rafael. Muito boa sua iniciativa de postar um exemplo assim.

    Gostaria de te perguntar como faço para tornar essa galeria editável pelo próprio usuário?
    De maneira que tivesse um painel administrativo, entende?

    Obrigada!

    1. Rafael Clares

      Loisse, as galerias em flash geralmente utilizam um XML com o endereço das imagens e a única forma de gerir esse conteúdo é criando um script que faça alterações no arquivo XML.
      O ideal é criar uma tabela no banco para que as alterações não sejam feitas diretamente no XML e evitar que o arquivo seja corrompido, nesse caso você tem as opções:
      1 – Criar uma tabela com os dados das imagens e um arquivo PHP que retorne uma XML como resultado de seleção dessa tabela.
      2 – Criar um script que leia o XML e permita que você altere e grave novamente no disco (é mais arriscado)
      3 – Criar uma tabela com os dados das imagens e ao fim das alterações (upload, título, etc…) gravar o XML (substituir o arquivo)

      As telas para alterações seriam:
      – tela de login
      – lista de fotos (editar, remover, enviar)

      Tchau,

  34. Adriano

    Rafael. ficou muito bom sua galeria.
    mas eu queria saber como faço para que as imagens venham do banco de dados onde esta gravado apenas os nomes e a extenção.
    pode me ajudar.

    1. Rafael Clares

      Adriano, essa galeria não tem banco de dados, ela lista os arquivos do diretório e gera um XML (que não deixa de ser um banco);
      De toda forma, no arquivo index.php na linha 20, tem o seguinte trecho :
      $extensao = explode(“.”, $file);
      Onde a extensão é:
      $extensao[count($extensao) – 1];

      Se disser o que pretende fazer talvez fique mais fácil de ajudar; Aproveite para ver outras galerias com bancos de dados que tem no blog;

  35. paulo

    show de bola cara,parabéns!

Os comentários estão encerrados.