anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

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á!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.

Postagem Relacionada

Crie um Slideshow com jCycle – parte 3 (final)
Olá amigo leitor! Se você acompanha os posts do blog de Web Design deve lembrar