Como colocar o Light Box Image Viewer no Blogger

Ele é um visualizador de imagens muito elegante usando javascript . Primeiro de tudo eu gostaria de dar os créditos ao criador original da caixa de luz, Lokesh Dhakar

Eu também acrescentei algumas demos para este post. Se você não tem certeza, o que é lightbox, então dê uma olhada nos dois demos neste Post. Isso realmente vai ajudá-lo na construção de uma galeria bem ao estilo de blog.

Etapas da instalação

1.Login para o seu Painel do Blogger
2.Ir para Design e Editar o HTML
3.Encontre este pedaço de código:

</head>

E substitua por esse:


 
<!--Light Box Code -->
<style>
#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer&gt;#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1g7ATFPacXOMc7T-ippXwrqsIXpNoVNNdtAcVMnOv-zM8S8yrrJm7jyJHlrFSxusUeIKT4b-xK2Cx3KZPOzPd8yXe6mxI4_eiRglT_rvRRM54O7brrUWqOTl3MBK1pZoEJIqn3J5MyFY/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Dq0hWNv_4IVlXFE0Rd1qPvkqFPENlxwBabv1AUi0pPLVPIG4Fex2g-d0aAks-SnPkg982rfV9UvWx5fJpqM_H71gt4SSRUs-RXSY2Gw3Isohom5hMiJ7az8HWeSjq4aoXVNLrdYLDdY/) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }         
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}      

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code -->
</head>

Adição de imagens 
Agora que você adicionou os scripts e estilos necessários para a parte lightbox.Next é adicionar as nossas imagens ..
Você também pode adicionar legendas às imagens, além de várias imagens do grupo em álbuns. Primeiro upload de sua foto usando o upload de fotos blogueiro tool.Now alternar para o modo de edição HTML do editor de mensagens
Veja as instruções nestas imagens. (Clique na imagem para ver maior )
Certifique-se que você exclua o h- de s1600-h . Agora você deve ser capaz de ver a imagem (que você carregou) em uma sobreposição LightBox
Opções explicado ...
adicionar rel = "lightbox" title = "Seu legenda da imagem" irá criar um visualizador de mesa de luz para a imagem única.
Demo de uma única imagem
Criar um álbum com a caixa de luz
Se você está fazendo um álbum de imagens múltiplas, em seguida, adicionar rel = "lightbox [albumName]" title = "Sua imagem"  a cada uma das imagens presentes nesse álbum. Imagens com o mesmo albumName constituirá uma caixa de sobreposição de luz única, e você pode atravessar o álbum utilizando o seguinte e anterior botões.Imagens em um álbum pode, obviamente, têm legendas diferentes, mas um albumName comum. Você pode fazer vários álbuns em um único post, escolhendo nomes de álbuns diferentes.
Demo de um álbum Box Light
Instruções de Atualização [Para atualizar o antigo código.
Esta parte é aplicável somente para aqueles que já adicionou a caixa de luz (Antes de 28 de dezembro de 2010). Outros podem pular esta parte. O código  teve algum conflito com todos os gadgets . Agora ele foi resolvido. Graças a Natalia e Element-J21, que forneceu-nos com a correção (via comentários). Portanto, se você gostaria de atualizar seu código para esta versão não-conflito, siga estas  instruções .
1. Ir para o Projeto 
 Editar HTML
e procure (Ctrl + F)
http://files.bloggerplugins.org/lbox/js/scriptaculous.js
substituir este com

http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js
2.  Buscar 
http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js
e substituí-lo

http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js
3. Salve seu modelo.

Fonte:http://www.bloggerplugins.org