jQuery Plugin For Dynamic Random Background Color & Image - Bgran
File Size: | 10KB |
---|---|
Views Total: | 2262 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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:
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.