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.



COMENTÁRIOS

BLOGGER: 3
Loading...
Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Como utilizar o efeito Shadowbox
Como utilizar o efeito Shadowbox
Saiba como utilizar o efeito Shadowbox
http://4.bp.blogspot.com/_qgZA1ny_dAs/S9JMAdTiL0I/AAAAAAAAEEE/Vp5hGovec3c/s1600/Jirafas.jpg
http://4.bp.blogspot.com/_qgZA1ny_dAs/S9JMAdTiL0I/AAAAAAAAEEE/Vp5hGovec3c/s72-c/Jirafas.jpg
Bloggermin
https://www.bloggermin.cashmore.com.br/2011/12/como-utilizar-o-efeito-shadowbox.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2011/12/como-utilizar-o-efeito-shadowbox.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar