Cara Membuat Background Slideshow Dengan jQuery

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. 

Baca juga : Cara Membuat Game Kill Cocroach Dengan HTML5

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 : DOWNLOAD
Simpan 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 : Download
simpan 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 : Download

HTML

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 &copy <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.