Cara Membuat Background Slideshow Dengan jQuery -
Background slideshow adalah background yang berganti - ganti seperti pada umumnya slideshow. Background slideshow ini akan menyesuaikan dengan ukuran layar dari halaman web atau bisa disebut full page. Hal ini akan kita buat menggunakan
Css dan
jQuery, untuk lebih jelasnya langsung saja ke prakteknya.
Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.
CSS
Pertama buatlah sebuah folder dengan nama
background_slideshow, kemudian buatlah sebuah folder di dalamnya dengan nama
CSS, buat sebuah file CSS dengan nama
style.css dengan isi script :
@font-face {
font-family: 'entypo';
src:url('../fonts/entypo.eot');
src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
url('../fonts/entypo.woff') format('woff'),
url('../fonts/entypo.ttf') format('truetype'),
url('../fonts/entypo.svg#entypo') format('svg');
font-weight: normal;
font-style: normal;
}
.cbp-bislideshow {
list-style: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
padding: 0;
margin: 0;
}
.cbp-bislideshow li {
position: absolute;
width: 101%;
height: 101%;
top: -0.5%;
left: -0.5%;
opacity: 0;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
/* If background-size supported we'll add the images to the background of the li */
.backgroundsize .cbp-bislideshow li {
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
}
/* ...and hide the images */
.backgroundsize .cbp-bislideshow li img {
display: none;
}
.cbp-bislideshow li img {
display: block;
width: 100%;
}
.cbp-bicontrols {
position: fixed;
width: 300px;
height: 100px;
margin: -50px 0 0 -150px;
top: 50%;
left: 50%;
}
.cbp-bicontrols span {
float: left;
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
}
.cbp-bicontrols span:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
font-family: 'entypo';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 100px;
font-size: 80px;
color: #fff;
-webkit-font-smoothing: antialiased;
opacity: 0.7;
}
.cbp-bicontrols span:hover:before {
opacity: 1;
}
.cbp-bicontrols span:active:before {
top: 2px;
}
span.cbp-biplay:before {
content: "\e002";
}
span.cbp-bipause:before {
content: "\e003";
}
span.cbp-binext:before {
content: "\e000";
}
span.cbp-biprev:before {
content: "\e001";
}
.cbp-bicontrols span.cbp-binext {
float: right;
}
/* Fallback */
.no-js.no-backgroundsize .cbp-bislideshow li:first-child {
opacity: 1;
}
.no-js.backgroundsize .cbp-bislideshow li:first-child img {
display: block;
}
Javascript
Buat sebuah folder dengan nama
js di dalam folder
backgroud_slideshow, Kita membutuhkan jQuery jadi download terlebih dahulu file jQuerynya di sini :
DOWNLOADSimpan dalam folder yang sama, kemudian buat file 3 buah file java script baru dengan nama
1. jquery.imagesloaded.min.js(function(c,q){var m="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";c.fn.imagesLoaded=function(f){function n(){var b=c(j),a=c(h);d&&(h.length?d.reject(e,b,a):d.resolve(e));c.isFunction(f)&&f.call(g,e,b,a)}function p(b){k(b.target,"error"===b.type)}function k(b,a){b.src===m||-1!==c.inArray(b,l)||(l.push(b),a?h.push(b):j.push(b),c.data(b,"imagesLoaded",{isBroken:a,src:b.src}),r&&d.notifyWith(c(b),[a,e,c(j),c(h)]),e.length===l.length&&(setTimeout(n),e.unbind(".imagesLoaded",
p)))}var g=this,d=c.isFunction(c.Deferred)?c.Deferred():0,r=c.isFunction(d.notify),e=g.find("img").add(g.filter("img")),l=[],j=[],h=[];c.isPlainObject(f)&&c.each(f,function(b,a){if("callback"===b)f=a;else if(d)d[b](a)});e.length?e.bind("load.imagesLoaded error.imagesLoaded",p).each(function(b,a){var d=a.src,e=c.data(a,"imagesLoaded");if(e&&e.src===d)k(a,e.isBroken);else if(a.complete&&a.naturalWidth!==q)k(a,0===a.naturalWidth||0===a.naturalHeight);else if(a.readyState||a.complete)a.src=m,a.src=d}):
n();return d?d.promise(g):g}})(jQuery);2. modernizr.custom.js
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-backgroundsize-shiv-cssclasses-testprop-testallprops-domprefixes-load
*/
;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.backgroundsize=function(){return D("backgroundSize")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
3. cbpBGSlideshow.js
var cbpBGSlideshow = (function() {
var $slideshow = $( '#cbp-bislideshow' ),
$items = $slideshow.children( 'li' ),
itemsCount = $items.length,
$controls = $( '#cbp-bicontrols' ),
navigation = {
$navPrev : $controls.find( 'span.cbp-biprev' ),
$navNext : $controls.find( 'span.cbp-binext' ),
$navPlayPause : $controls.find( 'span.cbp-bipause' )
},
// current item´s index
current = 0,
// timeout
slideshowtime,
// true if the slideshow is active
isSlideshowActive = true,
// it takes 3.5 seconds to change the background image
interval = 3500;
function init( config ) {
// preload the images
$slideshow.imagesLoaded( function() {
if( Modernizr.backgroundsize ) {
$items.each( function() {
var $item = $( this );
$item.css( 'background-image', 'url(' + $item.find( 'img' ).attr( 'src' ) + ')' );
} );
}
else {
$slideshow.find( 'img' ).show();
// for older browsers add fallback here (image size and centering)
}
// show first item
$items.eq( current ).css( 'opacity', 1 );
// initialize/bind the events
initEvents();
// start the slideshow
startSlideshow();
} );
}
function initEvents() {
navigation.$navPlayPause.on( 'click', function() {
var $control = $( this );
if( $control.hasClass( 'cbp-biplay' ) ) {
$control.removeClass( 'cbp-biplay' ).addClass( 'cbp-bipause' );
startSlideshow();
}
else {
$control.removeClass( 'cbp-bipause' ).addClass( 'cbp-biplay' );
stopSlideshow();
}
} );
navigation.$navPrev.on( 'click', function() {
navigate( 'prev' );
if( isSlideshowActive ) {
startSlideshow();
}
} );
navigation.$navNext.on( 'click', function() {
navigate( 'next' );
if( isSlideshowActive ) {
startSlideshow();
}
} );
}
function navigate( direction ) {
// current item
var $oldItem = $items.eq( current );
if( direction === 'next' ) {
current = current < itemsCount - 1 ? ++current : 0;
}
else if( direction === 'prev' ) {
current = current > 0 ? --current : itemsCount - 1;
}
// new item
var $newItem = $items.eq( current );
// show / hide items
$oldItem.css( 'opacity', 0 );
$newItem.css( 'opacity', 1 );
}
function startSlideshow() {
isSlideshowActive = true;
clearTimeout( slideshowtime );
slideshowtime = setTimeout( function() {
navigate( 'next' );
startSlideshow();
}, interval );
}
function stopSlideshow() {
isSlideshowActive = false;
clearTimeout( slideshowtime );
}
return { init : init };
})();
Perhatikan baris kode script di atas :
// current item´s index
current = 0,
// timeout
slideshowtime,
// true if the slideshow is active
isSlideshowActive = true,
// it takes 3.5 seconds to change the background image
interval = 3500;
Current adalah index gambar anda yang pertama
isSlideshowActive adalah setinggan apakah anda ingin mengaktifkan slideshow atau tidak dengan kata lain apakah anda ingin background anda berganti-ganti atau tidak
inverval adalah settingan interval atau waktu untuk pergantian setiap gambar slideshow
FONT
Buat sebuah folder dengan nama
Font dalam folder
background_slideshow, Font ini digunakan untuk tombol controlnya anda dapat mendownloadnya di sini :
Downloadsimpan dalam folder font.
IMAGES
Sekarang untuk gambarnya buat sebuah folder dengan nama
images dalam folder
background_slideshow, kemudian letakan gambar anda di dalamnya atau anda dapat menggunakan gambar demonya di sini :
DownloadHTML
Terakhir Buatlah sebuah file HTML baru di dalam folder background_slideshow, dengan nama index.html dengan isi script :
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara Membuat Backgroud Slideshow Dengan jQuery</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style>
h1 {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #fff;
font-weight: 700;
font-size: 2.125em;
text-align: center;
}
.copy{
position: absolute;
bottom: 0px;
text-align: center;
width: 100%;
color: #fff;
font-family: 'Lato', Calibri, Arial, sans-serif;
}
.copy a{
text-decoration: none;
color: inherit;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Jin Toples Programming</h1>
<h1>Cara Membuat Backgroud Slideshow Dengan jQuery</h1>
</header>
<div class="main">
<ul id="cbp-bislideshow" class="cbp-bislideshow">
<li><img src="images/1.jpg" alt="image01"/></li>
<li><img src="images/2.jpg" alt="image02"/></li>
<li><img src="images/3.jpg" alt="image03"/></li>
<li><img src="images/4.jpg" alt="image04"/></li>
<li><img src="images/5.jpg" alt="image05"/></li>
<li><img src="images/6.jpg" alt="image06"/></li>
</ul>
<div id="cbp-bicontrols" class="cbp-bicontrols">
<span class="cbp-biprev"></span>
<span class="cbp-bipause"></span>
<span class="cbp-binext"></span>
</div>
</div>
</div>
<p class='copy'>Copyright © <a href="http://jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.imagesloaded.min.js"></script>
<script src="js/cbpBGSlideshow.js"></script>
<script>
$(function() {
cbpBGSlideshow.init();
});
</script>
</body>
</html>
Jika anda ingin menonaktifkan tombol next dan pausenya hapus saja baris kode berikut:
<div id="cbp-bicontrols" class="cbp-bicontrols">
<span class="cbp-biprev"></span>
<span class="cbp-bipause"></span>
<span class="cbp-binext"></span>
</div>
Sekarang anda dapat mencobanya dengan cara membuka file
index.html di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.
Anda juga dapat mengunduh file jadinya di sini :
DOWNLOAD
Author : Mary Lou
From : http://tympanus.net/Blueprints/BackgroundSlideshow/
Modified by : Jin Toples
Background Slideshow Dengan jQuery anda sudah selesai, baca juga tutorial program jQuery lainnya.
