jQuery Plugin For Dynamic Random Background Color & Image - Bgran

jQuery Bgran is a simple jQuery plugin that dynamically changes the background of your container with a random color or image. Also can be used as an image slideshow.

See also:

• jQuery Plugin for Random Noise Background - Noisy

How to use it:

1. Include the latest jQuery javascript library and jQuery bgran plugin in the page.

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

2. Include the required jQuery color plugin for random color mode.

<script src="jquery.color.js"></script>

3. Create a container and specify an initial background color/image in CSS.

<div class="demo"></div>
<style>
.demo {
background-color: #df624e;
}
</style>

4. Call the function on the container and set the options in the javascript.

<script type="text/javascript">
$(document).ready(function () {
$('.demo').bgran({
colors: ["#DF624E", "#B5C6CA", "#77B8B1", "#916D58", "#0099cc", "#ea4c88", "#ffcc33"], // array of predefined colors
images: ['http://lorempixel.com/400/300/fashion/1/")','http://lorempixel.com/400/300/fashion/2/','http://lorempixel.com/400/300/fashion/3/'], // array of predefined images
timeout: 20000, // transition speed
type: 'image' // or color
});
});
</script>

---

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