Efeito ShadowBox – Alternativa Sofisticada do Lightbox

ShadowBox® é uma aplicação visualizador de mídia baseado na web que suporta todos os mais populares formatos da web de meios de publicação. Shadowbox é escrito inteiramente em JavaScript e CSS e é altamente personalizável. Usando Shadowbox, os autores website pode mostrar uma grande variedade de meios de comunicação em todos os principais navegadores sem precisar que o usuários vá  para fora da página de vinculação.

Ou seja, com esse recurso, diferente do lightbox que abre apenas imagens, o ShadowBox abre não somente imagens, como Vídeos, arquivos em swf e Flash Video e até páginas sem precisar sair do seu site ou blog.

Neste Artigo irei ensinar como Inserir esse sofisticado recurso em sua página.

Primeiro Passo – Download dos Arquivos

Vá para página de Download dos Arquivos Clicando Aqui

Nessa página você ira escolher os formatos que o shadowbox irá executar.

Configure como na imagem acima, ou se preferir escolha ao seu gosto.

A base de Standalone (autonoma) também é muito boa.

Não esqueça de escolher o idioma

Feito Isso, escolha o formato de compressão e faça o download do arquivo como mostra a imagem abaixo. (RECOMENDO O ARQUIVO ZIP).

Extraia os Arquivos e Salve em algum lugar seguro do seu computador no qual você não se esqueça.

Agora teremos que hospedar os arquivos em algum servidor.

Segundo Passo – Hospedagem dos Arquivos

Infelizmente termos que hospedar os arquivos em um servidor externo para que tudo funcione corretamente.

sugiro dois servidores grátis.

• http://www.mandeibem.com.br (recomendo esse para quem tem dificuldades com idioma inglês)
  
• http://www.hosting.zymic.com
  

Cadastre-se em algum dos servidores acima e faça o upload dos arquivos extraídos anterior mente nele.

Após isso, copie o link de onde esta hospedado o arquivo.

Se você escolheu o mandei bem, clique para fazer download, clique em download mais uma vez.

Se você encontrar uma imagem igual a imagem abaixo, Prossiga.

Pois Bem, Agora clique com o Botão Direito do mouse em cima do Download como mostra a figura acima, e copie o link.

Repita isso com o Arquivo shadowbox.js também.

Caso tenha dificuldades e/ou queria usar os arquivos completo, copie os links a seguir e use-os no próximo passo.

• ShadowBox.js
• ShadowBox.css
  

Agora Vamos a Configuração do Código no Seu Blog ou Site.

Terceiro Passo – Configuração do Código na Sua Página

Agora é a parte mais importante.

Se você estiver usando o Blog, recomendo que faça um Backup do seu template antes de prosseguir por motivo de segurança.

Continuando.

Vá para entre no código do seu site.

No caso do blogger vá para Design/ Editar HTML

Agora encontre </head> (para facilitar segure Ctrl+F e digite </head>)

Logo Acima dela copie o e Cole o Código Abaixo.

Lembrando de inserir os links dos Arquivos Hospedados na onde esta escrito ’COLE AQUI O LINK SHADOWBOX’

Respeitando as Aspa e colando o link entre elas como mostra o código abaixo.

<!-- Efeito ShadowBox --> 

 <link href='COLE AQUI O LINK SHADOWBOX.CSS' rel='stylesheet' type='text/css'/>
<script src='COLE AQUI O LINK SHADOWBOX.JS' type='text/javascript'/>
<script type='text/javascript'>

  Shadowbox.init({
     handleOversize: "resize",
     modal: false
 });
</script>

<!-- Fim do efeito ShadowBox -->

Pronto, agora o código da sua página ou blog já tem o código.

Quarto e Ultimo Passo – Chamando o Efeito ShadowBox

Agora, Sempre que você quiser usar o efeito em alguma imagem, Video, ou outra janela modal de visualização que o efeito suporta siga o procedimento a seguir.

Para usar o Efeito em Imagens, é necessário que se  hospede a imagem em algum host de imagem qualquer.

Lista dos principais host de imagens

http://imageshack.us/
http://www.imagehosting.com/
http://picasaweb.google.com.br/ (Padrão do Blogger)
http://www.flickr.com/
http://photobucket.com/

Também é possível usar a imagem hospedada em seu servidor particular ou nos servidores citados anteriormente.

O código

Para chamar o efeito em imagens utilize o seguinte código após o link rel=”shadowbox” como mostra o exemplo abaixo.

<a href=" LINK DA IMAGEM A SER EXIBIDA COM O EFEITO" rel=”shadowbox”><img scr=" LINK DA MINIATURA DA IMAGEM"></a>

Demonstração:



Também é possível usar o mesmo efeito em links Clique Aqui para ver o Efeito.

Para Exibir o efeito através de link, basta apenas a parte que mostra a miniatura da imagem como no exemplo a baixo.

<a href=" LINK DA IMAGEM OU VIDEO A SER MOSTRADA NO EFEITO " rel="shadowbox"> Escreva Aqui seu Texto </a>

Para fazer o Efeito no estilo Galeria de Álbuns Basta apenas inserir após o link rel= “shadowbox[album]” como mostra o exemplo a seguir.

<a href=" 1ª LINK DA IMAGEM A SER EXIBIDA COM O EFEITO" rel="Shadowbox[album]"><img scr=" LINK DA MINIATURA DA IMAGEM></a&gt

<a href=" 2ª LINK DA IMAGEM A SER EXIBIDA COM O EFEITO" rel="Shadowbox[album]"><img scr=" LINK DA MINIATURA DA IMAGEM></a>

Caso caso queira mais imagens com esse efeito, apenas repita o procedimento quantas vezes for necessário.

Demonstração Com Galeria:




Para usar com Vídeos o procedimento é um pouco mais complicado.

É necessário que se copie o link fornecido no embed do Vídeo, geralmente após o “src=” como a parte verde  no exemplo abaixo tirado do youtube.

<object width="480" height="385">

<param name="movie" value="http://www.youtube.com/v/Roh7DvNodDI&hl=pt_BR&fs=1&"></param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Roh7DvNodDI&hl=pt_BR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Para usar esse recurso em vídeos, siga o exemplo abaixo.

<a href="Link-do-Video" rel="shadowbox;width=405;height=340">

<img src=" Link da Miniatura da Imagem"></a>

Note que as partes destacadas em Roxo foram acrescentadas.

E as partes destacadas em Verde são necessárias para dar as dimensões em X e Y da exibição do vídeo.

Essas Dimensões são necessárias, mas podem ser personalizadas.

Demonstração do Efeito em Videos:

Os sites que testei e suportaram o efeito foram:

www.youtube.com.br

www.megavideo.com

www.vimeo.com

www.vzaa.com

www.yahoovideo.com

www.googlevideo.com

NOTA IMPORTANTE!

Vale Lembrar que quem já usa o Lightbox, não precisará configurar todos as postagens novamente. Pois o ShadowBox® é compatível com o lightbox.

Isso quer dizer que tanto faz você usar rel=”shadowbox” quanto rel=”lightbox”

Tudo vai funcionar perfeitamente. 

 E Isso é Só!

Para saber mais sobre o recurso, suas limitações e suas vantagens, e como personalizar esse recurso. Acessem a Página Oficial do ShadowBox®

Para saber mais sobre a sua licença de uso, acesse a página oficial de Licença do ShadowBox®

Um Blog que usa esse recurso é o Blog da Mecânica® do Thiago Silva.

Visite este site clicando aqui e veja outros recursos semelhantes a este.

Esta Postagem Foi Criada por Thiago Silva, criador e editor do Blog da Mecânica® Exclusivamente para o Mundo Darkness® e D’Tudo®.