Minimal Crossfading Background Slideshow Plugin With jQuery - RotateBG
File Size: | 839 KB |
---|---|
Views Total: | 2012 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
RotateBG is a very small jQuery plugin which allows to fade through an array of background images like a fullscreen slideshow.
Features:
- Preloads an array of full-page background images.
- Cross fades background images at given interval.
- Optionally create a full page loading div that covers page until the first image is loaded.
- No any CSS required.
How to use it:
1. Load both jQuery JavaScript library and the jQuery RotateBG plugin's script at the end of the html document.
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="RotateBG.js"></script>
2. Initialize the background slideshow and specify an array of images for your background. That's it.
$.RotateBG({ Backgrounds:['img1.png', 'img2.png', 'img3.png'], });
3. Config the background slideshow with the following options.
$.RotateBG({ // Array of full page background images. Backgrounds:['img1.png', 'img2.png', 'img3.png'], // Number of seconds for each image to show Interval: 8, // An image to show on the loading div LoadingImg: "./img/loader.gif", // The background color LoadingBGColor: "#2A2826", // Shuffle background images Shuffle: true, // A function to execute when the first image is loaded onLoaded: function(){ console.log("First image has loaded."); }, // The speed of the fade. // 0.1 = 10fps FadeSpeed: 0.1 });
This awesome jQuery plugin is developed by Pamblam. For more Advanced Usages, please check the demo page or visit the official website.