Skip to content

Commit f7e6557

Browse files
author
Brian Gonzalez
committed
first commit
0 parents  commit f7e6557

33 files changed

+4275
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎.termrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
root:
2+
~/code/github/jquery.adaptive-backgrounds.js
3+
4+
commands:
5+
git: git st
6+
serve: grunt serve
7+
8+
layout:
9+
- [ git ]
10+
- [ serve ]

‎Gruntfile.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
module.exports = function(grunt) {
2+
3+
grunt.initConfig({
4+
pkg: grunt.file.readJSON('package.json'),
5+
concat: {
6+
options: {
7+
separator: ';'
8+
},
9+
dist: {
10+
src: ['src/jquery.adaptive-background.js'],
11+
dest: 'src/<%= pkg.name %>.js'
12+
}
13+
},
14+
uglify: {
15+
options: {
16+
banner: '/*! <%= pkg.author %> by <%= pkg.name %>.js <%= grunt.template.today("dd-mm-yyyy") %> */\n'
17+
},
18+
dist: {
19+
files: {
20+
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
21+
}
22+
}
23+
},
24+
qunit: {
25+
files: ['test/**/*.html']
26+
},
27+
jshint: {
28+
files: ['gruntfile.js', 'src/jquery.adaptive-background.js', 'test/test.js'],
29+
options: {
30+
// options here to override JSHint defaults
31+
globals: {
32+
jQuery: true,
33+
console: true,
34+
module: true,
35+
document: true
36+
}
37+
}
38+
},
39+
watch: {
40+
files: ['<%= jshint.files %>'],
41+
tasks: ['jshint', 'qunit']
42+
}
43+
});
44+
45+
// Load all the NPM modules
46+
grunt.loadNpmTasks('grunt-contrib-uglify');
47+
grunt.loadNpmTasks('grunt-contrib-jshint');
48+
grunt.loadNpmTasks('grunt-contrib-qunit');
49+
grunt.loadNpmTasks('grunt-contrib-watch');
50+
grunt.loadNpmTasks('grunt-contrib-concat');
51+
52+
// Register Tasks
53+
grunt.registerTask('test', ['jshint', 'qunit']);
54+
grunt.registerTask('default', ['jshint', 'qunit', 'uglify']);
55+
grunt.registerTask('serve', 'Serves any directory on given port', function (env) {
56+
var shell = require('shelljs');
57+
var port = grunt.option('port') || 8000;
58+
var dir = grunt.option('dir') || '.';
59+
console.log(['Serving', dir,'on port:', port].join(' '));
60+
shell.exec('cd '+ dir +' && python -m SimpleHTTPServer ' + port);
61+
});
62+
63+
};

‎README.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
2+
jquery.adaptive-background.js
3+
===============================
4+
_A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element._
5+
6+
Getting Started
7+
------------------
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+
10+
```javascript
11+
$(document).ready(function(){
12+
$.adaptiveBackground.run()
13+
});
14+
```
15+
16+
The script looks for image(s) with the `data-adaptive-background` attribute:
17+
18+
```html
19+
<img src="/image.jpg" data-adaptive-background='1'>
20+
```
21+
22+
API
23+
---
24+
This plugin exposes one method:
25+
- __$.adaptiveBackground.run(opts)__ _arg: opts (Object)_ an optional argument to be merged in with the defaults.
26+
27+
Default Options
28+
----------------
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.
31+
32+
Events Emitted
33+
--------------
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.
35+
36+
Caveats
37+
--------------
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.
39+
40+
Contact
41+
-------
42+
lipsum.
43+
44+
License
45+
-------
46+
Lipsum.

‎demos/base-single.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Base - Single</title>
5+
6+
<script type="text/javascript" src='/lib/jquery.js'></script>
7+
<script type="text/javascript" src='/src/jquery.adaptive-background.js'></script>
8+
<script type="text/javascript">
9+
10+
$(document).ready(function(){
11+
$.adaptiveBackground.run()
12+
});
13+
14+
</script>
15+
16+
<style type="text/css">
17+
18+
body{
19+
max-width: 500px;
20+
margin: 0 auto;
21+
}
22+
23+
.img-wrap{
24+
border: 2px solid #ccc;
25+
height: 200px;
26+
width: 200px;
27+
position: absolute;
28+
top: 50%; left: 50%;
29+
text-align: center;
30+
-webkit-transform: translateY(-50%) translateX(-50%);
31+
}
32+
33+
.img-wrap img{
34+
height: 100%;
35+
}
36+
37+
</style>
38+
39+
</head>
40+
<body>
41+
42+
<div class='img-wrap'>
43+
<img id="img" src="images/3.jpg" data-adaptive-background='1'>
44+
</div>
45+
46+
</body>
47+
</html>

‎demos/base.html

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

‎demos/explicit-parent-2-parents.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Explicit Parent</title>
5+
6+
<script type="text/javascript" src='/lib/jquery.js'></script>
7+
<script type="text/javascript" src='/src/jquery.adaptive-background.js'></script>
8+
<script type="text/javascript">
9+
10+
$(document).ready(function(){
11+
$.adaptiveBackground.run()
12+
});
13+
14+
</script>
15+
16+
<style type="text/css">
17+
18+
body{
19+
max-width: 500px;
20+
margin: 0 auto;
21+
}
22+
23+
.img-wrap{
24+
background: white;
25+
height: 500px;
26+
width: 500px;
27+
position: absolute;
28+
top: 50%; left: 50%;
29+
text-align: center;
30+
-webkit-transform: translateY(-50%) translateX(-50%);
31+
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
32+
}
33+
34+
.img-wrap img{
35+
height: 100%;
36+
}
37+
38+
</style>
39+
40+
</head>
41+
<body>
42+
43+
<div class='img-wrap'>
44+
<!--
45+
Note that we've explictly declared **2** parents.
46+
-->
47+
<img src="images/9.jpg" data-adaptive-background='1' data-ab-parent='body, .img-wrap'>
48+
</div>
49+
50+
</body>
51+
</html>

‎demos/explicit-parent-via-opts.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Explicit Parent</title>
5+
6+
<script type="text/javascript" src='/lib/jquery.js'></script>
7+
<script type="text/javascript" src='/src/jquery.adaptive-background.js'></script>
8+
<script type="text/javascript">
9+
10+
$(document).ready(function(){
11+
$.adaptiveBackground.run({
12+
parent: '.my-parent'
13+
})
14+
});
15+
16+
</script>
17+
18+
<style type="text/css">
19+
20+
body{
21+
max-width: 500px;
22+
margin: 0 auto;
23+
}
24+
25+
.img-wrap{
26+
height: 500px;
27+
width: 500px;
28+
position: absolute;
29+
top: 50%; left: 50%;
30+
text-align: center;
31+
-webkit-transform: translateY(-50%) translateX(-50%);
32+
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
33+
}
34+
35+
.img-wrap img{
36+
height: 100%;
37+
}
38+
39+
</style>
40+
41+
</head>
42+
<body class='my-parent'>
43+
44+
<div class='img-wrap'>
45+
<img src="images/4.jpg" data-adaptive-background='1'>
46+
</div>
47+
48+
</body>
49+
</html>

0 commit comments

Comments
 (0)