21 de nov. de 2011

Slide de imagens com JQuery

Por conta especialmente do pedido da Dalva do blog Garota Sentimento, hoje vou lhes ensinar a fazer esse slide de imagens igual o quê uso na página principal do blog. Aprendi a fazer esse slide no Trechy Teen. E deu um bom trabalho para fazer ele, por isso fiquei alguns dias sem postar.
» Aconselho que antes de fazer esse tutorial copiei todo o html do seu blog e cole no bloco de notas do seu computador para, caso algo dê errado, você posso colocar o html antigo de volta. E faça o tutorial calmamente prestando atenção em cada passo, pois é um tutorial muito comprido «

     Abra o seu painel do blogger e vá em Modelo (na antiga interface chamado de  Design), clique em editar html e depois marque a caixinha expandir modelos de widgets. Quando carregar aperte Ctrl + F e procure por </head> e colo logo abaixo o seguinte código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#featured&#39;).orbit({
advanceSpeed: 5000,
&#39;bullets&#39;: true,
&#39;timer&#39; : true,
&#39;animation&#39; : &#39;horizontal-slide&#39;
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>

     Agora aperte novamente Ctrl + F, mas dessa vez procure por ]]></b:skin> e logo acima cole o seguinte código:
/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
>}
div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5a60myLzfaJKdGgbEUwuO7WN0Kg0b7rtMYXFcA2WzbB9WLm6r4z1OdJVtYeu1YudcKvAYSWrAC2zwuVNEUB9ZgXCLimzewM1vDzRvQbzebCd6Snu7ziZVmioFx-3Lx0fvysPAvwuBhgOT/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
span.rotator.move {left: 0;}
span.mask.move { '
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UflvvH3Wx-1VoVBhAvc_iMqn2FibDLgsEZpnAwpTYBoYPdBbI2E9vUUoqjugku8sJ8kV4f7OEBKrevTMsXXY-m6dIjQTPALGHTRQ52meZB5q8B8x3P-1P5JsoKRcBe2uisoBTvsuZ_bZ/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmGViOce2vTipXg1-DKkdyAZ3UKzrc5OqsGjyH9VAyw1Pc7q_6JIYqwAx1Rgur_J-7lCZ06jiZBfhNLD8TwTvjVeYZAQVuDtw4u9ZhT1M4AWSVhMs_gnDYkOI1fqUKVk_-3SJ8txa8TPoo/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}
div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }
div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}
div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8); '
margin: 0;
}
.orbit-caption { display: none; }
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}
div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_md8XYY-6PD2I7FV_2Y32IYHOVFjPy240x2cbFcvPcpqjmuRyw48NgKIxrATuDha3eUZT2tMWwpwlkB-MpO7uQCi-ksI7uZ9ZBPUfVgoFdDAHCdCynS_56WwrA3yYI05G-EYT6J9q-cKS/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj-h2op5k-E-GOwg_dcZd8PPMMcK1KhJ_2CJureFRPRTm7Z4SRxjLB20E3u8oC7bLV7D22STfOTbEff6WDfx-s9X49u0OWZtuVwmTqlnFSlggZCO-3N5c23sjj7DRjFijqB0dlv-P_39P-/s1600/left-arrow.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0oFkL8Sv8ii1hmMJAH4aB9V7gPH2hk7AEoZKlBgOQsaJCjNhObR9vWwmzJDrMTxAM770zW0qBs66Ddc_2ukhHzWYpMuCQ5TYa1hZ9EFH_Y8zf4IFj_BI4ZfMAFnzY3IMLqHC4KeBrV6aY/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0; }
Personalização
     Você pode deixar o slide do jeito mesmo que está ai, mas se você quiser dar uma personalizada pode trocar ou remover as imagens de passagem do tempo, aquelas bolinhas que mostram quantos slides tem e em qual está e as setas que mudam de um slide para o outro. Para isso você vai ter que olhar imagem por imagem que há no código que você vai querer modificar, então vamos uma por uma:

  Imagem de transição do tempo
     Essas imagens estão representadas no código com as seguintes urls:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5a60myLzfaJKdGgbEUwuO7WN0Kg0b7rtMYXFcA2WzbB9WLm6r4z1OdJVtYeu1YudcKvAYSWrAC2zwuVNEUB9ZgXCLimzewM1vDzRvQbzebCd6Snu7ziZVmioFx-3Lx0fvysPAvwuBhgOT/s1600/rotator-black.png (metade da esquerda)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UflvvH3Wx-1VoVBhAvc_iMqn2FibDLgsEZpnAwpTYBoYPdBbI2E9vUUoqjugku8sJ8kV4f7OEBKrevTMsXXY-m6dIjQTPALGHTRQ52meZB5q8B8x3P-1P5JsoKRcBe2uisoBTvsuZ_bZ/s1600/timer-black.png (metade da direita)

     Localize as urls no código para modificar as imagens. Se você quiser substituí-las então faça imagens semelhantes e de mesmo tamanho, hospede em um site de hospedagem de imagens como esse e troca as urls. Eu tirei essa imagem do meu slide porque achei que fica mais bonito, se você quiser tirar também é só excluir do código as duas urls que lhes mostrei.

Imagem de pausar a transição dos slides
     Essa imagem é representa com a seguinte url:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmGViOce2vTipXg1-DKkdyAZ3UKzrc5OqsGjyH9VAyw1Pc7q_6JIYqwAx1Rgur_J-7lCZ06jiZBfhNLD8TwTvjVeYZAQVuDtw4u9ZhT1M4AWSVhMs_gnDYkOI1fqUKVk_-3SJ8txa8TPoo/s1600/pause-black.png

     Agora é só fazer a mesma coisa da imagem anterior: localizar a url e substituir pela url da nova imagem que você fez ou apagar a url se você não quiser ter essa imagem no seu slide. Se você retirou as imagens de transição de tempo aconselho que também retire essa se não fica bem estranho.

 Setas para passar de um slide para outro
     Das imagens editáveis são as mais importantes do slide, e são representadas pelas seguintes urls:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj-h2op5k-E-GOwg_dcZd8PPMMcK1KhJ_2CJureFRPRTm7Z4SRxjLB20E3u8oC7bLV7D22STfOTbEff6WDfx-s9X49u0OWZtuVwmTqlnFSlggZCO-3N5c23sjj7DRjFijqB0dlv-P_39P-/s1600/left-arrow.png (seta da esquerda)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_md8XYY-6PD2I7FV_2Y32IYHOVFjPy240x2cbFcvPcpqjmuRyw48NgKIxrATuDha3eUZT2tMWwpwlkB-MpO7uQCi-ksI7uZ9ZBPUfVgoFdDAHCdCynS_56WwrA3yYI05G-EYT6J9q-cKS/s1600/right-arrow.png (seta da direita)

     Novamente localizem a url das imagens e depois de fazer a suas próprias setas troque as urls das que já estão no código pelas das novas setas. Aconselho não retirar essas dois imagens pois são importantes para seus visitantes conseguirem "navegar" pelos seus slides.

 Bolinhas que representam cada slide
     Representadas pelo seguinte url:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0oFkL8Sv8ii1hmMJAH4aB9V7gPH2hk7AEoZKlBgOQsaJCjNhObR9vWwmzJDrMTxAM770zW0qBs66Ddc_2ukhHzWYpMuCQ5TYa1hZ9EFH_Y8zf4IFj_BI4ZfMAFnzY3IMLqHC4KeBrV6aY/s1600/bullets.png

     Essa imagem não acho muito necessário, na minha opinião dá pra excluir numa boa, mas se você quiser continuar com essas bolinhas pode fazer uma imagem nova e mudar a url do código assim como já ensinei anteriormente nesse tutorial.

Adicionando Gadget
     Para adicionar um slide desses ao seu layout basta salvar tudo que já fizemos acima, ir em Layout (na antiga interface do blogger terá que clicar em Design) no seu painel do blogger, clicar em adicionar um gadget, escolher html/java script e colar o seguinte código:

