Como utilizar o efeito Shadowbox

Saiba como utilizar o efeito Shadowbox

Shadowbox é um clone do Lightbox, porem a diferença está que o primeiro não exibe somente imagens, mas também pagina da web, arquivos flash, galerias, mapas e videos em vários formatos.

Utilizá-lo é bastante simples, primeiro faça download deste arquivo, descompacte-o e hospede o mesmo em hosting.

Em seguida, vá em Modelo > Editar HTML > Prosseguir e coloque o seguinte código antes de </head>:

<link href='URL do arquivo.css' rel='stylesheet' type='text/css'/>
<script src='URL do arquivo.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: &quot;0.6&quot;,
});
</script>

Altere o que está na cor verde, pelas URL dos arquivos hospedados, a primeira URL corresponde ao shadowbox.css e a segunda ao shadowbox.js.

Onde está em azul é a cor da tela, e em vermelho é a intensidade da opacidade quanto menor o valor mais transparente fica.

Como já temos todo que necessário para o Shadowbox funcionar, agora só basta colocar o atributo rel="shadowbox" no código do elemento, como por exemplo:

Imagem

Link: 

<a href="URL da imagem" rel="shadowbox" title="Titulo da Imagem">Nome</a>

Miniatura:

<a href="URL da imagem" rel="shadowbox" title="Titulo da Imagem"><img style="width:150px; height:100px;" src="URL da imagem" /></a> 

Galeria de Imagens

Link:

<a href="URL da imagem" rel="shadowbox[galeria1]" title="Titulo da Imagem">Nome</a>

<a href="URL da imagem" rel="shadowbox[galeria1]" title="Titulo da Imagem">Nome</a>

<a href="URL da imagem" rel="shadowbox[galeria1]" title="Titulo da Imagem">Nome</a>

Miniatura:

<a href="URL da imagem" rel="shadowbox[galeria1]" title="Titulo da Imagem"><img style="width:150px; height:100px;" src="URL da imagem" /></a>

<a href="URL da imagem" rel="shadowbox[galeria1]" title="Titulo da Imagem"><img style="width:150px; height:100px;" src="URL da imagem" /></a>

<a href="URL da imagem" rel="shadowbox[galeria1]" title="Titulo da Imagem"><img style="width:150px; height:100px;" src="URL da imagem" /></a>  

You Tube 

Link:

<a href="http://www.youtube.com/v/CODIGO_VIDEO&amp;rel=0&amp;autoplay=1" rel="shadowbox;width=405;height=340;" title="Nome do Video">Nome do Video</a>

Miniatura:

<a href="http://www.youtube.com/v/CODIGO_VIDEO&amp;rel=0&amp;autoplay=1" rel="shadowbox;width=405;height=340;" title="Nome do Video"><img style="width:150px; height:100px;" src="URL da imagem" /></a>

 VideoLog

Link:

<a href=http://p.videolog.tv/player.swf?id_video=CODIGO_VIDEO rel="shadowbox;width=405;height=340;" title="Nome do Video">Nome do Video</a>

Miniatura:

<a href=http://p.videolog.tv/player.swf?id_video=CODIGO_VIDEO rel="shadowbox;width=405;height=340;" title="Nome do Video"><img style="width:150px; height:100px;" src="URL da imagem" /></a>

Página Web

Link:

<a href="URL da página" rel="shadowbox;width=700;height=500" title="Página web">Página web</a>

Miniatura:

<a href="URL da página" rel="shadowbox;width=700;height=500" title="Página web"><img style="width:150px; height:100px;" src="URL da imagem" /></a> 

Altere o URL da imagem, do mapa, do arquivo ou da pagina web, conforme o caso.

No caso dos videos é necessário apenas alterar/adicionar onde está com a cor vermelha (Codigo_Video), pelo ID do vídeo, este se encontra no final do endereço do vídeo.

Como você pode notar no atributo rel="shadowbox" também podemos adicionar alguns parâmetros, widht=405 é a largura da reprodução ou pagina web e height=340 é altura.

No caso da galeria de imagem é adicionado entre colchete o nome galera, como por exemplo rel="shadowbox[galeria1]"

Sem duvida, o efeito Shadowbox é bastante completo, onde podemos apresentar distintos arquivos de uma forma mais dinâmica e elegante.