Download
A jQuery plugin for extracting dominant colors from images and applying it to its parent. Install via bower. Then simply include jQuery and the script in your page, and invoke it like so. Instead of using an <img> element nested inside of parent element, AB supports grabbing the dominant color of a background image of a standalone element, then applying the corresponding dominant color as the background color of said element. Enable this functionality by adding a data property, data-ab-css-background to the element. selector String (default: 'img[data-adaptive-background="1"]') a CSS selector which denotes which images to grab/process. Ideally, this selector would start with img, to ensure we only grab and try to process actual images. parent falsy (default: null) a CSS selector which denotes which parent to apply the background color to. By default, the color is applied to the parent one level up the DOM tree.
Features
- This plugin is built on top of a script called RGBaster
- You may wish to supply a callback function which is called once the magic has been performed
- To enable CORS for images hosted on S3 buckets, follow the Amazon guide
- For all images, you can optionally also include a cross-origin attribute in your image
- Shade the color of the parent ligher or darker
- Set the color that will be used to blend the background color with
Project Samples
