Skip to content

Commit 3a995c3

Browse files
committed
Closes briangonzalez#26 - added in success callback w/ demo & docs
1 parent 77c345a commit 3a995c3

File tree

3 files changed

+123
-8
lines changed

3 files changed

+123
-8
lines changed

README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,19 @@ $('img.my-image').on('ab-color-found', function(ev,payload){
8989
});
9090
```
9191

92+
Success Callback
93+
----------------
94+
You may wish to supply a callback function which is called once the magic has been performed.
95+
96+
```javascript
97+
$.adaptiveBackground.run({
98+
success: function($img, data) {
99+
console.log('Success!', $img, data);
100+
}
101+
});
102+
```
103+
Note, this callback is called _once_ for each image.
104+
92105
Caveats
93106
--------------
94107
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).

demos/callback.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Demo</title>
5+
6+
<script type="text/javascript" src='/lib/jquery.js'></script>
7+
<script type="text/javascript" src='/src/jquery.adaptive-backgrounds.js'></script>
8+
<script type="text/javascript">
9+
10+
$(document).ready(function(){
11+
$.adaptiveBackground.run({
12+
success: function($img, data) {
13+
$img.css('transform', "rotate(1100deg) scale(1.2)");
14+
console.log('Success!');
15+
}
16+
});
17+
});
18+
19+
</script>
20+
21+
<style type="text/css">
22+
23+
body{
24+
max-width: 500px;
25+
margin: 0 auto;
26+
}
27+
28+
.img-wrap{
29+
border: 1px solid #eee;
30+
height: 400px;
31+
width: 100%;
32+
text-align: center;
33+
float: left;
34+
margin: 5px 0;
35+
}
36+
37+
.img-wrap img{
38+
height: 100%;
39+
transition: all 1000ms ease;
40+
}
41+
</style>
42+
43+
</head>
44+
<body>
45+
46+
<div class='img-wrap'>
47+
<img id="img" src="images/1.jpg" data-adaptive-background='1'>
48+
</div>
49+
50+
<div class='img-wrap'>
51+
<img id="img" src="images/2.jpg" data-adaptive-background='1'>
52+
</div>
53+
54+
<div class='img-wrap'>
55+
<img id="img" src="images/3.jpg" data-adaptive-background='1'>
56+
</div>
57+
58+
<div class='img-wrap'>
59+
<img id="img" src="images/4.jpg" data-adaptive-background='1'>
60+
</div>
61+
62+
<div class='img-wrap'>
63+
<img id="img" src="images/5.jpg" data-adaptive-background='1'>
64+
</div>
65+
66+
<div class='img-wrap'>
67+
<img id="img" src="images/6.jpg" data-adaptive-background='1'>
68+
</div>
69+
70+
<div class='img-wrap'>
71+
<img id="img" src="images/7.jpg" data-adaptive-background='1'>
72+
</div>
73+
74+
<div class='img-wrap'>
75+
<img id="img" src="images/8.jpg" data-adaptive-background='1'>
76+
</div>
77+
78+
<div class='img-wrap'>
79+
<img id="img" src="images/9.jpg" data-adaptive-background='1'>
80+
</div>
81+
82+
<div class='img-wrap'>
83+
<img id="img" src="images/10.jpg" data-adaptive-background='1'>
84+
</div>
85+
86+
<div class='img-wrap'>
87+
<img id="img" src="images/11.jpg" data-adaptive-background='1'>
88+
</div>
89+
90+
<div class='img-wrap'>
91+
<img id="img" src="images/12.jpg" data-adaptive-background='1'>
92+
</div>
93+
94+
<div class='img-wrap'>
95+
<img id="img" src="images/13.jpg" data-adaptive-background='1'>
96+
</div>
97+
98+
99+
</body>
100+
</html>

src/jquery.adaptive-backgrounds.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@
4444
$( opts.selector ).each(function(index, el){
4545
var $this = $(this);
4646

47-
/* Small helper functions which applie
48-
colors, attrs, triggers events, and check for css
47+
/* Small helper functions which applies
48+
colors, attrs, triggers events, etc.
4949
*/
50-
var handleColors = function(){
51-
var img = useCSSBackground() ? CSSBackground() : $this[0];
50+
var handleColors = function () {
51+
var img = useCSSBackground() ? getCSSBackground() : $this[0];
5252

5353
RGBaster.colors(img, {
5454
paletteSize: 20,
@@ -58,22 +58,23 @@
5858
$this.trigger(EVENT_CF, { color: colors.dominant, palette: colors.palette });
5959
}
6060
});
61+
6162
};
6263

6364
var useCSSBackground = function(){
6465
return $this.attr( DATA_CSS_BG );
6566
};
6667

67-
var CSSBackground = function(){
68+
var getCSSBackground = function(){
6869
return $this.css('background-image')
6970
.replace('url(http://github.com/'%3C/span%3E%3Cspan%20class=pl-kos%3E,%3C/span%3E%3Cspan%20class=pl-s%3E''%3C/span%3E%3Cspan%20class=pl-kos%3E).replace(')','');
7071
};
7172

7273
/* Subscribe to our color-found event. */
7374
$this.on( EVENT_CF, function(ev, data){
74-
var $data = data;
75-
var $parent;
7675

76+
// Try to find the parent.
77+
var $parent;
7778
if ( opts.parent && $this.parents( opts.parent ).length ) {
7879
$parent = $this.parents( opts.parent );
7980
}
@@ -94,7 +95,7 @@
9495

9596
// Helper function to calculate yiq - http://en.wikipedia.org/wiki/YIQ
9697
var getYIQ = function(color){
97-
var rgb = $data.color.match(/\d+/g);
98+
var rgb = data.color.match(/\d+/g);
9899
return ((rgb[0]*299)+(rgb[1]*587)+(rgb[2]*114))/1000;
99100
};
100101

@@ -114,6 +115,7 @@
114115
$parent.addClass( getLumaClass(data.color) )
115116
.attr('data-ab-yaq', getYIQ(data.color));
116117

118+
opts.success && opts.success($this, data);
117119
});
118120

119121
/* Handle the colors. */

0 commit comments

Comments
 (0)