Nos posts anteriores, mostrei como colocar um slider com o Unslider e como colocar um slider com o BxSlider no seu blog.

Agora, uma solução mais extrema: automatizar a criação de slider. Com essa opção, qualquer post que tenha mais de uma foto e não esteja marcado para não ter slider terá automaticamente a criação de um slide.

Para fazer isso, primeiro é preciso incluir o CSS do BxSlider no seu blogger. Vá na configuração de modelo, Personalizar, Avançado, Adicionar CSS e inclua o conteúdo do CSS do BxSlider.

Depois disso, você precisa configurar o BxSlider para ser acionado automaticamente. Para isso, você deve acessar o layout do seu site e incluir um gadget do tipo "HTML/JavaScript". Nesse gadget, você deve incluir o seguinte código:

 <script src="//code.jquery.com/jquery-latest.min.js"> </script>   
 <script src="https://googledrive.com/host/0Bz60gXzIeiEqUHdFVHhtSWdUWTQ"></script>  
 <script src="https://googledrive.com/host/0Bz60gXzIeiEqWENnTHF5cVdIdzg"></script>  

Pronto. Seu blog está preparado para transformar em slider qualquer post que tenha mais de uma imagem. Para impedir que isso ocorra em algum post, ao editar no modo HTML, inclua o seguinte código:

 <div class="noslide"></div>  

Lembrando que só funciona se o código for inserido no modo de edição HTML.

Abaixo, um Slider gerado automaticamente, apenas adicionando imagens ao post.

Leia Mais

No post anterior, mostrei como colocar o Unslider no seu blogspot. Nesse post, mostrarei como configurar outro slider: o BxSlider. A vantagem de colocar o BxSlider é que ele tem um número muito grande de configurações, por isso é muito mais versátil.

Uma desvantagem do BxSlider é que ele não vem por padrão com a navegação dos slides pelo teclado, mas isso pode ser implementado.

O primeiro passo para incluir o BxSlider é adicionando o CSS no seu modelo. Para isso, vá na configuração de modelo, Personalizar, Avançado, Adicionar CSS e inclua o conteúdo do CSS do BxSlider. Esse arquivo de estilos foi modificado do original para pegar as imagens de uma url externa.

Teremos que incluir os JavaScript. Para isso, você deve acessar o layout do seu site e incluir um gadget do tipo "HTML/JavaScript". Nesse gadget, você deve incluir o seguinte código:

 <script src="//code.jquery.com/jquery-latest.min.js"></script>  
 <script src="https://googledrive.com/host/0Bz60gXzIeiEqUHdFVHhtSWdUWTQ"></script>  

Agora, o seu blog está pronto para receber o BxSlider. Crie um post, insira as imagens que você quer que fiquem no slider em sequência. Depois que inserir as imagens, mude o modo de edição para HTML. Só vai funcionar se você inserir os códigos no modo HTML.

Identifique o bloco de imagens que você acabou de inserir. Antes do início do bloco, você deve inserir uma div com um identificador para o slider. No nosso exemplo, usaremos o id "testeBxSlider".

 <div id="testeBxSlider">  

No fim do bloco, você deve encerrar a div inserindo o código abaixo:

 </div>  

Agora, no final do arquivo, insira o seguinte código para ativar o slider, substituindo o testeBxSlider pelo identificador que você colocou na sua div.

Cuide para que esse identificador seja único pois se você usar o mesmo identificador, pode dar problema caso mais de um post com o mesmo identificador seja exibido na mesma página.

 <script type="text/javascript">  
 $(document).ready(function(){  
   var container = $("#testeBxSlider");  
   /* Prepara as imagens para serem exibidas no slider */  
   while(container.find("div.separator img").length > 0) {  
     container.find("div.separator img").unwrap();  
   }  
   container.find("div.separator").remove();  
   container.find("img").wrap("<div class='bximg' />");  
   container.children().not("div.bximg").remove();  
   container.find("img").css({"margin-left":"auto", "margin-right":"auto", "display":"block"}); // Centraliza imagem  
   container.bxSlider({  
     slideSelector: "div.bximg"  
   });  
 });  
 </script>  

