Assine Nosso Feed!

Receba Nossas Atualizações em Seu E-mail:

  • Receba Todos os Nossos Artigos Automaticamente em Seu E-mail
  • Tenha a Exclusividade de Receber Boletins do Nosso Blog
  • Inscrever-se no feed do Nosso Blog é Fácil, Rápido e Seguro
  • Ajude a fazer Nosso Blog Crescer!!!


  • 29 de outubro de 2012

    Slider de imagens com efeitos em jQuery

    Bom galera, hoje  vou mostrar como colocar um slidershow em cima dos arquivos aqui no blogger, estou devendo este artigo  só que o tempo é muito corrido pra mim por isso demorei um pouco, vamos lá, é um slider de imagens e tem efeitos Jquery, e tem também um controle no canto superior esquerdo que mostra qual imagem está mostrando no momento e com botão de pausa no canto direito.


    Vamos ao Tutorial: 


    OBS: Recomendamos que faça um backup antes de mexer no código do seu template, caso ocorra algum erro terá como recuperá-lo evitando qualquer transtorno no final. 

    1º - Depois clique em na Caixa Expandir Modelos de Widgets.
    2º - aperte as Teclas CTRL+F e procure por: </head>  e cole antes 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>

     3º- Agora procure por ]]></b:skin> antes 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(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhPl2pVcI/AAAAAAAAAas/O7A5Aa7ZMhs/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(http://2.bp.blogspot.com/_dsEG33PDaHw/TMHhQItQqeI/AAAAAAAAAaw/afLXhP0yQI8/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(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPCHG1JI/AAAAAAAAAak/EiGTzJCfL1c/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(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPefIDjI/AAAAAAAAAao/Gyy0k0F5Hzw/s1600/right-arrow.png);
    right: 10px;
    }
    div.slider-nav span.left {
    background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhNd07EPI/AAAAAAAAAaY/_k9SqP88gV8/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(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhLtWyUXI/AAAAAAAAAaU/8MQ8LP5flS8/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; }

    Va  Layout →Adicionar um Gadgat→ HTml/Javascript e cole o seguinte código.

     <div id='featured'>

    <a href='URL do artigo'><img rel='foto1' src="URL da imagen" style='width:490px; height:238px;'/></a>
    <span class='orbit-caption' id='foto1'>descrição do artigo.</span>

    <a href="URL do artigo"><img rel='foto2' src="URL da imagen" style='width:490px; height:238px;'/></a>
    <span class='orbit-caption' id='foto2'>Este é um exemplo da descrição do artigo: <a href='URL do artigo' style='color: #fff';'>Tecno Blogger</a></span>

    <a href="URL do artigo"><img rel='foto3' src="URL da  imagen" style='width:490px; height:238px;'/></a>
    <span class='orbit-caption' id='foto3' style='text-align:center;'>Descrição do artigo.</span>

    <a href='URL do artigo'><img rel='foto4' src="URL da imagen" style='width:490px; height:238px;'/></a>
    <span class='orbit-caption' id='foto4'>Este é um exemplo da descrição do artigo: <a href='URL do artigo' style='color: #fff';'>Tecno Blogger</a></span>

    </div>

     Para configurar o tamanho basta substituir o numero em azul pelo tamanho que deseja width:490px; height:238px pelo tamanho que deseja

    Salve e pronto,
     

    6 comentários:

    1. Tentei por esse já amigo e acabou não dando certo também...

      o que eu queria mesmo era de imagens em miniatura rolando na horizontal, igual aquele site que eu mostrei pra você: http://www.baixarfilmesdublados.net/

      mais fazer o que :/

      Obrigado.

      ResponderExcluir
      Respostas
      1. Olá Erick,

        pena que não consegui te ajudar, breve postarei mais sobre Slides aqui no blog, espero que uma delas seja o que realmente precisa,

        Muito obrigado pelo comentário,
        Abraços

        Excluir
    2. Mais uma excelente dica Juliano, espero testá-la em breve. Eu acredito que tenho o código que o Erick deseja, mais agora estou sem net (pois mudei de estado) e sem tempo para ver se é o mesmo que ele quer.

      ResponderExcluir
      Respostas
      1. Fico feliz que gostou jackson, realmente a falta de tempo é o terror para nós bogueiros, espero que estabeleça logo, e volte como seus belos artigos diariamente e ajudando a todos,
        Abraços bom restinho de tarde.

        Excluir
    3. Olá Juliano.

      Gostei muito do slide. Ficou excelente e muito elegante.

      Abraços!

      ResponderExcluir
      Respostas
      1. Muito obrigado pela participação fico feliz em saber que tenha gostado.
        Grande Abraço!

        Excluir