Efeito ShadowBox – Alternativa Sofisticada do Lightbox

ShadowBox® é um visualizador de mídia baseado em aplicações web que suporta toda a web mais populares formatos 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 navegar usuários 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.

 Aqui está um excelente tutorial criado por meu amigo Tiago, ensinando, passo a passo, como aplicar esse sofisticado recurso em sua página, seja blogger ou site.

Para começar vá para página de Download dos Arquivos Clicando Aqui






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



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 está 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 o código HTML 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 Aspas 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: &quot;resize&quot;,

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 hosts 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.





1: <a href=" LINK DA IMAGEM A SER EXIBIDA COM O EFEITO" rel="shadowbox">

2: <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.





1: <a href=" LINK DA IMAGEM OU VIDEO A SER MOSTRADA NO EFEITO "> 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.





1: <a href=" 1ª LINK DA IMAGEM A SER EXIBIDA COM O EFEITO" rel="Shadowbox[album]">

2: <img scr=" LINK DA MINIATURA DA IMAGEM "></a>

3: 

4: <a href=" 2ª LINK DA IMAGEM A SER EXIBIDA COM O EFEITO" rel="Shadowbox[album]">

5: <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.





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

2: <param name="movie" value="http://www.youtube.com/v/Roh7DvNodDI&hl=pt_BR&fs=1&"></param><param name="allowFullScreen" value="true"></param>

3: <param name="allowscriptaccess" value="always"></param>

4: <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.





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

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



Note que as partes destacadas em Vermelho 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 todas 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.



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®



Aqui deixo meus sinceros agradecimentos ao meu amigo Thiago Silva, por criar o tutorial e permitir publicá-lo aqui no blogger, e assim compartilhar com todos os meus leitores.criador e editor do Blog da Mecânica®