{width} Interpolation in data-src

[thom4parisot]

tl;dr

data-src does not always comply with {width} being replaced by a numeric value.
{width} is now replaceable any width breakpoint by any value of your choice using the availableWidths option.

Relies on #15 to be merged.

Features

data-src

• {width} can be replaced by something else than a numeric value

<div data-src="http://farm4.staticflickr.com/3773/9676470682_3d418eeb40_{width}.jpg"> -> :

• http://farm4.staticflickr.com/3773/9676470682_3d418eeb40_d.jpg
• http://farm4.staticflickr.com/3773/9676470682_3d418eeb40_z_d.jpg
• http://farm4.staticflickr.com/3773/9676470682_3d418eeb40_b_d.jpg

  Configuration

The array of widths now accepts array-like values:

• without interpolation: availableWidths: [100, 250, 500] will replace {width} by either 100, 250 or 500
• with interpolation: availableWidths: [ [100, 'small'], [250, 'medium'], [500, 'large'] ] will replace {width} by either small, medium or large

  Demo

A demo showcases this using Flickr URL system.

[Integralist]

I've closed the #15 PR and so I'm closing this by association as it closely relies on it.