Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/addyosmani/x-imager
Responsive images using Imager.js and Polymer
https://github.com/addyosmani/x-imager
Last synced: 23 days ago
JSON representation
Responsive images using Imager.js and Polymer
- Host: GitHub
- URL: https://github.com/addyosmani/x-imager
- Owner: addyosmani
- License: mit
- Created: 2014-02-16T01:19:32.000Z (over 10 years ago)
- Default Branch: gh-pages
- Last Pushed: 2015-12-14T04:42:47.000Z (almost 9 years ago)
- Last Synced: 2024-10-05T07:36:23.593Z (about 1 month ago)
- Homepage:
- Size: 433 KB
- Stars: 74
- Watchers: 5
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# <x-imager>
A [Polymer](http://polymer-project.org) element for responsive images with [Imager.js](https://github.com/BBC-News/Imager.js/)
> Maintained by [Addy Osmani](https://github.com/addyosmani).
## Demo
> [Check it live](http://addyosmani.github.io/x-imager/index.html).
## Installation
Install using [Bower](http://bower.io):
```shell
bower install x-imager
```
## Usage
1. Import Web Components' polyfill (platform.js)
```html
```
2. Import Custom Element:
```html
```
3. Start using it!
```html
```
## Options
Attribute | Options | Default | Description
--- | --- | --- | ---
`src` | *string* | `` | URL endpoint for images
`widths` | *space separated list* | `` | available image widths
`width` | *number* | `` | enforced size of the image placeholder
`selector` | *string* | `delayed-image-load` | used to locate your div placeholders
`class` | *string* | `` | Class name to give your resizable images
`resize` | *boolean* | `true` | update the src attribute of the relevant images
`lazyload` | *boolean* | `false` | Toggle the lazy load functionality
`scrollDelay` | *number* | `` | helps performance by setting a higher delay
## Examples:
```html
```
```html
```
```html
```
## License
[MIT License](http://opensource.org/licenses/MIT)