Pronto. Seu Slider está funcionando. Note que, nesse último trecho de código, você pode configurar as opções do BxSlider no momento da chamada de "container.bxSlider". Também tem um trecho para centralizar as imagens. Se você não quer suas imagens centralizadas, pode remover essa linha. Abaixo, um exemplo do uso desse slider.

Leia Mais

Desenvolvi uma maneira de criar um slider das suas fotos em uma postagem do blogspot, utilizando o Unslider. Só não consegui desativar o slider do blogspot de quando você clica na foto do post.

Mesmo tendo desenvolvido o script especialmente para o Blogger, ele pode ser utilizado em qualquer site, desde que carregadas as dependências e o estilo especificados no post.

Para colocar o slider, primeiramente você deve incluir três scripts. Para isso, você deve acessar o layout do seu site e incluir um gadget do tipo "HTML/JavaScript". Nesse gadget, você deve incluir o seguinte código:

 <script src="//code.jquery.com/jquery-latest.min.js"></script>  
 <script src="//unslider.com/unslider.min.js"></script>  
 <script type="text/javascript" src="http://yourjavascript.com/52113791313/myslider.js"></script>  

Esse código inclui o JavaScript do JQuery, o JavaScript do Unslider e o JavaScript que eu criei para auxiliar a implantação do slider.

