jQuery Plugin For Adaptive Image Background Color

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

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:

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.