Slide jQuery no blogger

Olá a todos, trago-lhes uma dica que vi no site ProDeveloper e dei uma modificada: um slide muito legal de imagens com descrição, e efeitos de contagem regressiva, pause etc. Gosto muito dele pois é bem leve, bonito, auto-ajustável e prático.
Use imagens de mesmo tamanho e especifique o tamanho no código!

Veja uma demonstração

1 - Adicionar script jQuery

Primeiro, vamos adicionar o script que faz o slide funcionar.
Procure por </head> e cole logo ANTES o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$('#featured').orbit({
advanceSpeed: 5000,
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</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>

O que está em vermelho é o código que insere a biblioteca do jQuery no blog, fique atento se você já não inserira ela antes em algum outro widget, mas não se preocupe se você não souber mexer com essas coisas, as chances de dar conflito são poucas.

2 - Adicionar estilo CSS

Agora precisamos dar estilo ao slide, para isso, procure por ]]></b:skin> e cole o seguinte código logo ANTES:

/* ÍNTEGRA/PRODEVELOPER SLIDE
----------------------------------------------- */
#featured {height: 300px; width: 800px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}
#featured img{
width:800px !important;
height:300px !important;
}
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/AVvXsEgWS_FWXf_93b9aMvxs3zTXp7-6OlAxxEjsX3baBxhiqfss-3EjxYChjacALikjN0DwHztCiaCeQ2FrRWKCpprVw1a8IeH27lib_6GCzRDHebc-Pxco8jIRb-GKWkC-tyHbx-ChOhhgr-qV/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/AVvXsEj05rpn9noz2AUD-moTe7G2Xq859sMsobNx5k6RGPsPeB61dxyLRPnl8iW5KjHY-clEDA4kVyvSyPTEzxRxJdaXJcFjXHM6_kSlqtnyMVk1n6pXM7RUJnL-RMNfYqKjwoOlSKWgjSjjpZ2P/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/AVvXsEjeyFh2uv1u0ZpZnYmf70-oo62bQU2R0eWUn2Qrk7rlied4GcHTDWytC1Wt4SHyyvmIHEa8wiVQD0st23Z6JxybaeSya8moGPDfOwrd284ILolygT3dJLT8aQLVKRyTBvWXBMC6pbXZK04-/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/AVvXsEhbzCRJYlmISGA0EIbjc0KfGAALltsqU9v9KmHITT0z3DgU281dEaSkrrbNUipP36s_IZeM_hit6hBX08A0vOXtKYyGrip4PhWjOv3Ubf6qg2GaOf8Do1xAMOhr5TZAWEHBv1hETHpenLk5/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8oW4SJQ0UbBhECQDen7H5iTf-oLeCpTFWwRvLmT15xhNXxhEmhsoPOOnhe5rrvSHNgMszBrwDzIpKjV7b417vE7jqeOE2mHcuoPrnMbdb8ENpj3H65W61iKkvEsQK5a4r0nBjGtVgzlb2/s1600/left-arrow.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 999;
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/AVvXsEh2Q3j6oR5fnR6cruiyhYQX6dfp25FyeyjkiAr9zwKBSFX4A0F5DpfTLWBujHFJvJKFozKu66twwXdgdzG8GuiME8cqhanMVrHOKGV37UiKAhKGSItcCkgTZd0sm4H_qOpQqQMvDplop20c/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: $(second.color); background-position: -7px 0;
}

LEMBRANDO: Edite a largura e a altura no código do mesmo tamanho que serão sua imagens!

Visualize, veja se está tudo OK e salve.

3 - Adicionar HTML / Widget

Vá ao Layout de seu blog e no local desejado clique em Adicionar Gadget. Escolha a opção HTML/JavaScript .
Cole o seguinte código e faça as substituições indicadas nele. ( Link, URL da imagem, descrição):

<div id='featured'>
<a href="LINK_IMAGEM_1"><img rel='foto1' src="URL_IMAGEM_1" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto1'>DESCRIÇÃO_IMAGEM_1</span>
<a href="LINK_IMAGEM_2"><img rel='foto2' src="URL_IMAGEM_2" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto2'>DESCRIÇÃO_IMAGEM_2</span>
<a href="LINK_IMAGEM_3"><img rel='foto3' src="URL_IMAGEM_3" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto3'>DESCRIÇÃO_IMAGEM_3</span>
<a href="LINK_IMAGEM_4"><img rel='foto4' src="URL_IMAGEM_4" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_4</span>
</div>

Salve tudo e veja como ficou.

E é isso ai, mais uma vez agradeço ao ProDeveloper pela dica.

Se gostou nos siga nas redes sociais e por favor, não plagie nosso conteúdo nem de nenhum lugar, se quiser compartilhar o tutoriais que mantenham os créditos!

Páginas

terça-feira, 27 de agosto de 2013

Slide jQuery no blogger

Compartilhe essa postagem!

2 comentários:

Categorias

Tutoriais

Contato

Parceiros

Seguidores