imageSelector

The imageSelector is a responsive image selector that takes a list of cuts and chooses the best fit for the available space. It can be used automatically with data- attributes or manually with JavaScript.

Basic Usage

<img data-cuts='[ { width:100, src="/path/to/small" }, { width:200, src:"/path/to/large" } ]' style="width: 100px" />

<scrpt>
	imageSelector.selectImages(document.body);
</scrpt>

Slightly More Advanced

If you already have your cuts in an array you can select a source, recalculate, and clean up any watchers.

Giving the Image Selector Options

The image selector uses a JSON array or object of possible image cuts and picks the correct one. These must have width and src attributes, aspectRatio is optional.

[
	{
		"width": 100,
		"aspectRatio": "16:9",
		"src": "http://placehold.it/100x56",
		"at2x": false
	},
	{
		"width": 200,
		"aspectRatio": "16:9",
		"src": "http://placehold.it/200x112",
		"at2x": "http://placehold.it/200x112/retina"
	}
]

// or 

{
	"key1": {
		"width": 100,
		"aspectRatio": "16:9",
		"src": "http://placehold.it/100x56"
	},
	"key2": {
		"width": 200,
		"aspectRatio": "16:9",
		"src": "http://placehold.it/200x112"
	}
}

The imageSelector looks for this array in the data-cuts attribute of an image.

<img data-cuts="[...the above array...]" data-aspect-ratio="16:9" data-src-attribute="data-src" />

On a retina display, if cut.at2x is true it will add @2x to the end of the file path, if cut.at2x is a string, that URL will be used instead of the src attribute.

Options

• data-aspect-ratio - the image selector will ignore images without this aspect ratio.
• data-src-attribute - the image selector will use this attribute instead of the src attribute. Use this for lazy loading.
• data-responsive - adds a resize listener to the body to detect when the image changes sizes.