Colocando o efeito Lightbox em blogs do Blogger

Eu já ensinei aqui no blog como colocar o efeito Shadowbox em blogs do Blogger. Porém, neste artigo eu irei mostrar como instalar o efeito Lightbox em blogs do Blogger. Tanto o Shadowbox quanto o LightBox, são scripts que têm como função adicionar uma melhor visualização às imagens do blog. Inclusive, o Shadowbox foi criado com base no Lightbox. O efeito criado por esses scripts, são conhecidos também como "janelas modulares". A grande diferença entre estes dois efeitos, é o estilo da janela e os tipos de mídias que podem ser abertos com cada um.

Imagem por: Toolmantim

Por exemplo, o ShadowBox abre diversos tipos de arquivo, dentre eles estão: imagens, páginas de sites, arquivos em flash, vídeos etc.; o LightBox é bem mais limitado, só serve para abrir imagens, mas, em compensação, possui uma interface bem mais bonita e elegante. Mas melhor do que falar sobre o efeito, é demonstrá-lo. Para ver alguns exemplos do efeito Lighrbox em funcionamento, visite nosso blog de testes.

ATENÇÃO: devido à utilização da biblioteca Prototype para criar o efeito Lightbox, qualquer tipo de hack, elemento ou gadget que funcione com o a biblioteca JQuery (exemplo: gadget de Seguidores), não irá funcionar! Instale este efeito apenas se você não tiver nada em seu blog que utilize a biblioteca jQuery.

Instalando o script do efeito no blog


Neste primeiro passo, veremos como instalar o script que gerará o efeito no blog, a instalação é bem simples, mas você deve prestar atenção em todos os passos para não haver nenhum tipo de problema.

1. Primeiramente, baixe e descompacte as imagens e os códigos que irão compor o efeito, clicando nesse link.

2. Após ter feito o download, descompacte o arquivo e hospede as imagens que estão dentro da pasta "Imagens" no seu servidor. Caso você não tenha um servidor, aconselho que as hospede no Picasa Web.

3. Depois de hospedar as imagens, vá para a pasta "Lightbox CSS" e abra o arquivo lightbox usando um dos dois editores de texto do windows: Bloco de notas ou o Wordpad — não use o Word.

4. No meio dos códigos, procure a parte "IMAGEM/prevlabel.gif" e substitua-a pelo endereço da imagem que você hospedou — preste atenção no nome da imagem para substituí-la corretamente. Substitua também o código "IMAGEM/nextlabel.gif" pela respectiva imagem.

5. Depois de ter feito as duas substituições, feche o editor de textos. Uma mensagem aparecerá perguntando se você deseja salvar as alterações, clique no botão Sim.

6. Vá na pasta "Lightbox JavaScript" e abra (também usando um dos dois editores de texto citados acima) o arquivo lightbox. Dentro deste arquivo, você terá que fazer 2 substituições. Elas serão feitas no começo do artigo, mas para facilitar o trabalho, eu copiei a parte do código que vocês terão que alterar e destaquei em vermelho, veja o exemplo abaixo.

// -----------------------------------------------------------------------------------
 
//
// Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: 'IMAGEM/loading.gif',
fileBottomNavCloseImage: 'IMAGEM/closelabel.gif',
 
overlayOpacity: 0.8, // controls transparency of shadow overlay


Substitua as partes que foram destacadas em vermelho pelo endereço das respectivas imagens. Após substituir, feche o editor de textos e você verá, novamente, uma mensagem perguntando se você deseja salvar as alterações, novamente clique no botão Sim.

NOTA: você tem total liberdade para utilizar as imagens que estão na pasta de imagens, ou para utilizar suas próprias imagens, mas saiba que dependendo do tamanho da imagem que você for usar, você terá que fazer ajustes no arquivo CSS.

7. Agora que você já substituiu o endereço de todas as imagens, hospede todos os arquivos que estão dentro das pastas "Lightbox CSS" e "Lightbox JavaScript" no seu servidor ou qualquer outro lugar que desejar — eu utilizo o site Webs para armazena-los.
8. Agora iremos instalar o código no blog. 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.

9. Clique no botão Editar HTML, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

</head>

10. Imediatamente acima deste código, adicione este outro código.

<!-- Início do código do efeito Lightbox -->
 
<link href='link-do-arquivo-lightbox.css' rel='stylesheet' type='text/css' media='screen'/>
<script src='link-do-arquivo-prototype.js' type='text/javascript'/>
<script src='link-do-arquivo-scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='link-do-arquivo-lightbox.js' type='text/javascript'/>
 
<!-- Fim do código do efeito Lightbox -->


11. Substitua as partes destacadas em vermelho, pelo endereço dos arquivos que você acabou de hospedar, mas preste atenção no nome dos arquivos para substituir corretamente.

ATENÇÃO: repare que não há uma chamada para os arquivos "builder" e "effects", porém, eles devem estar hospedados no mesmo local que os outros scripts.

12. Para finalizar, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo. Pronto, o efeito já estará instalado em seu blog, agora basta que você o aplique nas imagens!

Aplicando o efeito Lightbox nas imagens dos artigos


Infelizmente, esse efeito deve ser aplicado manualmente nas imagens do blog. O efeito é bem fácil de ser aplicado, e é semelhante ao do efeito Shadowbox.

NOTA: é importante que você não use imagens muito grandes, pois, diferente do Shadowbox, o Lightbox não redimensiona as imagens para que caibam na tela.

