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.
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.
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.
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>
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>