23 setembro, 2011

Colocando o efeito Shadowbox no Blogger


Olá querido leitor do Bloggando Na Web, depois de ler um comentário com uma dúvida, postado pela leitora Ana Cavalcantti, resolvi criar este artigo para mostrar como colocar o efeitoShadowbox em um blog do Blogger.


Esse efeito também é muito conhecido na web como “janela modular”, e é muito útil para as pessoas que não querem que as imagens do blog abram em uma nova janela/aba ou que apenas querem aplicar um efeito mais moderno às imagens e vídeos do blog.

O que é o Shadowbox?


O Shadowbox é uma aplicação de visualização de mídia que suporta os tipos de arquivos mais populares da web. O Shadowbox é escrito inteiramente em JavaScript e CSS e é altamente personalizável. Usando o Shadowbox, os autores de websites podem mostrar uma grande variedade de mídias nos principais navegadores sem enviar os usuários para outra página.
Fonte: http://www.shadowbox-js.com/index.html

Atualmente eu utilizo tal efeito aqui no Bloggando Na Web, mas você pode conferir diversos exemplos desse efeito em nosso blog de testes.

Como instalar?


A instalação do script que gera esse efeito é bem simples, mas siga os passos descritos abaixo com bastante cautela para que não tenha dores de cabeça no futuro.

1. Primeiramente visite o endereço: http://www.shadowbox-js.com/download.html, para fazer o download do script.

2. Em seguida, escolha quais tipos de mídia que você quer que abram com o efeito Shadowbox, que podem ser: imagens, páginas de sites, arquivos em flash, vídeos dentre outros.

3. Escolha o idioma que você preferir - há o idioma português brasileiro!

4. Clique em cima da imagem com a inscrição “ZIP” e salve o arquivo no seu computador.

5. Após salvar o arquivo, extraia o mesmo utilizando o programa Winrar ou qualquer outro programa de sua preferência.

6. Hospede os arquivos no seu servidor. Você deve hospedar apenas os arquivos: “close.png”, “loading.gif”, “next.png”, “pause.png”, “play.png”, “previous.png” e “shadowbox.js”.

Informação: eu gosto de hospedar meus arquivos no site Webs, mas você pode hospedar no seu servidor particular caso tenha um. Se você não tiver, você pode ver como criar uma conta no site Webs, e como utilizá-lo como site de hospedagem, neste artigo.
7. Abra o arquivo “shadowbox.css” no bloco de notas e substitua os links das imagens pelo link das imagens que você hospedou.

8. Depois de substituir os links, salve o arquivo e hospede-o no mesmo lugar onde você hospedou as imagens e os outros arquivos.

9. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

10. Clique no botão Editar HTML e, em seguida, pressione Ctrl+F para abrir a janela Localizardo navegador, e procure o código abaixo.

</head>
11. Imediatamente acima deste código, adicione este outro código.

<!-- Script do efeito Shadowbox -->

<link href="link-do-arquivo-shadowbox.css" rel="stylesheet" type="text/css"/>
<script src="link-do-arquivo-shadowbox.js" type="text/javascript"/>
<script type="text/javascript">
Shadowbox.init({
    handleOversize: &quot;drag&quot;,
    modal: true
});
</script>

<!-- Fim do script do efeito Shadowbox -->

Você deve substituir o que foi destacado em vermelho pelo link dos arquivo .CSS e .JS que você hospedou, mas tome cuidado, pois como os arquivos possuem o mesmo nome, você deve saber qual é o script e qual é o CSS.

Note que você pode mudar também a parte destacada em azul para: dragresize ou none:
  • Drag: colocando esta opção, as imagens aparecerão em seu tamanho original, porém, o espaço do Shadowbox será limitado; caso a imagem seja muito grande, ao passar o mouse sobre a imagem o cursor se transformará em uma mãozinha - ou uma seta de quatro direções, depende do navegador usado -, possibilitando que a imagem seja arrastada para os lados ou para cima e para baixo, permitindo que o leitor veja as partes da imagem que estavam escondidas;
  • Resize: colocando esta opção, caso a imagem seja muito grande, ela será reduzida para um tamanho menor, para que possa aparecer completamente na tela do computador - eu não aconselho esta opção para quem irá utilizar este efeito em imagens de tutoriais, onde os leitores deverão ler algo que esteja escrito na imagem, pois as letras podem ficar muito pequenas;
  • None: colocando esta opção, nenhuma alteração será feita na imagem, porém, se ela for muito grande, poderá não aparecer completamente na tela.
