Skip to content
Responsive images using Imager.js and Polymer
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app/bower_components
LICENSE
README.md
bower.json
index.html
x-imager.html

README.md

<x-imager>

A Polymer element for responsive images with Imager.js

Maintained by Addy Osmani.

Demo

Check it live.

Installation

Install using Bower:

 bower install x-imager

Usage

  1. Import Web Components' polyfill (platform.js)

    <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/platform.js"></script>
  2. Import Custom Element:

    <link rel="import" href="x-imager.html">
  3. Start using it!

    <x-imager></x-imager>

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:

<x-imager widths="200 260 320 600" src="http://placehold.it/{width}" width="340"></x-imager>
<x-imager widths="400 460 420 1200" src="http://placehold.it/{width}" width="500" class="img-replace" resize="false" className="imagered"></x-imager>
<x-imager widths="400 460 420 1200" src="http://placehold.it/{width}" width="400" class="img-replace" resize="false" className="imagered" scrollDelay="100" lazyload="true"></x-imager>

License

MIT License

You can’t perform that action at this time.