Swift

Efeito ShadowBox em Videos e Imagens

Neste artigo, o Thiago Silva nos apresenta o Efeito ShadowBox – Alternativa Sofisticada do Lightbox. Eu conferi e testei o efeito, e achei simplesmente maravilhoso e compartilho agora com vocês.

Efeito Shadowbox

 
ShadowBox® é um visualizador de mídia baseado em aplicação web que suporta os mais populares formatos de meios de publicação.
Shadowbox é escrito inteiramente em JavaScript e CSS e é altamente personalizável. Usando Shadowbox, é possíevl mostrar uma grande variedade de imagens, videos e outros arquivos na mesma página, sem que o usuário precise sair da página de vinculação.

Diferente do Lightbox que abre apenas imagens, o ShadowBox abre imagens, Vídeos, arquivos em swf e Flash Video, inclusive abre páginas sem precisar sair do seu blog.
Neste Artigo irei ensinar como Inserir esse recurso no seu blog.

1º Passo – Download dos Arquivos

1. Shadowbox.css
2. Shadowbox.js
Faça Download dos arquivos que serão utilizados nos links acima.

2º Passo – Hospedar os arquivos:

Você deve hospedar os arquivos em um servidor externo para que tudo funcione corretamente. NÃO HOSPEDE OS ARQUIVOS DIRETAMENTE DENTRO DO SEU TEMPLATE, caso contrário não irá funcionar.
– Veja relação com opções de Sites para hospedagem de arquivos.
Após hospedar os arquivos, copie os links e guarde-os, pois você precisará deles para colocar as urls no local indicado no próximo passo.

3º Passo – Configurar o código no seu template:

[becape]Segurança nunca é demais, portanto, recomendo que faça um Backup do seu template antes de prosseguir para evitar transtornos.[/becape]

Vá no menu “modelo”, clique em “editar HTML” e procure pela tag </head>
e cole o seguinte código ACIMA dela.
(Lembrando de inserir os links dos Arquivos Hospedados no local indicado no código)

<!-- Efeito ShadowBox -->
<link href='URL-DO-ARQUIVO-SHADOWBOX.CSS' rel='stylesheet' type='text/css'/>
<script src='URL-DO-ARQUIVO-SHADOWBOX.JS' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
handleOversize: &quot;resize&quot;,
modal: false
});
</script>
<!-- Fim do efeito ShadowBox -->

4º Passo – Ativar o efeito shadowbox no seu blog:

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.

Efeito Shadowbox em imagem:

Para usar o Efeito em Imagens dentro do post, é necessário que você hospede a imagem em algum servidor de imagem qualquer, como o Picasa web, por exemplo. Não faça upload da imagem diretamente no editor de postagens do blog, senão não irá funcionar.
shadowbox em imagem
Para chamar o efeito em imagens utilize o seguinte código, e cole o endereço da sua imagem nos locais indicados (antes de rel=”shadowbox”).

<a href="URL DA IMAGEM" rel="shadowbox">
<img src="URL DA IMAGEM" width="200" height="200"></a>
Demo

Efeito Shadowbox em galeria de imagens:

Para fazer o Efeito no estilo Galeria de Álbuns Basta apenas usar o código abaixo como mostra o exemplo a seguir.

<a title="SEU-TITULO-AQUI" href="URL-DA-IMAGEM1" rel="shadowbox[galeria]"><img style=" title="SEU-TITULO-AQUI" border="0" alt="" src="URL DA IMAGEM1" width="150" height="150"></a>
<a title="SEU-TITULO-AQUI" href="URL-DA-IMAGEM2" rel="shadowbox[galeria]"><img style=" title="SEU-TITULO-AQUI" border="0" alt="" src="URL DA IMAGEM2" width="150" height="150"></a>
Caso queira mais imagens com esse efeito, apenas repita o procedimento quantas vezes for necessário.
Demo

Efeito Shadowbox em videos:

Para usar este efeito com Vídeos o procedimento é um pouco mais complicado.
shadowbox
É necessário que se copie o link fornecido no embed do Vídeo, geralmente após o “src=” como a parte destacada em vermelho. No exemplo abaixo, o código foi retirado do youtube. Veja:

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/8VgLKXD-BoY&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/8VgLKXD-BoY&hl=pt_BR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Pegue o link do vídeo fornecido que aparece no “embed” e cole-o no código de aplicação para o uso do shadowbox no video.
Para usar esse recurso em vídeos, use o código abaixo.

<a title="TITULO-AQUI" href="LINK-DO-VIDEO-AQUI" rel="shadowbox;width=480;height=385"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="SEU-TITULO-AQUI" border="0" alt="" src="URL-DA-IMAGEM-MINIATURA-DO-VIDEO" width="150" height="150"></a>

Notem que no código há necessidade de atribuir as dimensões de altura e largura para exibição do vídeo (em width=480;height=385). Esta Dimensões são necessárias, porém, podem ser personalizadas. Eu aconselho que você utilize as mesmas que são fornecidas no código “embed” do video.
Demo

Os sites de videos que suportaram o efeito shadowbox são:
www.youtube.com.br
www.megavideo.com
www.vimeo.com
www.vzaa.com
www.yahoovideo.com
www.googlevideo.com

Efeito Shadowbox em links:

Também é possível usar o mesmo efeito em links. Para Exibir o efeito através de link, basta apenas acrescentar a parte que mostra a miniatura da imagem como no exemplo a baixo.

<a title="TITULO-AQUI" href="URL-DA-IMAGEM" rel="shadowbox">TEXTO DO LINK AQUI</a>
Demo

Vale Lembrar que para 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.

[alerta]Lembrando que, a funcionalidade deste script pode variar de acordo com o template.
Caso este script não funcione em seu blog, leia este artigo: Por que alguns scripts não funcionam no meu blog?, talvez você encontre resposta para o seu problema.[/alerta]

You Might Also Like

0 comentários

Facebook

Visitas

Flickr Images

Facebook 2018