jQuery Plugin For Auto Background Image Switcher - easybg.js

easybg.js is a simple easy jQuery plugin which allows you to automatically & periodically change a set of specific background images like a slideshow.

How to use it:

1. Load jQuery library and the jQuery easybg.js script in the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.easybg.js"></script>

2. Add a background image switcher to a container element with class of 'demo'.

<div id="container" class="demo">

</div>

3. The required CSS to set the initial background image for the container.

.demo {
background-image: url("1.jpg");
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
min-height: 100%;
}

4. Call the plugin on the container element and set the options in the javascript.

<script>
$(window).load(function(){
$('#container').easybg({
images: [ // an array of background dimages
'1.jpg', 
'2.jpg', 
'3.jpg', 
'4.jpg'
],
interval: 10000,
speed : 1000, // 1 minute
ignoreError : false,
changeMode : 'normal', // normal or random
initIndex : 0, 
cloneClassId : null,
cloneClassName : 'easybgClone',
debug : false
});
});
</script>

Change log:

2014-07-23

• update jquery.easybg.js

---

This awesome jQuery plugin is developed by sawarame. For more Advanced Usages, please check the demo page or visit the official website.