Você pode mudar também, a parte destacada em rosa para: true ou false:
  • True: colocando esta opção, o leitor só poderá fechar a imagem que foi aberta com o Shadowbox, se ele clicar no “X” de fechar ou pressionar a tecla “Esc” do teclado;
  • False: colocando esta opção, o leitor poderá fechar a imagem que foi aberta com o Shadowbox, clicando no “X”, pressionando a tecla “Esc” ou clicando fora da imagem.
Existem outras opções, que você pode adicionar ao código, como por exemplo, fazer com que os vídeos comecem automaticamente quando forem abertos com o Shadowbox e etc.

Eu não explicarei todos, pois o artigo ficaria muito extenso, e as opções estão em inglês. Caso você queira ver todas as opções disponíveis, visite a página de opções do Shadowbox.

12. Para finalizar a instalação do script, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

Infelizmente, esse efeito não é automático e deve ser adicionado manualmente nos elementos (imagens, vídeos, etc) que você quer que abram com o efeito do Shadowbox. Abaixo você pode conferir como adicionar o efeito nesses elementos.

Colocando o efeito nas imagens dos artigos


Para colocar o efeito nas imagens do artigo, será necessário que você edite o HTML do mesmo. Para editar o HTML do artigo, você deve clicar na opção HTML, como mostra a imagem abaixo:

IMAGEM 113
Modo HTML do editor de artigos

Em seguida, é só você adicionar um dos códigos abaixo, dependendo do tipo de mídia que você quer usar, dentro do conteúdo do artigo.

► Imagem com miniatura - processo 1

Para usar este código, você deverá ter 2 imagens: uma imagem em tamanho original e a mesma imagem em tamanho menor.

<a href="link-da-imagem-em-tamanho-originalrel="shadowbox" title="título-da-imagem"><img src="link-da-imagem-em-tamanho-menor" border="0" alt=""/></a>
Substitua o que está destacado em colorido, de acordo com o que é pedido e não se esqueça de colocar a parte: rel="shadowbox", que é o código que irá indicar ao navegador que a imagem em questão deve ser aberta com o Shadowbox.

Veja um exemplo de como ficará o efeito, em nosso blog de testes.

► Imagem com miniatura - processo 2

Caso você não queira, ou não possa, usar 2 imagens (uma grande e outra menor), como foi mostrado no exemplo acima, use o código mostrado abaixo.

<a href="link-da-imagem-em-tamanho-originalrel="shadowbox" title="título-da-imagem"><img src="link-da-imagem-em-tamanho-original" border="0" alt="" width="320"/></a>
Substitua as partes destacas em colorido, e mude a parte destacada em rosa, pelo tamanho da imagem que você quer que a miniatura tenha.

Veja um exemplo de como ficará o efeito, em nosso blog de testes.

► Galeria de imagens

Além de mostrar uma única imagem, o Shadowbox permite que você crie uma galeria de imagens, que irão passar conforme o leitor clicar no botão Próxima imagem. O processo é o mesmo dos códigos anteriores, a única diferença é que você deve mudar a parte: rel="shadowbox" pararel="shadowbox[nome-da-galeria]" para cada imagem que você queira que apareça na galeria. Veja o código mostrado abaixo.

<a href="link-da-imagem-1-em-tamanho-originalrel="shadowbox[galeria]" title="título-da-imagem-1"><img src="link-da-imagem-1-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-2-em-tamanho-originalrel="shadowbox[galeria]" title="título-da-imagem-2"><img src="link-da-imagem-2-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-3-em-tamanho-originalrel="shadowbox[galeria]" title="título-da-imagem-3"><img src="link-da-imagem-3-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-4-em-tamanho-originalrel="shadowbox[galeria]" title="título-da-imagem-4"><img src="link-da-imagem-4-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-5-em-tamanho-originalrel="shadowbox[galeria]" title="título-da-imagem-5"><img src="link-da-imagem-5-em-tamanho-original" border="0" alt="" width="100"/></a>

Veja um exemplo de como ficará o efeito, em nosso blog de testes.

