Programação e Webdesign
Gerador de imagens "carregando…"
08/05/09
Se você usa Ajax, este site vai ser uma mão na roda. Com apenas 3 cliques você pode gerar aqueles gifs de “loading” personalizados, escolhendo forma, cor de fundo e cor da imagem.
Lytebox: Crie visualizações e slideshows para imagens em seu site
26/09/08
Lytebox permite que você crie efeitos para visualização e slideshow para galerias de imagens de forma simples e bonita. Quando um imagem é clicada, a página onde ela está fica escurecida e uma ampliação da imagem aparece no centro da tela, com navegação para uma galeria de imagens e uma apresentação em slideshow com um timer predefinido.
Para colocar no seu site você precisa deste arquivo, onde estão os .js, o estilo CSS da galeria e as imagens de navegação.
A chamada para o script deve ser declarada dentro da tag <HEAD> com esses parâmetros:
<script type=”text/javascript” language=”javascript” src=”lytebox.js”></script>
<link rel=”stylesheet” href=”lytebox.css” type=”text/css” media=”screen” />
Lembre-se de que se você descompactou o arquivo em uma pasta difente, você deve indicá-lo no código acima.
Agora vem as chamadas para a imagem. Essas chamadas são colocadas no parâmetro rel do link que tem a imagem como caminho. Veja exemplo neste link.
<a title=”Primeiro link do exemplo” rel=”lytebox” href=”angelinajolie01.jpg”>link</a>
Repare no parâmetro title e rel. O primeiro será a legenda que vai aparece em baixo da imagem, o segundo é a chamada para o Lytebox.
Para criar uma galeria, no parâmetro rel coloque lytebox[nome da galeria] indicando um nome para a galeria de imagens. Se você colocar vários links com esse mesmo parâmetro, na visualização irá aparecer a opção de navegar entre as fotos. Clique em uma das imagens acima para ver o exemplo.
O último uso é o Slideshow. Para criar uma transição de imagens, use no parâmetro rel a chamada lyteshow[nome da galeria]. O funcionamento é igual ao da galeria, porém agora as imagens mudam automaticamente.
É isso aí, galera. Este foi o primeiro post desta categoria. Meu objetivo aqui será compartilhar com vocês técnicas, ferramentas, dicas e scripts para facilitar a vida do programador e do webdesigner. Em breve teremos mais.
