Anuncie Aqui!! Anuncie Aqui!! Anuncie Aqui!! Anuncie Aqui!! Anuncie Aqui!! Anuncie Aqui!! Anuncie Aqui!!

Colocando Slide de Imagens com JQuery BLog

Slide de imagens com jQuery 

Pra colocar em seu blog plataforma blogger siga o tutorial logo abaixo!

Ctrl + F procure por </head> e acima cole

<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 vamos colocar o CSS do slide procure por ]]></b:skin> e cole acima

/* 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/AVvXsEhjfYX_96eHONemsszG-YhhnDc5FvFiMfANHsU6iC4V_fvQiBYZB4lUJ6-T9eWa2Uq975tEZNgkA8uk_bHQtRYMPpWdeK74Jubq4Q51W91FqAqG0hqeChCUW3SW3_8PkmUUEsXLjQzXgMZa/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/AVvXsEgU3wSYgbV6tiWYlf7bp8BTcfPjvr-QhOe_2GgHYmcQstljVClG8n_n4p3vO5D91ZZc8_nVtZm8IgpS4xgNStisEU3SdYPWfOaH_thjvWP_84vlJlKQBzxm6DefZHyBbxkP5wIyXeHndvx5/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/AVvXsEhzeiG4tUMhsD3Rvo87gcX7TuqvhLfHYzaNyT-jo_oN13zUmtPvhulXqVOhiQ-jJzt9VwAjpZsACN_lAe7xFiwZWlcS6ptTbqo0YcqXiQyz5-r56-O0ok0ScsAQd0WVUHPsAzLcyDtqM6s2/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/AVvXsEhonoiu1kEoBBjk-6pWvH1O86gVxrSJYK3zaasX6Dn2Pm0-tay9PPs-gd6mmm_hW08JfkioZzFn-ipMWxPQl2l7j9GAHaZrSseHr966O0Lthxjz5E5e2Kkfzr9U4shee245CXS0d0l8XIgs/s1600/right-arrow.png); 
right: 10px; 
} 
div.slider-nav span.left { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr09qCB8fB2DGz_oBX9lq2fLHOnFVrwyfnLwefwfwekTJ6HtsoRlOBaSTFyVrnH19bn61FNfx1_Ws4sV9Y70rz-Dbq1EYzI6cXDFZU4B2tdCSss48zVbw88qJ7pSj5W3lqFmfuzjGSJkyE/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/AVvXsEiR8DNgS05f9nmY6bY6gFkgA4jHa1PNXYj_tX2HNpA7-4Ha3l3t0iaEU39-8bKC1lBtlz4e2OLtr9gxZ3NXln9etSkQyCA9tUAn6f4Az7PG0tLhRIMZ8rioPeAuUXTKsLGqUPQn0wVZXc_j/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; }
}

Ultimo coloque abaixo de <body>

<div id='featured'> 
<a href="LINK_IMAGEM_1"><img rel='foto1' src="URL_IMAGEM_1" style='width:490px; height:238px;'/></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:490px; height:238px;'/></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:490px; height:238px;'/></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:490px; height:238px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_4</span>
</div>

Configure trocando os links!


Se gostou comente

1 comentário
Bolo 10

1 comentários:

Unknown disse...

toop

29 de abril de 2016 às 16:26

Postar um comentário