<center><div id='featured'>
<a href="LINK DA IMAGEM 1"><img rel='foto1' src="IMAGEM 1" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto1'>DESCRIÇÃO DA IMAGEM 1</span>
<a href="LINK DA IMAGEM 2"><img rel='foto2' src="IMAGEM 2" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto2'>DESCRIÇÃO DA IMAGEM 2</span>
<a href="LINK DA IMAGEM 3"><img rel='foto3' src="IMAGEM 3" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto3'>DESCRIÇÃO DA IMAGEM 3</span>
<a href="LINK DA IMAGEM 4"><img rel='foto4' src="IMAGEM 4" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO DA IMAGEM 4</span>
</div></center> 
     Onde estiver escrito link da imagem substitua pelo endereço da página para a qual o leitor será redirecionado quando clicar em cada slide que passar respectivamente. Onde estiver imagem substitua pela url da imagem que será exibida em cada slide. E está escrito descrição da imagem você escreve um pequeno texto descrevendo sobre o que fala a página cuja a qual cada slide se refere.

Qualquer dúvida é só perguntar

13 comentários:

Dalva Caroline disse...

oiie rafinha! obg por postar o tutorial ^^ vou colocar os slides amanhã no meu blog de tutoriais! *------* amei demais! bjinhos

Letícia Pereira disse...

Nossa quantos códigos rsrsr Tem que gostar muito de HTML, eu ate q me arrisco de vez enquando... Eu axo um charme esses slides, vou pensar na possibilidade pra próxima reforma do meu blog... Bjus

http://sublimesblog.blogspot.com/

Cachola Literária disse...

Olá!Essa é a minha primeira visita ao blog.Vi seu link em outro blog e resolvi entrar para conhecer aqui! Amei e já tô seguindo. Seu blog é lindo demais!Adorei o post porque normalmente tomo uma coça do html...rsss.
Te convido a visitar e seguir o meu blog também.Aguardo sua visita!
Bjs!
Zilda Mara
http://cacholaliteraria.blogspot.com/

Anônimo disse...

oi tudo bem ? escolha sua favorite e vote, pra ela ganhar no concurso beijos :*

http://iwantonlyou.blogspot.com/2011/11/looks-e-votacao.html

Anônimo disse...

Olá Rafa!
Adorei seu blog(principalmente essa postagem,pena que não consegui fazer kk)
Estou te seguindo!!

Pode me ajudar a chegar na minha meta de 50 seguidores?

http://s-trawberrysugar.blogspot.com/

Beijo Nêssa!

Ellen disse...

obrigada pela dica!
www.dreams-with-creativty.blogspot.com
seguindo...segue de volta?

Kayla Cristina disse...

Miiga! mil perdões por não colocar o seu link antes!
mais já coloquei!
não se preocupe viiu!
bjookas
kah santos :)
http://fluorescentadolecent.blogspot.com/

Mandy disse...

Fica lindo o slide.
Ótima dica, Flor.

Aproveitando, tem PROMOÇÃO de natal lá no Sook. Passa por lá e confira!!!
http://the-sook.blogspot.com/

BjO

Mikah ミカ disse...

mitooo util o tuto!!!
http://swett-girls.blogspot.com

Mariana disse...

Eu adoro slides no blog, mas quando vou colocar no meu, acho feio #FATO
Post novo: Girl Teen - Comenta?
Concurso, Participa?

Camila Carvalho disse...

Achei o que estava procurando, hihi. Ótimo blog, excelente design. Voltarei sempre :D
Faz um favorzinho pra mim? Vota em Garota Ambulante na enquete que ta rolando no http://tendencias-teens.blogspot.com/, por favor? =) Obrigada.

garotambulante.blogspot.com

Aline Maciel disse...

Estava querendo colocar esses slides no meu blog, mas nunca tinha achado um tutorial tão explicativo quanto o seu, que possibilitasse meu bom entendimento. Adorei!! Primeira visita de muitas aqui. Obrigada viu? Beijos.
http://criticandoporai.blogspot.com/
http://shakethisglitter.blogspot.com/

Lolla Souza disse...

Caraca amei seus tutorias, são bem úteis e não encontramos em qualquer lugar *-* To seguindo aqui, segue também ? http://feelings2012.blogspot.com/

2bjos *-*

Postar um comentário

- Para evitar que seu comentário venha a ser excluído, leia a política de comentários do blog.
- Antes de fazer uma pergunta dê uma olhada na página de FAQ para ver se sua pergunta já não foi respondida lá.

Obrigada por comentar. Saber que minhas postagens são valorizadas por outras pessoas é o que me faz continuar com o blog