Tạo image slider cho blogspot với Orbit jQuery
Khi tạo một trang blog để trưng bày sản phẩm hay hình ảnh thì không thể thiếu một slider ảnh cho blog. Việc làm một slider ảnh cho blog sẽ giúp trang trí và làm cho blog sinh động, bắt mắt hơn...
Bạn có thể xem demo image slider tại đây
Bước 1:
Vào Template > Edit HTML tìm thẻ </head> sau đó thêm đoạn script sau lên phía trước thẻ </head>
<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() { $('#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>
Các bạn thay đổi giá trị 5000 (chữ màu đỏ) cao hơn hay thấp hơn để tăng giảm thời gian chuyển ảnh
Bước 2:
Tìm thẻ ]]></b:skin> và thêm đoạn CSS sau trước nó và sau đó Save template
#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/AVvXsEhHK-xUkEn13qv_2lqgkMl4_EMOG4Xsthe7C9fH_UGYzttQU9XI2QG4uhMQcRvuFb0UufRZPvg3sUxyczk09ZU5N3bPRcxgAsvEbnlDHWi4BOnxw1MVOaU9UQYx5eeXUqj4_pp3j8Zgv5mM/s1600/timer-icon.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/AVvXsEjX7pG6vsquPTg8qyC3_IWLWK30Ng7GaMUGmg5nR2oTOH3-TecmnObivl7Yj4LL-Etg1nx8bvjdcKo10-UYys2Fp_pE8hmvYuae40RCyvRmVR5Oc7VQjY5H3sSQYBQPFtVeYlucN-c_rH4N/s1600/timer-right.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/AVvXsEgWeHepJbGqcAi2D4qhIdSb7ZmMyMghbX7VXVTT4ROZZDjRJ-z0xFdkcPkpTPnHuz1NSkw_3YYGPS71jm7VnNDQluxNfSQYHMC3FyQCKCNMLQVSERONIH3sh8Ct-s5DLIXa8Sao3EAEsarD/s1600/pause-icon.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/AVvXsEg7Wge34FxRA75-JD1BMvxn0EnyqaS6T8dk7B767unndPh3nhX3tA6PDj3c95eeqw1ch6_edJfPn3j3IP_d6zpD8GcqifaYC2ikoXNhoFtS3DLm5Hyp0n23US1wTRc7PXm5pZ7IKwOxokMu/s1600/arrow-right.png); right: 10px; } div.slider-nav span.left { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTnItKxADJ_bZgnuw69FQXG9wKvktS3fdadkjTVvJogKcbyRqa4UbMZPGZj4FDWIB8yUzpBcN-9Ut3_Z7u7rUQUfjcBiMlFlxYRvh71lTccULFVFJT4VVEHZ-HHzTWT5xC4GBIvjQZFvBy/s1600/arrow-left.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/AVvXsEiYu7GH6JhprYuLgoiM17dRXnKrvZlyzDJrENqI1Pb2dCm5KJH90WGp90_b5q5Gcbs5gfEVrNo9I0EuBVf3Wv2JNL4hajcWJiUF35pdiJ5pZtbLGQndUXm283J1LyeKLuUSeDGCfbR7cKlg/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; }
Bước 3:
Thêm đoạn code sau ở vị trí bạn muốn đặt slider, bạn có thể để trong header của blog, widget HTML/Java Script hay kể cả trong bài post hay trang bằng cách hiển thị soạn thảo bài viết ở dạng HTML
<div id='featured'> <a href='Link URL'><img rel='photo1' src="image URL" style='height: 348px; width: 590px;'/></a><span class='orbit-caption' id='photo1'>Tieu De Hinh 1.</span> <a href='Link URL'><img rel='photo2' src="image URL" style='height: 348px; width: 590px;'/></a><span class='orbit-caption' id='photo2'>Tieu De Hinh 2.</span> <a href='Link URL'><img rel='photo3' src="image URL" style='height: 348px; width: 590px;'/></a><span class='orbit-caption' id='photo3'>Tieu De Hinh 3.</span> <a href='Link URL'><img rel='photo4' src="image URL" style='height: 348px; width: 590px;'/></a><span class='orbit-caption' id='photo4'>Tieu De Hinh 4.</span> </div>
Link URL : Paste link liên kết khi bấm vào hình
image URL: Link hình
'height: 348px; width: 590px;' các bạn thay đổi kích thước cho phù hợp với Blog và size hình
Để thêm một hình nữa thì các bạn thêm
<a href='Link URL'><img rel='photo5' src="image URL" style='height: 348px; width: 590px;'/></a><span class='orbit-caption' id='photo5'>Tieu De Hinh 5.</span>
Tạo image slider cho blogspot với Orbit jQuery
Reviewed by Unknown
on
05:15
Rating:
Reviewed by Unknown
on
05:15
Rating:
