You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+24-9Lines changed: 24 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -8,9 +8,9 @@ Getting Started
8
8
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:
9
9
10
10
```javascript
11
-
$(document).ready(function(){
12
-
$.adaptiveBackground.run()
13
-
});
11
+
$(document).ready(function(){
12
+
$.adaptiveBackground.run()
13
+
});
14
14
```
15
15
16
16
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:
19
19
<imgsrc="/image.jpg"data-adaptive-background='1'>
20
20
```
21
21
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.
-__$.adaptiveBackground.run(opts)___arg: opts (Object)_ an optional argument to be merged in with the defaults.
26
31
27
32
Default Options
28
33
----------------
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.
31
36
32
37
Events Emitted
33
38
--------------
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:
console.log(payload.color); // The dominant color.
47
+
console.log(palette); // The palette in the image.
48
+
});
49
+
```
35
50
36
51
Caveats
37
52
--------------
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.
0 commit comments