![artboard](https://cloud.githubusercontent.com/assets/659829/17540609/4533a390-5e6c-11e6-8438-db25bcee1adc.png)
> jquery.adaptive-backgrounds.js
_A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element._
**[Check it out on the web!](http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/)**
[![OpenCollective Backers][backer-badge]][backer-url] [![OpenCollective Sponsors][sponsor-badge]][sponsor-url]
[backer-url]: #backers
[backer-badge]: https://opencollective.com/jquery-adaptive-background/backers/badge.svg
[sponsor-url]: #sponsors
[sponsor-badge]: https://opencollective.com/jquery-adaptive-background/sponsors/badge.svg
Getting Started
------------------
Install via bower:
```
bower install --save adaptive.background
```
Then simply include jQuery and the script in your page, and invoke it like so:
```javascript
$(document).ready(function(){
$.adaptiveBackground.run();
});
```
The script looks for image(s) with the `data-adaptive-background` attribute:
```html
<img src="/image.jpg" data-adaptive-background>
```
### Using an element with a CSS background image
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. See the example below:
```html
<div style='background-image: url(/some-image.jpg)' data-adaptive-background data-ab-css-background></div>
```
Demo
-----------
Here's a little demo of how it works. (1) The page loads (2) the dominant background color of the image is extracted (3) said color is applied to parent of image. _Demo drastically slowed down to show effect_.
---
<img src="https://raw.github.com/briangonzalez/jquery.adaptive-background.js/master/misc/ab.gif">
API
---
This plugin exposes one method:
- __$.adaptiveBackground.run(opts)__ _arg: opts (Object)_ an optional argument to be merged in with the defaults.
Default Options
----------------
- __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.
- __normalizeTextColor__ boolean _(default: `false`)_ option to normalize the color of the parent text if background color is too dark or too light.
- __normalizedTextColors__ Object Literal _(default: `{dark: '#000', light: '#fff'}`)_ text colors used when background is either too dark/light.
- __shadeVariation__ `blend|true|false` (default) option to shade the color of the parent ligher or darker (see shadePercentage) or blend the color of the parent with another color by a certain percentage (see shadeColors).
- __shadePercentage__ float (default: `0`) sets the percentage of shading or blending used. Can be adjusted from -1.00 to 1.00.
- __shadeColors__ Object Literal ( default: `{light:'rgb(255,255,255)',dark:'rgb(0,0,0)'}` ) sets the color that will be used to blend the background color with. Two values are provided to account for the background color to be light or dark to start with.
- __transparent__ Transparent dominant color. Can be adjusted from 0.01 to 0.99.
__Example:__
Call the `run` method, passing in any options you'd like to override.
```javascript
var defaults = {
selector: '[data-adaptive-background="1"]',
parent: null,
exclude: [ 'rgb(0,0,0)', 'rgba(255,255,255)' ],
shadeVariation: false,
shadePercentage: 0,
shadeColors: {
light: 'rgb(255,255,255)',
dark: 'rgb(0,0,0)'
},
normalizeTextColor: false,
normalizedTextColors: {
light: "#fff",
dark: "#000"
},
lumaClasses: {
light: "ab-light",
dark: "ab-dark"
},
transparent: null
};
$.adaptiveBackground.run(defaults)
```
Events Emitted
--------------
- __ab-color-found__ [Event](http://api.jquery.com/category/events/event-object/) This event is fired when the dominant color of the image is found. The payload includes the dominant color as well as the color palette contained in the image.
__Example:__
Bind to the `ab-color-found` event like so:
```javascript
$('img.my-image').on('ab-color-found', function(ev,payload){
console.log(payload.color); // The dominant color in the image.
console.log(payload.palette); // The color palette found in the image.
console.log(ev); // The jQuery.Event object
});
```
Success Callback
----------------
You may wish to supply a callback function which is called once the magic has been performed.
```javascript
$.adaptiveBackground.run({
success: function($img, data) {
console.log('Success!', $img, data);
}
});
```
Note, this callback is called _once_ for each image.
Caveats
--------------
This plugin utlizes the `<canvas>` element and the `ImageData` object, and due to cross-site security limitations, the script will fail if one tries to extract the colors from an image not hosted on the current domain, *unless* the image allows for [Cross Origin Resource Sharing](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing).
__Enabling CORS on S3__
To enable CORS for images hosted on S3 buckets, follow the Amazon guide [here](http://docs.aws.amazon.com/AmazonS3/latest/UG/EditingBucketPermissions.html); adding the following to the bucket's CORS configuration:
```xml
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
```
For all images, you can optionally also include a cross-origin attribute in your image. This is not absolutely necessary since the `anonymous` origin is set in the Javascript code, but kudos to you for being a super-developer.
```html
<img src="/image.jpg" data-adaptive-background cross-origin="anonymous"/>
```
Credit
------
This plugin is built on top of a script called [RGBaster](https://github.com/briangonzalez/rgbaster.js).
Collaborators
-------
| ![Brian Gonzalez](http://gravatar.com/avatar/f6363fe1d9aadb1c3f07ba7867f0e854?s=70 "Brian Gonzalez") | ![Scott Stern](https://gravatar.com/avatar/0d4467ab78f0c73c7442d9b5c23299cc?s=70 "Scott Stern") | ![Alfred J Kwack](https://avatars2.githubusercontent.com/u/557102?v=4&s=70 "Alfred J KWack")
|---|---|---|
| [Brian Gonzalez](http://briangonzalez.org) | [Scott Stern](https://github.com/sstern6) | [Alfred J Kwack ](https://github.com/AlfredJKwack)|
This project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md).
<a href="graphs/contributors"><img src="https://opencollective.com/jquery-adaptive-backgrounds/contributors.svg?width=890" /></a>
## Backers
Thank you to all our backers! ���� [[Become a backer](https://opencollective.com/jquery-adaptive-backgrounds#backer)]
<a href="https://opencollective.com/jquery-adaptive-backgrounds#backers" target="_blank"><img src="https://opencollective.com/jquery-adaptive-backgrounds/backers.svg?width=890"></a>
## Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/jquery-adaptive-backgrounds#sponsor)]
<a href="https://opencollective.com/jquery-adaptive-backgrounds/sponsor/0/website" target="_blank"><img src="https://opencollective.com/jquery-adaptive-backgrounds/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/jquery-adaptive-backgrounds/sponsor/1/website" target="_blank"><img src="https://opencollective.com/jquery-adaptive-backgrounds/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/jquery-adaptive-backgrounds/sponsor/2/website" target="_blank"><img
没有合适的资源?快使用搜索试试~ 我知道了~
一个 jQuery 插件,用于从图像中提取主色并将颜色应用于其父级_JavaScript_代码_下载
共52个文件
html:16个
jpg:15个
js:6个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 115 浏览量
2022-06-17
10:17:03
上传
评论
收藏 4.51MB ZIP 举报
温馨提示
效果展示: https://camo.githubusercontent.com/a7e0c730333bf6ba54a143300ec773b79959258b2b423094e73a67a0dfcbbee3/68747470733a2f2f7261772e6769746875622e636f6d2f627269616e676f6e7a616c657a2f6a71756572792e61646170746976652d6261636b67726f756e642e6a732f6d61737465722f6d6973632f61622e676966
资源推荐
资源详情
资源评论
收起资源包目录
jquery.adaptive-backgrounds.js-master.zip (52个子文件)
jquery.adaptive-backnds.js-master
MAINTAINERS 71B
misc
ab.gif 97KB
demos
css
styles.css 21KB
shade-variation.html 1KB
images
8.jpg 278KB
black-bg.jpg 18KB
2.jpg 315KB
1.jpg 371KB
6.jpg 411KB
3.jpg 302KB
5.jpg 345KB
11.jpg 206KB
fb-icon.png 4KB
4.jpg 304KB
10.jpg 234KB
13.jpg 178KB
white-bg.jpg 23KB
12.jpg 329KB
9.jpg 398KB
7.jpg 281KB
twitter-icon.png 54KB
data-url.html 557KB
background.html 957B
callback.html 2KB
base.html 2KB
explicit-parent-2-parents.html 992B
picture-element.html 2KB
adaptive-text.html 1KB
shade-variation-blend.html 1KB
explicit-parent.html 1KB
remote-image.html 884B
explicit-parent-via-opts.html 899B
cors.html 925B
base-single.html 848B
black-white.html 844B
package.json 808B
.github
ISSUE_TEMPLATE.md 153B
test
test.js 67B
test.html 298B
qunit
qunit.css 5KB
qunit.js 57KB
CONTRIBUTING.md 5KB
src
jquery.adaptive-backgrounds.js 7KB
.gitignore 169B
.lgtm 52B
lib
jquery.js 82KB
underscore.js 40KB
static.js 364B
README.md 9KB
bower.json 616B
.gitattributes 31B
Termfile 151B
共 52 条
- 1
资源评论
快撑死的鱼
- 粉丝: 1w+
- 资源: 9156
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功