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.
— Thiago Leite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
thiagomleite
@viviane
Pois é, na hora que eu vi sua mensagem eu fui no link e vi funcionando no IE6. Se conseguiu, então blz! ^^
<blockquote cite="#commentbody-3060">
Viviane :
Boa tarde!!
Fiz um site e estou utilizando esse efeito, porem ele nao funciona no ie, mas funciona corretamente no ff, pode me ajudar?
nao sera mais necessario, consegui resolver!!
vlw
Boa tarde!!
Fiz um site e estou utilizando esse efeito, porem ele nao funciona no ie, mas funciona corretamente no ff, pode me ajudar?
segue link para que vc veja. http://www.clickamparo.com/jap_old
@Jonathan
Se for um SWF dentro de uma página comum tem sim. Vc tem que criar uma função para chamar o Lytebox e depois colocar a chamada desta função na ação dentro do SWF (onlick, provavelmente).
A função é essa:
<code>function startLytebox(href, title, rel) {
var anchor = this.document.createElement('a');
anchor.setAttribute('title', title);
anchor.setAttribute('href', href);
anchor.setAttribute('rel', rel);
myLytebox.start(anchor, false, false);
return false;
}</code>
Bom dia…
Cara, usei o lytebox e me apaixonei por ele, agora uso ele em quase todos os sites que faço… Daí vem o meu problema….
Estou desenvolvendo um site onde preciso abrir o lytebox de um botão dentro de um swf, procurei a internet inteira e não tem nada falando nisso, você poderia me ajudar?