jQuery Plugin For Auto Background Image Switcher - easybg.js
File Size: | 4.03 KB |
---|---|
Views Total: | 8958 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.