20
junho 2017
Galeria de Imagens com Fancybox
Escrito por Mario Medeiros não comentários
Imagine que você queira fazer uma galeria de imagens em html simples, sem bancos de dados nem nada de tão complexo. Um layout leve e agradável em HTML5 e CSS3. Aí você também tem a idéia de adicionar um efeito de zoom nas imagens para visualizar melhor as mesmas, utilizando um plugin em JavaScript.
Pronto, problema criado! Só falta agora a solução!
Eu utilizei as seguintes ferramentas:
ShellScript, Fancybox, HTML5 & CSS3.
O que cada ferramenta faz? Automatiza a tarefa de ter que criar as tags e escrever códigos manualmente, de forma tediosa. Novamente o lema foi levado em consideração: A Preguiça É Soberana!
O shell script lê um diretório de imagens, gera um arquivo txt, grava as tags html em outro arquivo txt e o sed cola o conteúdo do txt, junto com o conteúdo do arquivo modelo.html em arquivo final, galeria.html.
Pode-se mudar o nome dos arquivos gerados, bem como mudar o script para ler outros formatos de arquivos de imagens, conforme a necessidade e/ou a preferência. Eu testei somente com jpg e png. Foi tudo OK.
Mais detalhes de como o script funciona, estão nos comentários do próprio script.
O layout ou template html que utilizei foi o Halcyonic do site HTML5 UP,
Usei como plugin de efeitos das imagens o Fancybox, e as instruções eu segui deste link:
No site acima eles apontam o JavaScript para um site, usando o modelo CDN. Eles usam como apontamento o site https://cdnjs.com.
Eu preferi copiar os plugins e colocar em diretórios locais. Assim não fico dependente de acesso a Internet para o sistema funcionar. Na possibilidade estar offline, tudo funciona sem problemas.
Deixo os links com os arquivos prontos, com o resultado final e script/esqueleto para gerar a galeria. Descompacte em qualquer diretório e abra o arquivo galeria.html com o navegador Firefox ou Chrome. Pode também colocar o diretório da galeria no diretório de document root do seu webserver, caso queira publicar a galeria.
Tudo o que fiz foi utilizar ferramentas e layouts prontos, dando uns ajustes para minha necessidade. Nada além disso. Espero que seja aproveitável de alguma forma para alguém.
