Tutorial: Galeria de imagens 3D TiltViewer
Olá, eu sou Felipe Zunino, um dos colaboradores do blog de Web Design da Microcamp, e este é o meu primeiro post. Para a minha ‘estreia’ aqui, preparei um tutorial que mostra como editar uma maravilhosa galeria de imagens em 3D, uma das mais belas que você pode encontrar em páginas web: a galeria Tiltviewer.
Para este tutorial, você vai precisar de:
– Um editor de textos como bloco de notas, Notepad++ ou o Adobe Dreamweaver (para abrir e alterar o arquivo XML com os códigos);
– Um editor de imagens, como o Adobe Photoshop (para alterar o tamanho das imagens);
– Um navegador atualizado (IE, Google Chrome ou Firefox) para visualizar a galeria em funcionamento.
Linguagens utilizadas durante este tutorial: XML e HTML.
Para começar, nosso primeiro passo é fazer o download do arquivo direto do site do desenvolvedor do TiltViewer: A galeria Tiltviewer é uma galeria reservada por seus direitos autorais, e iremos usar a opção Download para baixar a versão gratuita. Caso tenha interesse em ter controle total sobre ela, você pode compra-la clicando diretamente na opção GoPRO.
Site da galeria
Depois de fazer o download, descompacte o arquivo e dentro da pasta você poderá ver os arquivos que compõem a galeria:
Arquivos na pasta após descompactação
Clique no arquivo Index e abra-o para visualizar a galeria funcionando no navegador:
A galeria em funcionamento
Nosso próximo passo será trocar as imagens da galeria por imagens de sua escolha. Para isso, vamos abrir a pasta IMGS, que é a pasta que contém as imagens da galeria. Observe que dentro da pasta IMGS iremos encontrar uma única figura com o nome de Img.
A pasta Imgs com o arquivo de imagem original
Na barra de propriedades da janela, observe as dimensões dessa imagem para que as novas imagens de sua galeria não fiquem desproporcionais ao tamanho original:
As propriedades da imagem
Você poderá inserir quantas imagens quiser para compor a sua galeria. O numero que definir será adicionado à página, portanto, salve-as na pasta IMGS e redimensione-as do mesmo tamanho da foto padrão (640 x 444 pixels) utilizando um editor de imagens como o Photoshop para executar essa tarefa.
Dica: salve as suas imagens renomeando-as com uma numeração de 1 em diante, até o número de fotos que você deseja inserir.
Em nosso tutorial, usamos o Adobe Photoshop para redimensionar as imagens. Nele, a opção de modificar o tamanho de uma imagem está na guia Imagem > Tamanho da imagem.
Mudando o tamanho no Photoshop
Depois de salvar as imagens corretamente na pasta IMGS como mostra a figura abaixo, abra a pagina Gallery com o Dreamweaver ou com qualquer outro programa editor de códigos XML.
Os arquivos de imagem na pasta
O arquivo Gallery
Depois de aberta a pagina Gallery, basta localizar na página o código <photo imageurl=”imgs/img.jpg”… e alterar o link da imagem para o nome que salvou sua imagem. Ex: <photo imageurl=”imgs/1.jpg”… Coloque o link de todas as imagens existentes na pasta IMGS como mostra a figura abaixo:
Modificando o código XML
Feito isso, salve o arquivo e visualize a pagina Index para conferir que as imagens que inseriu no código da Galeria serão mostradas, conforme a figura abaixo:
A galeria pronta
Se você seguiu corretamente todos os passos até aqui, parabéns! Suas imagens já estão inseridas na galeria Tiltviewer. Mas atenção para um detalhe importante: sempre confira qual é a extensão da imagem que está inserindo (por exemplo, se é .JPG, .GIF ou .PNG). Isso é fundamental porque você deverá escrever o nome do arquivo e sua extensão corretamente no código do arquivo Gallery. Para visualizar a extensão, você deve clicar na imagem e olhar na barra de propriedades da janela da pasta, como mostrado na figura abaixo:
Atenção com o formato das imagens
Futuramente, nos próximos posts, explicarei como deletar as imagens e configurar a galeria de acordo com seu gosto. Espero que tenha gostado e aguardo os seus comentários sobre este tutorial e dicas e sugestões para novos posts. Até lá!
