Skip to content

Commit 039883c

Browse files
author
Brian Gonzalez
committed
edit readme
1 parent f7e6557 commit 039883c

File tree

2 files changed

+26
-11
lines changed

2 files changed

+26
-11
lines changed

README.md

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ Getting Started
88
Simply include jQuery and the __[script](https://raw.github.com/briangonzalez/jquery.adaptive-backgrounds.js/master/src/jquery.pep.js)__ in your page, then run the script like so:
99

1010
```javascript
11-
$(document).ready(function(){
12-
$.adaptiveBackground.run()
13-
});
11+
$(document).ready(function(){
12+
$.adaptiveBackground.run()
13+
});
1414
```
1515

1616
The script looks for image(s) with the `data-adaptive-background` attribute:
@@ -19,28 +19,43 @@ The script looks for image(s) with the `data-adaptive-background` attribute:
1919
<img src="/image.jpg" data-adaptive-background='1'>
2020
```
2121

22+
A Lil' Demo
23+
-----------
24+
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.
25+
<img src="https://raw.github.com/briangonzalez/jquery.adaptive-background.js/master/misc/ab.gif">
26+
2227
API
2328
---
2429
This plugin exposes one method:
2530
- __$.adaptiveBackground.run(opts)__ _arg: opts (Object)_ an optional argument to be merged in with the defaults.
2631

2732
Default Options
2833
----------------
29-
- __selector__ String _(defult: '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.
30-
- __parent__ String _(defult: 'img[data-adaptive-background="1"]')_ a string which denotes which images to grab. Ideally, this selector would start with _img_, to ensure we only grab and try to process images.
34+
- __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.
35+
- __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.
3136

3237
Events Emitted
3338
--------------
34-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper justo sem. Fusce ac sem est. Aenean dignissim feugiat auctor. Vestibulum in ante sem. Ut sit amet erat arcu, eget fringilla odio. Aenean a nibh est. Cras metus urna, vulputate non feugiat vel, condimentum sit amet purus.
39+
- __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.
40+
41+
__Example:__
42+
Subscribe to the __ab-color-found__ event like so:
43+
44+
```javascript
45+
$('img.my-image').on('ab-color-found', function(payload){
46+
console.log(payload.color); // The dominant color.
47+
console.log(palette); // The palette in the image.
48+
});
49+
```
3550

3651
Caveats
3752
--------------
38-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper justo sem. Fusce ac sem est. Aenean dignissim feugiat auctor. Vestibulum in ante sem. Ut sit amet erat arcu, eget fringilla odio. Aenean a nibh est. Cras metus urna, vulputate non feugiat vel, condimentum sit amet purus.
53+
This plugin utlizes [Color Thief](http://lokeshdhakar.com/projects/color-thief/) which in turn uses the Canvas. The script will silently fail if one tries to extract the colors from an image not hosted in the current domain.
3954

4055
Contact
4156
-------
42-
lipsum.
57+
Find me. [@brianmgonzalez](http://twitter.com/brianmgonzalez)
4358

4459
License
4560
-------
46-
Lipsum.
61+
MIT, yo.

src/jquery.adaptive-background.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
var EVENT_CF = 'ab-color-found';
77

88
var DEFAULTS = {
9-
selector: 'img[data-adaptive-background="1"]',
10-
parent: null,
9+
selector: 'img[data-adaptive-background="1"]',
10+
parent: null,
1111
};
1212

1313
/* Create a ColorThief object, which will

0 commit comments

Comments
 (0)