► Galerias diferentes para cada imagem

Você pode criar também, várias galerias e fazer com que cada imagem abra apenas em sua determinada galeria, para isto basta colocar nomes de galerias diferentes para cada imagem, como no exemplo abaixo.

<a href="link-da-imagem-1-em-tamanho-originalrel="shadowbox[ferias]" title="título-da-imagem-1"><img src="link-da-imagem-1-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-2-em-tamanho-originalrel="shadowbox[carros]" title="título-da-imagem-2"><img src="link-da-imagem-2-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-3-em-tamanho-originalrel="shadowbox[carros]" title="título-da-imagem-3"><img src="link-da-imagem-3-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-4-em-tamanho-originalrel="shadowbox[ferias]" title="título-da-imagem-4"><img src="link-da-imagem-4-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-5-em-tamanho-originalrel="shadowbox[carros]" title="título-da-imagem-5"><img src="link-da-imagem-5-em-tamanho-original" border="0" alt="" width="100"/></a>

Veja um exemplo de como ficará o efeito, em nosso blog de testes.

Colocando o efeito em vídeos


O processo para abrir vídeos com o Shadowbox, é o mesmo que para as imagens, mas ao invés do link da imagem, você deverá informar o endereço do vídeo - óbvio! Caso não saiba como conseguir o endereço do vídeo, veja o procedimento abaixo.

Abra um vídeo do Youtube - ou de qualquer outro site -, e procure o código de incorporação de vídeo (Embed), como ilustra a imagem abaixo.

IMAGEM 114
Obtendo o código do vídeo no Youtube

Após clicar no botão de incorporar, será exibido um código semelhante ao mostrado abaixo.

<iframe width="420" height="345" src="http://www.youtube.com/embed/9JBlharFauo?rel=0" frameborder="0" allowfullscreen></iframe>
Localize no seu código a parte que é semelhante à que foi destacada em vermelho no código acima. Após localizar o código (que termina antes do ponto de interrogação) você deverá mudar a palavra “embed” para “v” (letra V) e o link ficará como o mostrado abaixo.

http://www.youtube.com/v/9JBlharFauo
E é assim que você deve adicionar o link do vídeo ao código do Shadowbox. Agora, basta escolher um dos códigos abaixo.

► Vídeo com miniatura

<a href="link-do-vídeorel="shadowbox;height=386;width=515" title="título-do-vídeo"><img src="link-da-imagem-miniatura-do-vídeo" border="0" alt=""/></a>
Veja que você pode especificar qual será a largura (width) e altura (height) do vídeo; os valores devem ser especificados em pixels e estar separados por ponto e vírgula (;).

Veja um exemplo de como ficará o efeito, em nosso blog de testes.

► Galeria de vídeos em miniatura

Assim como as imagens, é possível criar uma galeria com vários vídeos, basta colocar o nome da galeria no atributo rel. Veja o código abaixo.

<a href="link-do-vídeo-1rel="shadowbox[divertido];height=386;width=515" title="título-do-vídeo-1"><img src="link-da-imagem-miniatura-do-vídeo-1" border="0" alt=""/></a>

<a href="link-do-vídeo-2rel="shadowbox[divertido];height=386;width=515" title="título-do-vídeo-2"><img src="link-da-imagem-miniatura-do-vídeo-2" border="0" alt=""/></a>

<a href="link-do-vídeo-3rel="shadowbox[divertido];height=386;width=515" title="título-do-vídeo-3"><img src="link-da-imagem-miniatura-do-vídeo-3" border="0" alt=""/></a>

Informação: assim como nas imagens, você pode também especificar uma galeria para cada tipo de vídeo, basta usar o código acima e mudar o nome da galeria de acordo com a sua vontade.
Veja um exemplo de como ficará o efeito, em nosso blog de testes.

Colocando o efeito em links


Para colocar o efeito Shadowbox em links, é o mesmo procedimento dos códigos mostrados acima, só que ao invés de usar imagens em miniatura, usaremos palavras. Veja os códigos abaixo.

► Imagem simples em link

<a href="link-da-imagem-em-tamanho-originalrel="shadowbox" title="título-da-imagem">Clique aqui para ver a imagem</a>
► Galeria de imagens em link

