11/01/2013

Tutorial: Slide automático de transição

||

Konnichiwa!!! Hoje consegui tirar meus olhinhos mais cedo do mangá para postar rsrs, e então como vão vocês? Eu vou ótima! E feliz pós falta apenas um seguidor, para a meta de 400 seguidores, e ai quem sera a minha benção? Mas chega de papo e vamos ao tutu, né? Hoje trago um slide para vocês, ele e perfeito para quem quer ter um blog estilo revista ou uma aparência mais moderna, ele é um slide automático que possui efeito de transição do JQuery . Para entenderem melhor do que eu estou falando aqui esta o exemplo: Preview  (Slide esta no final da pagina) Então gostaram?


Os códigos são meio grandes, mas o tutu e bem facil. Agora vamos aprender como colocar o slide como  o de sempre, vá ate seu HTML e usando o atalho Ctrl+F procure por ]]></b:skin>, assim que o achar cole esse código acima dele:

/* Início Slider  */#slider-container {
width: 330px;
height: 230px;
background: transparent; /* Cor de fundo*/
margin-bottom: 15px;
}

.nivoSlider {
position:relative;
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}

.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}

.nivo-caption {
position:absolute;
right:0px;
top:125px;
background: #5BC8E7; /*Cor da faixa do título*/
color:#fff;
opacity:0.8;
width: auto !important;
max-width: 690px !important;
z-index:89;
display: inline !important;
}

.nivo-caption p {
padding:10px;
margin:0;
font-size: 16px; /* Tamanho da fonte */
color: #FFF; /* Cor da fonte */
text-align: center;
}

.nivo-caption a {
display:inline !important;
color: #FFF;
}

.nivo-html-caption {
display:none;
}

.nivo-directionNav a {
display:none;
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}

.nivo-prevNav {
left:0px;
}

.nivo-nextNav {
right:0px;
}

.nivo-controlNav a {
position:
relative;
z-index:99;
cursor:pointer;
}

.nivo-controlNav a.active {
font-weight:bold;
}

#slider {
float: center;
position:relative;
width:300px;
height:200px;
background: #000 url(http://1.bp.blogspot.com/-tQLCHBExXOw/UPB9821WNGI/AAAAAAAAhrY/tQMv875NJd8/s1600/logon.png) no-repeat 50% 50%;
}

#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}

#slider a {
border:0;
display:block;
}

.nivo-controlNav {
position:absolute;
left:90px;
bottom:-40px;
}

.nivo-controlNav a {
width:22px;
height: 22px;
background: url(http://4.bp.blogspot.com/-Qkx4amXfenQ/UB8vAyBuQAI/AAAAAAAAMeY/HUMtj6XAy4Y/s1600/botao1.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:10px;
float:left;
}

.nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a {
display:none;
height:0px;
background:url(http://4.bp.blogspot.com/-rEBM9ddyz5E/T1iBiNT8MgI/AAAAAAAADkQ/8eMBD8nTGk0/s000/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}

a.nivo-prevNav {
left:15px;
}

.nivo-caption {
text-shadow:none;
}

.nivo-caption a {
color:#DDF8FF;
text-decoration:underline;
}
/* Fim do Slider */

Visualize para ver se esta tudo okay, então salve. Ainda dentro do seu HTML procure por </body>, e acima dele coloque esse código, não altere nada nele:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/*
 * jQuery Nivo Slider v2.3
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

(function(b){var a=function(j,q){var g=b.extend({},b.fn.nivoSlider.defaults,q);var m={currentSlide:0,currentImage:"",totalSlides:0,randAnim:"",running:false,paused:false,stop:false};var d=b(j);d.data("nivo:vars",m);d.css("position","relative");d.addClass("nivoSlider");var e=d.children();e.each(function(){var t=b(this);var s="";if(!t.is("img")){if(t.is("a")){t.addClass("nivo-imageLink");s=t}t=t.find("img:first")}var r=t.width();if(r==0){r=t.attr("width")}var i=t.height();if(i==0){i=t.attr("height")}if(r>d.width()){d.width(r)}if(i>d.height()){d.height(i)}if(s!=""){s.css("display","none")}t.css("display","none");m.totalSlides++});if(g.startSlide>0){if(g.startSlide>=m.totalSlides){g.startSlide=m.totalSlides-1}m.currentSlide=g.startSlide}if(b(e[m.currentSlide]).is("img")){m.currentImage=b(e[m.currentSlide])}else{m.currentImage=b(e[m.currentSlide]).find("img:first")}if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}d.css("background","url("+m.currentImage.attr("src")+") no-repeat");for(var k=0;k<g.slices;k++){var o=Math.round(d.width()/g.slices);if(k==g.slices-1){d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:(d.width()-(o*k))+"px"}))}else{d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:o+"px"}))}}d.append(b('<div class="nivo-caption"><p></p></div>').css({display:"none",opacity:g.captionOpacity}));if(m.currentImage.attr("title")!=""){var n=m.currentImage.attr("title");if(n.substr(0,1)=="#"){n=b(n).html()}b(".nivo-caption p",d).html(n);b(".nivo-caption",d).fadeIn(g.animSpeed)}var c=0;if(!g.manualAdvance&&e.length>1){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}if(g.directionNav){d.append('<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>');if(g.directionNavHide){b(".nivo-directionNav",d).hide();d.hover(function(){b(".nivo-directionNav",d).show()},function(){b(".nivo-directionNav",d).hide()})}b("a.nivo-prevNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")});b("a.nivo-nextNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")})}if(g.controlNav){var l=b('<div class="nivo-controlNav"></div>');d.append(l);for(var k=0;k<e.length;k++){if(g.controlNavThumbs){var f=e.eq(k);if(!f.is("img")){f=f.find("img:first")}if(g.controlNavThumbsFromRel){l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("rel")+'" alt="" /></a>')}else{l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("src").replace(g.controlNavThumbsSearch,g.controlNavThumbsReplace)+'" alt="" /></a>')}}else{l.append('<a class="nivo-control" rel="'+k+'">'+(k+1)+"</a>")}}b(".nivo-controlNav a:eq("+m.currentSlide+")",d).addClass("active");b(".nivo-controlNav a",d).live("click",function(){if(m.running){return false}if(b(this).hasClass("active")){return false}clearInterval(c);c="";d.css("background","url("+m.currentImage.attr("src")+") no-repeat");m.currentSlide=b(this).attr("rel")-1;p(d,e,g,"control")})}if(g.keyboardNav){b(window).keypress(function(i){if(i.keyCode=="37"){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")}if(i.keyCode=="39"){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")}})}if(g.pauseOnHover){d.hover(function(){m.paused=true;clearInterval(c);c=""},function(){m.paused=false;if(c==""&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}})}d.bind("nivo:animFinished",function(){m.running=false;b(e).each(function(){if(b(this).is("a")){b(this).css("display","none")}});if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}if(c==""&&!m.paused&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}g.afterChange.call(this)});var p=function(r,s,u,x){var y=r.data("nivo:vars");if(y&&(y.currentSlide==y.totalSlides-1)){u.lastSlide.call(this)}if((!y||y.stop)&&!x){return false}u.beforeChange.call(this);if(!x){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}else{if(x=="prev"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}if(x=="next"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}}y.currentSlide++;if(y.currentSlide==y.totalSlides){y.currentSlide=0;u.slideshowEnd.call(this)}if(y.currentSlide<0){y.currentSlide=(y.totalSlides-1)}if(b(s[y.currentSlide]).is("img")){y.currentImage=b(s[y.currentSlide])}else{y.currentImage=b(s[y.currentSlide]).find("img:first")}if(u.controlNav){b(".nivo-controlNav a",r).removeClass("active");b(".nivo-controlNav a:eq("+y.currentSlide+")",r).addClass("active")}if(y.currentImage.attr("title")!=""){var z=y.currentImage.attr("title");if(z.substr(0,1)=="#"){z=b(z).html()}if(b(".nivo-caption",r).css("display")=="block"){b(".nivo-caption p",r).fadeOut(u.animSpeed,function(){b(this).html(z);b(this).fadeIn(u.animSpeed)})}else{b(".nivo-caption p",r).html(z)}b(".nivo-caption",r).fadeIn(u.animSpeed)}else{b(".nivo-caption",r).fadeOut(u.animSpeed)}var w=0;b(".nivo-slice",r).each(function(){var i=Math.round(r.width()/u.slices);b(this).css({height:"0px",opacity:"0",background:"url("+y.currentImage.attr("src")+") no-repeat -"+((i+(w*i))-i)+"px 0%"});w++});if(u.effect=="random"){var A=new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade");y.randAnim=A[Math.floor(Math.random()*(A.length+1))];if(y.randAnim==undefined){y.randAnim="fade"}}if(u.effect.indexOf(",")!=-1){var A=u.effect.split(",");y.randAnim=b.trim(A[Math.floor(Math.random()*A.length)])}y.running=true;if(u.effect=="sliceDown"||u.effect=="sliceDownRight"||y.randAnim=="sliceDownRight"||u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("top","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUp"||u.effect=="sliceUpRight"||y.randAnim=="sliceUpRight"||u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("bottom","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUpDown"||u.effect=="sliceUpDownRight"||y.randAnim=="sliceUpDown"||u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){var t=0;var w=0;var B=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);if(w==0){i.css("top","0px");w++}else{i.css("bottom","0px");w=0}if(B==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;B++})}else{if(u.effect=="fold"||y.randAnim=="fold"){var t=0;var w=0;b(".nivo-slice",r).each(function(){var i=b(this);var v=i.width();i.css({top:"0px",height:"100%",width:"0px"});if(w==u.slices-1){setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="fade"||y.randAnim
//]]>
</script>

<script type='text/javascript'>
jQuery(window).load(function() {
 jQuery(&#39;#slider&#39;).nivoSlider();
 });
</script>

Salve e agora vamos colocar o slide para aparecer, vá ate seu layout e adicione um novo gadget de HTML/JavaScript e dentro dele coloque esse código:

<center><div id='slider-container'><div id='slider'>
<a href='LINKAQUI' title='Descrição do link'>
<img alt='' src='LINKDAIMAGEM 1' title='Título primeiro slide'/>
</a>
<a href='LINKAQUI' title='Descrição do link'>
<img alt='' src='LINKDAIMAGEM 2' title='Título segundo slide'/>
</a>
<a href='LINKAQUI' title='Descrição do link'>
<img alt='' src='LINKDAIMAGEM 3' title='Título do terceiro slide'/>
</a>
<a href='LINKAQUI' title='Descrição do link'>
<img alt='' src='LINKDAIMAGEM 4' title='Título do quarto slide'/>
</a>
<a href='LINKAQUI' title='Descrição do link'>
<img alt='' src='LINKDAIMAGEM 5' title='Título do quinto slide'/>
</a></div></div></center>

Mais sobre o código:

LINK AQUI: O link da pagina que você quer direcionar
LINK DA IMAGEM: O endereço da imagem que vai aparecer no slide
Descrição de link: Descrição da pagina colocada
Título do "numero" slide: Título da pagina que ira colocar.


As imagens do slide se encontra no tamanho de 299x200, abaixo esta uma imagem de exemplo no tamanho usado no slide para facilitar o serviço de vocês.


Espero que tenham curtido o tutorial, pareceu meio grande por causa dos códigos enormeeees mas no final foi bem fácil não é? Antes que eu me esqueça os créditos são do blog Garotas do Contra. Bom vou ficando por aqui, ate a próxima pessoal.

12 comentários:

  1. eu posso aumentar o tamanho da imagem?

    ResponderExcluir
  2. Tem como colocar esse slide no cabeçalho?

    ResponderExcluir
    Respostas
    1. Tem sim coloque no primeiro gadget no layout e use o codigo
      Objeto flutuante (Fixo) que mostra nessa postagem:

      http://www.bunnycrazy.net/2012/12/objeto-flutuante-colocar-menu-acima-do.html

      a primeira opção faz rolar coma pagina, escola a segunda.

      Excluir
    2. Olá obrigada por me responder, mas não ta dando certo no meu fica sempre escuro! e nao aparece as imagens! :(

      Excluir
    3. Escuro como assim? Poderia deixar o link ou tirar um print para mim ver?

      Excluir
    4. Oi vou deixa o linka ta ok...nossa obrigado mesmo por responder!
      http://soparatextes.blogspot.com.br/

      Excluir
    5. Oi vc conseguiu ver o pq?!

      Excluir
    6. Oi eu consegui resolver o problema usando outro tuto muito, mas muito muito obrigado mesmo pela atenção! vocês são demais!

      Excluir
    7. Por nada, e desculpe não poder ter ajudado antes quando acabei de ver você já tinha resolvido. rsrs Mas que bom, eu que agradece por me escolher para ajudar. Beijinhos May.

      Excluir
  3. Oii, então o meu também ficou preto você sabe pq?

    ResponderExcluir
    Respostas
    1. Olá Helena creio que seja o tutorial estou para refaze-lo, mas refaça usando desse blog aqui: www.cherryboomb.com/2012/08/nivo-slider.htm

      Espero que ajude

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram