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.

Comentários (7)

Carregando... Entrando...
  • Entrou como
Primeiramente gostaria de agradecer pelo otimo tutorial, eu estava tentando usar o lightbox do jquery , mas ele estava dando conflito com outro codigo java do meu blogger e cabava desabilitando o outro codigo, usei seu tutorial e consegui utilizar o outro codigo junto sem problema de conflito, mas eu gostaria de saber se tem como criar uma galeria de fotos , tipo quando a imagem aumenta colocar as setas para passar pro proxima foto sem precisar voltar a pagina, desde já agradeço pela atenção e muito obrigado
1 resposta · activo há 737 semanas
Tem sim Maykel!
Eu não consigo testar agora, mas no docs do Dojo ( http://docs.dojocampus.org/dojox/image/Lightbox ) explica que colocando no link o atributo group ele vai agrupar todos os links com o mesmo valor de group.

Algo como: http://pastebin.com/p9b2ZjLi

(edit: desculpa por não ter notado que o código tinha ficado ilegível)

Pode-se fazer isso de maneira automática pelo javaScript, mas isso pode dar um pouco mais de trabalho. Levando em conta o container que cada post tem, vc pode iterar as imagens dentro dele e colocar pra elas o mesmo group.
Gostaria de agradecer pela atenção, mas infelizmente sou muito leigo nesta area, não consegui fazer funcionar, desde ja agradeço pela sua resposta e agradeço pelo tutorial por que o sistema normal de exibição do dojo que você ensinou no seu tutorial esta funionando 100% sem problemas e é super rapido, muito obrigado
1 resposta · activo há 737 semanas
Eu aproveitei a sua ideia e implementei aqui no meu blog o group por post.
Esse é código. Basta substituir o script antigo:
http://pastebin.com/yXyvnZuz

Vale lembrar que esse código é especifico para o esse tema e pode não funcionar em outros temas, pq é dependente da classe hentry sendo usada como container do post.

Mas adaptar o código deve ser fácil pra outros blogs e temas não deve ser muito complicado, basta identificar o container no post - no meu caso a classe hentry - então substituir no javascrit.

Se quiser testar antes pra ver como fica, eu coloquei uma imagem extra nesse post!
Olha eu aqui de novo, olha desculpa eu devo ser muito burro ou desligado não to conseguindo fazer, olha lhe agradeço imensuravelmente por suas explicações mas não to conseguindo, deixo a seguir o codigo xml do meu blog https://docs.google.com/viewer?a=v&pid=sites&... desculpa se estiver te encomodando, é que sou autodidata e vo me virando nos trancos e barrancos mas agora peguei um trampo que é maior que eu, muito obrigado!!!!
Ha e deixo o endereço se acaso vc quiser ver como ele é http://radionacoes.blogspot.com/, muito obrigado pela força!!!!
Muito bom cara, funcionou perfeitamente no meu blog!

Ótimo post, parabéns pelo trabalho....

Publicar novo comentário

Comments by