Quando você estiver escrevendo um novo artigo, acesse a opção HTML do editor, e adicione um dos códigos que serão mostrados abaixo, no local que você quer que a imagem apareça.

Imagem com miniatura nos artigos - processo 1

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

<a href="link-da-imagem-em-tamanho-original" rel="lightbox" title="título-da-imagem/legenda"><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="lightbox", pois esse código será responsável por indicar ao navegador que a imagem em questão deve ser aberta com o Lightbox. Veja um exemplo de como ficará o efeito, em nosso blog de testes.

Imagem com miniatura nos artigos - processo 2

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

<a href="link-da-imagem-em-tamanho-original" rel="lightbox" title="título-da-imagem/legenda"><img src="link-da-imagem-em-tamanho-original" border="0" alt="" width="320"/></a>

Substitua as partes destacas em colorido pelo que é pedido, 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 com miniatura

Além de mostrar uma única imagem, o Lightbox 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="lightbox" para rel="lightbox[nome-da-galeria]" para cada imagem que você queira que apareça na galeria. Veja um exemplo no código mostrado abaixo.

<a href="link-da-imagem-1-em-tamanho-original" rel="lightbox[galeria-1]" title="título-da-imagem-1/legenda"><img src="link-da-imagem-1-em-tamanho-original" border="0" alt="" width="100"/></a>
 
<a href="link-da-imagem-2-em-tamanho-original" rel="lightbox[galeria-1]" title="título-da-imagem-2/legenda"><img src="link-da-imagem-2-em-tamanho-original" border="0" alt="" width="100"/></a>
 
<a href="link-da-imagem-3-em-tamanho-original" rel="lightbox[galeria-1]" title="título-da-imagem-3/legenda"><img src="link-da-imagem-3-em-tamanho-original" border="0" alt="" width="100"/></a>
 
<a href="link-da-imagem-4-em-tamanho-original" rel="lightbox[galeria-1]" title="título-da-imagem-4/legenda"><img src="link-da-imagem-4-em-tamanho-original" border="0" alt="" width="100"/></a>
 
<a href="link-da-imagem-5-em-tamanho-original" rel="lightbox[galeria-1]" title="título-da-imagem-5/legenda"><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 com miniaturas

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

<a href="link-da-imagem-1-em-tamanho-original" rel="lightbox[galeria-férias]" title="título-da-imagem-1/legenda"><img src="link-da-imagem-1-em-tamanho-original" border="0" alt="" width="100"/></a>
 
<a href="link-da-imagem-2-em-tamanho-original" rel="lightbox[galeria-carros]" title="título-da-imagem-2/legenda"><img src="link-da-imagem-2-em-tamanho-original" border="0" alt="" width="100"/></a>
 
<a href="link-da-imagem-3-em-tamanho-original" rel="lightbox[galeria-carros]" title="título-da-imagem-3/legenda"><img src="link-da-imagem-3-em-tamanho-original" border="0" alt="" width="100"/></a>
 
<a href="link-da-imagem-4-em-tamanho-original" rel="lightbox[galeria-férias]" title="título-da-imagem-4/legenda"><img src="link-da-imagem-4-em-tamanho-original" border="0" alt="" width="100"/></a>
 
<a href="link-da-imagem-5-em-tamanho-original" rel="lightbox[galeria-carros]" title="título-da-imagem-5/legenda"><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 links


Para colocar o efeito Lightbox 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-original" rel="lightbox" title="título-da-imagem/legenda">Clique aqui para ver a imagem</a>

Galeria de imagens em link

<a href="link-da-imagem-1-em-tamanho-original" rel="lightbox[galeria-2]" title="título-da-imagem-1/legenda">Clique aqui para ver a imagem</a>
<div style="visibility: hidden;display: none;height: 0;">
<a href="link-da-imagem-2-em-tamanho-original" rel="lightbox[galeria-2]" title="título-da-imagem-2/legenda">Clique aqui para ver a imagem</a>
 
<a href="link-da-imagem-3-em-tamanho-original" rel="lightbox[galeria-2]" title="título-da-imagem-3/legenda">Clique aqui para ver a imagem</a>
 
<a href="link-da-imagem-4-em-tamanho-original" rel="lightbox[galeria-2]" title="título-da-imagem-4/legenda">Clique aqui para ver a imagem</a>
 
<a href="link-da-imagem-5-em-tamanho-original" rel="lightbox[galeria-2]" title="título-da-imagem-5/legenda">Clique aqui para ver a imagem</a>
</div>


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

E este é o modo que o lightbox deve ser aplicado nas imagens. 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 dos artigos, você pode aplicá-lo também nas imagens dos gadgets, e quaisquer outras imagens do blog, onde você possa adicionar o rel="lightbox". Se você teve qualquer tipo de dúvida sobre o artigo, sinta-se a vontade para participar postando um comentário.

Atualização — 29.09.2011 às 03h50
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger, e para uma reformulação do artigo. Se você não gostou do efeito Lightbox, teste o efeito Shadowbox.

Atualização — 19.09.2011 às 01h30
A equipe do Blogger lançou recentemente um efeito lightbox padrão para a plataforma. Você pode ler mais sobre o assunto nos artigos citados abaixo.

Lembre-se que se você instalar esse efeito em seu blog, você deve desativar o lightbox padrão do Blogger, para que não ocorra nenhum tipo de conflito quado os leitores clicarem nas imagens do seu blog.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foi postado 1 comentário neste artigo!

  1. Caraca, muito bom esse post. Não só isso, o site todo é muito bom.
    vlw mesmo.
    Ajudou muito.

    ResponderExcluir