<a href="link-da-imagem-1-em-tamanho-originalrel="shadowbox[galeria]" title="título-da-imagem-1">Clique aqui para ver as imagens</a>
<div style="visibility:hidden;display:none;height:0px;">
<a href="link-da-imagem-2-em-tamanho-originalrel="shadowbox[galeria]" title="título-da-imagem-2"></a>

<a href="link-da-imagem-3-em-tamanho-originalrel="shadowbox[galeria]" title="título-da-imagem-3"></a>

<a href="link-da-imagem-4-em-tamanho-originalrel="shadowbox[galeria]" title="título-da-imagem-4"></a>

<a href="link-da-imagem-5-em-tamanho-originalrel="shadowbox[galeria]" title="título-da-imagem-5"></a>
</div>

► Video simples em link

<a href="link-do-vídeorel="shadowbox;height=386;width=515" title="titulo-do-vídeo">Clique aqui para ver o vídeo</a>
► Galeria de vídeos em link

<a href="link-do-vídeo-1rel="shadowbox[divertido];height=386;width=515" title="titulo-do-vídeo-1">Clique aqui para ver os vídeos</a>
<div style="visibility:hidden;display:none;height:0px;">
<a href="link-do-vídeo-2rel="shadowbox[divertido];height=386;width=515" title="titulo-do-vídeo-2"></a>

<a href="link-do-vídeo-3rel="shadowbox[divertido];height=386;width=515" title="titulo-do-vídeo-3"></a>
</div>

Veja exemplos do efeito aplicado em links, em nosso blog de testes.

Você pode também misturar arquivos de tipos diferentes (imagens, vídeos, animações, etc) em uma mesma galeria, para isto basta misturar os códigos acima e adicionar o mesmo nome de galeria para cada arquivo, veja como ficaria o código:

<a href="link-da-imagem-1-em-tamanho-originalrel="shadowbox[galeria-completa]" title="título-da-imagem-1">Ver galeria completa</a>
<div style="visibility:hidden;display:none;height:0px;">
<a href="link-do-vídeo-1rel="shadowbox[galeria-completa];height=386;width=515" title="título-do-vídeo-1"> </a>

<a href="link-da-imagem-2-em-tamanho-originalrel="shadowbox[galeria-completa]" title="título-da-imagem-2"> </a>

<a href="link-da-imagem-3-em-tamanho-originalrel="shadowbox[galeria-completa]" title="título-da-imagem-3"> </a>

<a href="link-da-imagem-4-em-tamanho-originalrel="shadowbox[galeria-completa]" title="título-da-imagem-4"> </a>

<a href="link-do-vídeo-2rel="shadowbox[galeria-completa]height=386;width=515" title="título-do-vídeo-2"> </a>

<a href="link-da-imagem-5-em-tamanho-originalrel="shadowbox[galeria-completa]" title="título-da-imagem-5"> </a>

<a href="link-do-vídeo-3rel="shadowbox[galeria-completa]height=386;width=515" title="título-do-vídeo-3"> </a>
</div>

Veja um exemplo de como ficará o efeito, em nosso blog de testes.

E este é o modo que o shadowbox deve ser aplicado nas imagens, vídeos e arquivos que você escolheu no momento do download do script. Explore o código e faça testes em seu blog de testes para entender melhor seu funcionamento.

Além de aplicar este efeito nas imagens e vídeos dos artigos, você pode aplicá-lo também nas imagens e vídeos dos widgets e outros elementos do blog.

Se você teve qualquer tipo de dúvida sobre o artigo, sinta-se a vontade para participar postando um comentário, que, assim que possível, responderemos.

Atualização — 21.08.2011 às 03h50
O artigo foi atualizado para refletir as recentes mudanças realizadas no painel de controle da plataforma Blogger, e para uma reformulação do artigo. Se você não gostou do efeito Shadowbox, leia este outro artigo também sobre o efeito de janela modular.

Atualização — 17.10.2011 às 12h30
Como o leitor Diego de Assis, reportou nos comentários, aparentemente há um problema na hora de fazer o download do arquivo ZIP, que gera o efeito, na página de downloads do siteShadowbox.

Esse problema ocorre somente para os usuário que estejam utilizando o navegador Google Chrome, portanto, para fazer o download, você deverá utilizar um dos navegadores a seguir:Mozilla FirefoxOpera ou Internet Explorer.