jQuery Plugin For Adaptive Image Background Color
File Size: | 4.5 MB |
---|---|
Views Total: | 3771 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Adaptive Background is a canvas
based jQuery plugin used to fill the background with the dominant color of a given image. By default, the color is applied to the parent one level up the DOM tree. Helpful for making your website more beautiful and interesting.
See also:
- jQuery Plugin For Grabbing Image Color - imgcolr
- Create Stunning Image Backgrounds With jQuery backgroundify.js
Basic Usage:
1. Include the jQuery javascript library and jQuery Adaptive Background plugin in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src='../src/jquery.adaptive-background.js'></script>
2. Insert an image with data-adaptive-background
attribute in your page.
<img id="img" src="images/1.jpg" data-adaptive-background="1">
3. Fire the plugin.
<script type="text/javascript"> $(document).ready(function(){ $.adaptiveBackground.run() }); </script>
4. Available options.
<script type="text/javascript"> $(document).ready(function(){ var opts = { selector: 'img[data-adaptive-background="1"]', // a CSS selector which denotes which images to grab/process parent: null // a CSS selector which denotes which parent to apply the background color to. } $.adaptiveBackground.run(opts) }); </script>
Change log:
2017-07-21
- Shade variation
2017-06-08
- Add support for Picture element
2014-08-21
- added in success callback w/ demo & docs
2014-06-24
- allow for explictly declaring which colors to exclude
2014-05-02
- Adjusted Order of Precedence for Parent
2014-01-23
- added luminance classes to parent
2014-01-15
- adding in functionality for acquiring dominant color of background image
This awesome jQuery plugin is developed by briangonzalez. For more Advanced Usages, please check the demo page or visit the official website.