Olá querido leitor, eu já ensinei aqui no blog como colocar o efeito Shadowbox no Blogger. Porém, neste artigo, irei mostrar como instalar o efeito Lightbox no 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.
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 ficar falando sobre o efeito, é demonstrá-lo! Para ver alguns exemplos do efeito em funcionamento, visite nosso blog de testes.
Atenção: devido à utilização da biblioteca Prototype para criar o efeito do 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 que utilize a biblioteca JQuery.
Agora vamos ao tutorial de como colocar este 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 no botão abaixo.
Download ▼
2. Hospede as imagens que estão dentro da pasta “Imagens” no seu servidor, caso não tenha um servidor, aconselho que as hospede no Picasa Web.
3. Depois de hospedar as imagens, vá na pasta “Lightbox CSS” e abra o arquivo lightbox usando um dos dois editores de texto do windows: bloco de notas ou 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 fazer 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 4 substituições. Para facilitar o trabalho, eu copiei a parte do código que vocês terão que alterar e destaquei emvermelho.
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.
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 ficar falando sobre o efeito, é demonstrá-lo! Para ver alguns exemplos do efeito em funcionamento, visite nosso blog de testes.
Instalando o script no blog
Agora vamos ao tutorial de como colocar este 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 no botão abaixo.
2. Hospede as imagens que estão dentro da pasta “Imagens” no seu servidor, caso não tenha um servidor, aconselho que as hospede no Picasa Web.
3. Depois de hospedar as imagens, vá na pasta “Lightbox CSS” e abra o arquivo lightbox usando um dos dois editores de texto do windows: bloco de notas ou 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 fazer 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 4 substituições. Para facilitar o trabalho, eu copiei a parte do código que vocês terão que alterar e destaquei emvermelho.
// -----------------------------------------------------------------------------------
//
// Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: 'IMAGEM/loading.gif',
fileBottomNavCloseImage: 'IMAGEM/closelabel.gif',
overlayOpacity: 0.8, // controls transparency of shadow overlay
animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)
borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable
// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Imagem",
labelOf: "de"
}, window.LightboxOptions || {});
// -----------------------------------------------------------------------------------
var Lightbox = Class.create();
Lightbox.prototype = {
imageArray: [],
activeImage: undefined,
// initialize()
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
initialize: function() {
this.updateImageList();
this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1;
this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration
// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
// If animations are turned off, it will be hidden as to prevent a flicker of a
// white 250 by 250 box.
var size = (LightboxOptions.animate ? 250 : 1) + 'px';
// Code inserts html at the bottom of the page that looks similar to this:
//
// <div id="overlay"></div>
// <div id="lightbox">
// <div id="outerImageContainer">
// <div id="imageContainer">
// <img id="lightboxImage">
// <div style="" id="hoverNav">
// <a href="#" id="prevLink"></a>
// <a href="#" id="nextLink"></a>
// </div>
// <div id="loading">
// <a href="#" id="loadingLink">
// <img src="IMAGEM/loading.gif">
// </a>
// </div>
// </div>
// </div>
// <div id="imageDataContainer">
// <div id="imageData">
// <div id="imageDetails">
// <span id="caption"></span>
// <span id="numberDisplay"></span>
// </div>
// <div id="bottomNav">
// <a href="#" id="bottomNavClose">
// <img src="IMAGEM/close.gif">
// </a>
// </div>
// </div>
// </div>
// </div>
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.
Informação: você tem total liberdade para utilizar as imagens que estão na pasta de imagens, ou para utilizar suas próprias imagens, mas, 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 mais informações, leia o artigo abaixo.
9. Clique no botão Editar HTML e, em seguida, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.
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 mais informações, leia o artigo abaixo.
- Como utilizar o site Webs para hospedar arquivos do Blogger - Bloggando Na Web
9. Clique no botão Editar HTML e, em seguida, 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: note 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.
O método para aplicar o efeito nas imagens do blog, é semelhante ao do efeito Shadowbox. Sendo assim, também deve ser inserido manualmente em cada imagem.
Atenção: é 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, como ilustra a imagem abaixoescolha a aba “Editar HTML”, como mostrado na imagem abaixo.
E adicione um dos códigos, que serão mostrados, 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.
12. Para finalizar, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.
Aplicando o efeito nas imagens
O método para aplicar o efeito nas imagens do blog, é semelhante ao do efeito Shadowbox. Sendo assim, também deve ser inserido manualmente em cada imagem.
Quando você estiver escrevendo um novo artigo, acesse a opção HTML do editor, como ilustra a imagem abaixoescolha a aba “Editar HTML”, como mostrado na imagem abaixo.
 |
| Modo HTML do editor de artigos |
E adicione um dos códigos, que serão mostrados, 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.
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" pararel="lightbox[nome-da-galeria]" para cada imagem que você queira que apareça na galeria. Veja o código mostrado abaixo.
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" pararel="lightbox[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-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.
► 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.
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
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:0px;">
<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>
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 widgets, 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, que, assim que possível, responderemos.
Atualização — 29.09.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 Lightbox, teste o efeito Shadowbox.
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 widgets, 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, que, assim que possível, responderemos.
Atualização — 29.09.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 Lightbox, teste o efeito Shadowbox.