Depois disso, você deve incluir o CSS do Slider no seu modelo. Parte desse CSS foi baseado no disponibilizado por Winston Wolf no site cssdeck. Para isso, vá na configuração de modelo, Personalizar, Avançado, Adicionar CSS e inclua o seguinte código CSS (você pode alterar esse CSS de acordo com o estilo que quiser, essa é apenas uma sujestão inicial):

 .dots {  
   position: absolute;  
   left: 0;  
   right: 0;  
   bottom: 20px;  
 }  
 ol.dots {  
   margin-left: auto;  margin-right: auto;  
 }  
 .dots li {  
   display: inline-block;  
   width: 10px;  
   height: 10px;  
   margin: 0 4px;  
   text-indent: -999em;  
   border: 2px solid #000;  
   border-radius: 6px;  
   cursor: pointer;  
   opacity: .4;  
   -webkit-transition: background .5s, opacity .5s;  
   -moz-transition: background .5s, opacity .5s;  
   transition: background .5s, opacity .5s;  
 }  
 .dots li.active {  
   background: #000;  
   opacity: 1;  
 }  
 .next,  
 .prev {  
   color: #333;  
   display: inline-block;  
   font: normal bold 4em Arial,sans-serif;  
   overflow: hidden;  
   position: relative;  
   text-decoration: none;  
   width: auto;  
   opacity: .4;  
 }  
 .next,  
 .prev { padding: 0.7em 1.5em }  
 .next { text-align: right }  
 .next:before,  
 .next:after,  
 .prev:before,  
 .prev:after {  
   background: #333;  
   -moz-border-radius: 0.25em;  
   -webkit-border-radius: 0.25em;  
   border-radius: 0.25em;  
   content: "";  
   display: block;  
   height: 0.5em;  
   position: absolute;  
   right: 0;  
   top: 50%;  
   width: 1em;  
 }  
 .prev:before,  
 .prev:after { left: 0 }  
 .next:before,  
 .prev:before {  
   -moz-transform: rotate(45deg);  
   -ms-transform: rotate(45deg);  
   -o-transform: rotate(45deg);  
   -webkit-transform: rotate(45deg);  
   transform: rotate(45deg);  
 }  
 .next:after,  
 .prev:after {  
   -moz-transform: rotate(-45deg);  
   -ms-transform: rotate(-45deg);  
   -o-transform: rotate(-45deg);  
   -webkit-transform: rotate(-45deg);  
   transform: rotate(-45deg);  
 }  
 .prev:after,  
 .next:before { margin-top: -.36em }  
 .next:hover,  
 .next:focus,  
 .prev:hover,  
 .prev:focus { color: #c00 }  
 .next:hover:before,  
 .next:hover:after,  
 .next:focus:before,  
 .next:focus:after,  
 .prev:hover:before,  
 .prev:hover:after,  
 .prev:focus:before,  
 .prev:focus:after { background: #c00 }  
 .prev {  
   float:left;  
   position:absolute;  
   left:0;  
   bottom:50%;  
 }  
 .next {  
   float:right;  
   position:absolute;  
   right:0;  
   bottom:50%;  
 }  

Pronto. Seu blog está pronto para receber o slider. Agora, você vai criar seu post normalmente, inserindo em sequência as fotos que você quer que sejam incluídas no slider.

Depois de inserir as fotos, você deve mudar para o modo de edição HTML para colocar o código que possibilitará o slider. Você deve identificar o bloco HTML correspondente às fotos que você acabou de inserir.

Antes da primeira foto, você deve incluir uma div com algum seletor, que será utilizado para identificar o slider. Aqui, colocaremos uma div com o id "fotosSlide".

 <div id="fotosSlide"/>  

No fim das fotos, você deve colocar o fechamento da div, como a seguir:

 </div>  

Depois disso, você deve incluir o JavaScript que cria o slider, colocando o seletor configurado acima.

 <script type="text/javascript">  
   new mySlider({  
   container:"#fotosSlide",    // Seletor do conteiner de slides  
   includeArrows:true,       // Configura exibição das setas  
   maxHeight:600,         // Configura altura máxima do slider  
   speed: 500,           // Configura velocidade de transição de slides em milissegundos  
   delay: 3000,          // Configura tempo de permanencia em cada slide em milissegundos  
   complete: function() {},    // Função executada depois de completar o slide  
   keys: true,           // Habilita uso de teclas para passar slide  
   dots: true,           // Habilita navegação nos slides exibindo pontos embaixo deles  
   fluid: false,          // Habilita design responsivo. Pode quebrar layouts não responsivos  
 });  
 </script>  

Pronto. Você tem um slider. Lembre-se apenas de manter as fotos dentro das divs especificadas. Veja abaixo um exemplo do slider funcionando. Você pode manter mais de um slider na página, desde que o seletor deles seja diferente.

Leia Mais

Quem desenvolve para Web sabe o poder e a dor de cabeça que é trabalhar com JavaScript. Por um lado, é muito legal desenvolver uma interface bem dinâmica para o usuário sem que a página seja o tempo todo recarregada. Por outro lado, é bastante incômodo e muito comum aparecer aquelas janelinhas chatas de travamento quando tentamos inserir códigos que executam operações mais complexas.

Uma das coisas mais chatas (entre muitas outras, como depurar um código em JavaScript, que pode ser um exercício de paciência e interpretação descomunais) é que em JavaScript, o código é executado em uma única thread. Isso significa que quando a execução fica parada em um ponto, nada mais poderá ser executado. Quando temos um código JavaScript muito pesado executando, é comum o navegador travar e exibir uma janela perguntando se desejamos encerrar o script. Mas às vezes esse processamento é necessário e seria muito bom poder executar a parte mais pesada dessa tarefa em background.

A linguagem não permite que isso seja feito, mas existe uma maneira de simular esse comportamento, utilizando temporizadores (timers) para postergar a execução do código ou de parte do código mais custoso. A forma encontrada está descrita (em inglês) em um texto escrito por James Edwards. O artigo apresenta, em linhas gerais, uma forma para simular múltiplas linhas de execução em JavaScript, utilizando a função setInterval para executar, de tempos em tempos, trechos de um laço que seja muito pesado. Dessa forma, evita-se que o navegador trave e pode-se executar um pedaço da tarefa de cada vez, sem travar toda a execução.

Um sério problema que eu tive com essa abordagem foi com o uso de referências para objetos que dentro da função do setInterval. Simplesmente não foi possível acessá-las. Uma solução, inspirada pelo texto escrito no Zetafleet, pelo Colin (também em Inglês), que desencoraja o uso de setInterval por uma série de razões. Re-implementei, então, a sugestão de James Edwards utilizando o setTimeout e o código funcionou perfeitamente.

Outra iniciativa interessante que encontrei quando tentava solucionar o meu problema foi o Concurrent.Thread, que é um projeto para implementar uma execução virtual de multi threading em JavaScript. O projeto ainda está em desenvolvimento, mas a idéia é muito interessante.

Leia Mais