Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Patch abernier bunchofthings #29

Open
wants to merge 27 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 0 additions & 31 deletions Gruntfile.js

This file was deleted.

10 changes: 10 additions & 0 deletions Makefile
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
all: build/srcset.js build/srcset.min.js

build/srcset.js: ./node_modules/.bin/browserify $(shell find -L js -name '*.js')
./node_modules/.bin/browserify ./js/srcset.js > $@

build/srcset.min.js: build/srcset.js
./node_modules/.bin/uglifyjs $^ -o $@ -m

node_modules ./node_modules/%:
npm install
43 changes: 37 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,48 @@

See [the specification][spec] for the reference algorithm.

## INSTALL

with NPM:

```sh
npm install https://github.com/abernier/srcset-polyfill/archive/patch-abernier-bunchofthings.tar.gz
```

or with a plain old `<script>` tag:

```html
<script src="https://cdn.rawgit.com/abernier/srcset-polyfill/patch-abernier-bunchofthings/build/srcset.js"></script>
```

or with the minified version:

```html
<script src="https://cdn.rawgit.com/abernier/srcset-polyfill/patch-abernier-bunchofthings/build/srcset.min.js"></script>
```

## Usage

Use the `srcset` attribute of `<img>` elements. For example:
Use the `data-srcset` attribute of `<img>` elements. For example:

```html
<img alt="The Breakfast Combo"
src="160x120.png"
data-srcset="320x240.png 320w,640x480 320w 2x, 768x576.png 768w,1536x1152.png 768w 2x, 1024x768.png 1024w,2048x1536.png 1024w 2x, 2048x1536.png 5000w">
```

Include `build/srcset.min.js` in your page. Then, you'll have a `srcset` object with the following API :

<img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w,
banner-phone-HD.jpeg 100w 2x"/>
- `srcset.update()` -- update all images in the page
- `srcset.imgs.get(<img>).update()` -- update one image

A `'srcchange'` event will also be triggered when the `src` of an image changes :

Include `build/srcset.min.js` in your page.
```javascript
myimg.addEventListener('srcchanged', function (data) {
console.log("img with previous src %s was changed to %s", data.previous, data.actual)
}, false);
```

## Open questions

Expand Down
Loading