Skip to content

Commit d0a037e

Browse files
briangonzalezbriangonzalez
committed
Fixes #29 - don't require '=1' in data attr
1 parent 4635d07 commit d0a037e

14 files changed

+67
-66
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ $(document).ready(function(){
2222
The script looks for image(s) with the `data-adaptive-background` attribute:
2323

2424
```html
25-
<img src="/image.jpg" data-adaptive-background='1'>
25+
<img src="/image.jpg" data-adaptive-background>
2626
```
2727

2828
### Using an element with a CSS background image
@@ -32,7 +32,7 @@ Instead of using an `<img>` element nested inside of parent element, AB supports
3232
Enable this functionality by adding a data property, `data-ab-css-background` to the element. See the example below:
3333

3434
```html
35-
<div style='background-image: url(/some-image.jpg)' data-adaptive-background='1' data-ab-css-background='1'></div>
35+
<div style='background-image: url(/some-image.jpg)' data-adaptive-background data-ab-css-background></div>
3636
```
3737

3838
Demo
@@ -123,7 +123,7 @@ To enable CORS for images hosted on S3 buckets, follow the Amazon guide [here](h
123123
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.
124124

125125
```html
126-
<img src="/image.jpg" data-adaptive-background='1' cross-origin="anonymous"/>
126+
<img src="/image.jpg" data-adaptive-background cross-origin="anonymous"/>
127127
```
128128

129129
Credit

‎demos/adaptive-text.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
</script>
1717

18-
<style type="text/css">
18+
<style type="text/css">
1919

2020
body{
2121
max-width: 500px;
@@ -24,7 +24,7 @@
2424

2525
.img-wrap{
2626
border: 2px solid #ccc;
27-
width: 600px;
27+
width: 600px;
2828
position: absolute;
2929
top: 50%; left: 50%;
3030
text-align: center;
@@ -52,8 +52,8 @@
5252

5353
<div class='img-wrap'>
5454
<div class='text'>WOW</div>
55-
<img id="img" src="images/3.jpg" data-adaptive-background='1'>
55+
<img id="img" src="images/3.jpg" data-adaptive-background>
5656
</div>
5757

5858
</body>
59-
</html>
59+
</html>

‎demos/background.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
</head>
4141
<body>
4242

43-
<div class='img-wrap' data-adaptive-background='1' data-ab-css-background='1'>
43+
<div class='img-wrap' data-adaptive-background data-ab-css-background>
4444
</div>
4545

4646
</body>

‎demos/base-single.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
<body>
4141

4242
<div class='img-wrap'>
43-
<img id="img" src="images/3.jpg" data-adaptive-background='1'>
43+
<img id="img" src="images/3.jpg" data-adaptive-background>
4444
</div>
4545

4646
</body>

‎demos/base.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
</script>
1515

16-
<style type="text/css">
16+
<style type="text/css">
1717

1818
body{
1919
max-width: 500px;
@@ -38,57 +38,57 @@
3838
<body>
3939

4040
<div class='img-wrap'>
41-
<img id="img" src="images/1.jpg" data-adaptive-background='1'>
41+
<img id="img" src="images/1.jpg" data-adaptive-background>
4242
</div>
4343

4444
<div class='img-wrap'>
45-
<img id="img" src="images/2.jpg" data-adaptive-background='1'>
45+
<img id="img" src="images/2.jpg" data-adaptive-background>
4646
</div>
4747

4848
<div class='img-wrap'>
49-
<img id="img" src="images/3.jpg" data-adaptive-background='1'>
49+
<img id="img" src="images/3.jpg" data-adaptive-background>
5050
</div>
5151

5252
<div class='img-wrap'>
53-
<img id="img" src="images/4.jpg" data-adaptive-background='1'>
53+
<img id="img" src="images/4.jpg" data-adaptive-background>
5454
</div>
5555

5656
<div class='img-wrap'>
57-
<img id="img" src="images/5.jpg" data-adaptive-background='1'>
57+
<img id="img" src="images/5.jpg" data-adaptive-background>
5858
</div>
5959

6060
<div class='img-wrap'>
61-
<img id="img" src="images/6.jpg" data-adaptive-background='1'>
61+
<img id="img" src="images/6.jpg" data-adaptive-background>
6262
</div>
6363

6464
<div class='img-wrap'>
65-
<img id="img" src="images/7.jpg" data-adaptive-background='1'>
65+
<img id="img" src="images/7.jpg" data-adaptive-background>
6666
</div>
6767

6868
<div class='img-wrap'>
69-
<img id="img" src="images/8.jpg" data-adaptive-background='1'>
69+
<img id="img" src="images/8.jpg" data-adaptive-background>
7070
</div>
7171

7272
<div class='img-wrap'>
73-
<img id="img" src="images/9.jpg" data-adaptive-background='1'>
73+
<img id="img" src="images/9.jpg" data-adaptive-background>
7474
</div>
7575

7676
<div class='img-wrap'>
77-
<img id="img" src="images/10.jpg" data-adaptive-background='1'>
77+
<img id="img" src="images/10.jpg" data-adaptive-background>
7878
</div>
7979

8080
<div class='img-wrap'>
81-
<img id="img" src="images/11.jpg" data-adaptive-background='1'>
81+
<img id="img" src="images/11.jpg" data-adaptive-background>
8282
</div>
8383

8484
<div class='img-wrap'>
85-
<img id="img" src="images/12.jpg" data-adaptive-background='1'>
85+
<img id="img" src="images/12.jpg" data-adaptive-background>
8686
</div>
8787

8888
<div class='img-wrap'>
89-
<img id="img" src="images/13.jpg" data-adaptive-background='1'>
89+
<img id="img" src="images/13.jpg" data-adaptive-background>
9090
</div>
9191

9292

9393
</body>
94-
</html>
94+
</html>

‎demos/black-white.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@
3535
<body>
3636

3737
<div class='img-wrap'>
38-
<img class="img" src="images/black-bg.jpg" data-adaptive-background='1'>
38+
<img class="img" src="images/black-bg.jpg" data-adaptive-background>
3939
</div>
4040

4141
<div class='img-wrap'>
42-
<img class="img" src="images/white-bg.jpg" data-adaptive-background='1'>
42+
<img class="img" src="images/white-bg.jpg" data-adaptive-background>
4343
</div>
4444

4545
</body>

‎demos/callback.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -44,55 +44,55 @@
4444
<body>
4545

4646
<div class='img-wrap'>
47-
<img id="img" src="images/1.jpg" data-adaptive-background='1'>
47+
<img id="img" src="images/1.jpg" data-adaptive-background>
4848
</div>
4949

5050
<div class='img-wrap'>
51-
<img id="img" src="images/2.jpg" data-adaptive-background='1'>
51+
<img id="img" src="images/2.jpg" data-adaptive-background>
5252
</div>
5353

5454
<div class='img-wrap'>
55-
<img id="img" src="images/3.jpg" data-adaptive-background='1'>
55+
<img id="img" src="images/3.jpg" data-adaptive-background>
5656
</div>
5757

5858
<div class='img-wrap'>
59-
<img id="img" src="images/4.jpg" data-adaptive-background='1'>
59+
<img id="img" src="images/4.jpg" data-adaptive-background>
6060
</div>
6161

6262
<div class='img-wrap'>
63-
<img id="img" src="images/5.jpg" data-adaptive-background='1'>
63+
<img id="img" src="images/5.jpg" data-adaptive-background>
6464
</div>
6565

6666
<div class='img-wrap'>
67-
<img id="img" src="images/6.jpg" data-adaptive-background='1'>
67+
<img id="img" src="images/6.jpg" data-adaptive-background>
6868
</div>
6969

7070
<div class='img-wrap'>
71-
<img id="img" src="images/7.jpg" data-adaptive-background='1'>
71+
<img id="img" src="images/7.jpg" data-adaptive-background>
7272
</div>
7373

7474
<div class='img-wrap'>
75-
<img id="img" src="images/8.jpg" data-adaptive-background='1'>
75+
<img id="img" src="images/8.jpg" data-adaptive-background>
7676
</div>
7777

7878
<div class='img-wrap'>
79-
<img id="img" src="images/9.jpg" data-adaptive-background='1'>
79+
<img id="img" src="images/9.jpg" data-adaptive-background>
8080
</div>
8181

8282
<div class='img-wrap'>
83-
<img id="img" src="images/10.jpg" data-adaptive-background='1'>
83+
<img id="img" src="images/10.jpg" data-adaptive-background>
8484
</div>
8585

8686
<div class='img-wrap'>
87-
<img id="img" src="images/11.jpg" data-adaptive-background='1'>
87+
<img id="img" src="images/11.jpg" data-adaptive-background>
8888
</div>
8989

9090
<div class='img-wrap'>
91-
<img id="img" src="images/12.jpg" data-adaptive-background='1'>
91+
<img id="img" src="images/12.jpg" data-adaptive-background>
9292
</div>
9393

9494
<div class='img-wrap'>
95-
<img id="img" src="images/13.jpg" data-adaptive-background='1'>
95+
<img id="img" src="images/13.jpg" data-adaptive-background>
9696
</div>
9797

9898

‎demos/cors.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
</script>
1515

16-
<style type="text/css">
16+
<style type="text/css">
1717

1818
body{
1919
max-width: 500px;
@@ -39,8 +39,8 @@
3939
<body>
4040

4141
<div class='img-wrap'>
42-
<img id="img" crossOrigin='' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4629/typehunting-01.jpg" data-adaptive-background='1' data-ab-parent='body'>
42+
<img id="img" crossOrigin='' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4629/typehunting-01.jpg" data-adaptive-background data-ab-parent='body'>
4343
</div>
4444

4545
</body>
46-
</html>
46+
</html>

‎demos/data-url.html‎

Lines changed: 4 additions & 4 deletions
Large diffs are not rendered by default.

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
</script>
1515

16-
<style type="text/css">
16+
<style type="text/css">
1717

1818
body{
1919
max-width: 500px;
@@ -23,7 +23,7 @@
2323
.img-wrap{
2424
background: white;
2525
height: 500px;
26-
width: 500px;
26+
width: 500px;
2727
position: absolute;
2828
top: 50%; left: 50%;
2929
text-align: center;
@@ -44,8 +44,8 @@
4444
<!--
4545
Note that we've explictly declared **2** parents.
4646
-->
47-
<img src="images/9.jpg" data-adaptive-background='1' data-ab-parent='body, .img-wrap'>
47+
<img src="images/9.jpg" data-adaptive-background data-ab-parent='body, .img-wrap'>
4848
</div>
4949

5050
</body>
51-
</html>
51+
</html>

0 commit comments

Comments
 (0)