segunda-feira, 9 de agosto de 2010

Implementando Lightbox no Blogspot


Eu passei um trabalho pra colocar o lightbox do jeito que eu queria aqui no blog. Então vou tirar um pouco mais desse trabalho e vou ensinar como eu fiz isso. Porque no fim das contas ficou muito pratico.

O primeiro passo é incluir um gadget de HTML/Javascript. Você faz isso na aba design, elementos da pagina no painel do seu blog. La você vai incluir um novo gadget do tipo HTML/Javascript e vai colar o seguinte scrip dentro.

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"></script>
<style type="text/css">
   @import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css";
   @import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/image/resources/Lightbox.css";
</style>
<script type="text/javascript">
dojo.require("dojox.image.Lightbox");
var dialog;
dojo.query('body')[0].setAttribute('class', 'tundra');
dojo.addOnLoad(function() {
   dialog = new dojox.image.LightboxDialog({});
   dialog.startup();
   var images = dojo.query('.lightbox');
   for(var i = 0; i < images.length; i++) {
      if(typeof(parseInt(i)) == 'number') {
         dojo.connect(images[i], 'onclick', images[i], function(event) {
            dialog.show({ title:this.title, href:this.href });
            event.stopPropagation();
            event.preventDefault();
         });
      }
   }
});
</script>
Edit: Eu criei uma versão bem mais elegante que agrega a feature de grupos de imagens no script. Tem um link pro fonte em um dos meus comment, la em baixo!

Lembre de deixar o título do gadget em branco.
Feito! Agora é só incluir a class lightbox no link das imagens nos seus posts. Algum trabalho você tinha que ter né =). Da pra por um título no link pra exibir em baixo da imagem quando o lightbox abrir.

<a class="lightbox" title="Lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6-IllTI1Bp64woglH8lMPG4dDW7fu81O4D-5KFHCnbr-qUIOh2S_O2k_MY8hkmJ7OKF7HqN2dHZhmzEFxP8XQA8jtEBISfEUxMC5kYDEvHoUr1_dZI0OolUpOfZ56KoQYAogMfgt06kQ/s1600/lightbox.jpg">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6-IllTI1Bp64woglH8lMPG4dDW7fu81O4D-5KFHCnbr-qUIOh2S_O2k_MY8hkmJ7OKF7HqN2dHZhmzEFxP8XQA8jtEBISfEUxMC5kYDEvHoUr1_dZI0OolUpOfZ56KoQYAogMfgt06kQ/s320/lightbox.jpg">
</a>
Eu optei por dojo, caso você pergunte, pois ele não depende de nenhum plugin pra fazer todo o serviço. Eu cheguei a testar com o jquery mas não existe CDN pros plugins. E CDN é ótimo para os pé rapados como eu que não tem seu próprio servidor pra hospedar os js.