Responsiveness

[pisi]

A request has been made to teach Reel to be responsive and eventually scale and grow with its parent.

Such a feature might be performance heavyish, so an option switch responsive will be provided and will be set to OFF by default (at least for the time being).

[pisi]

Unfortunately, doing so for sprites and stitched setups is not possible without breaking the current compatibility (possible only in IE8+), so for the first phase, I will leave these modes out :( Hopefully this decision will change...

[pisi]

For those who like to try this out, the work on this is being carried on the responsiveness branch

[pisi]

So, until now, this feature supported only sequences. Now it supports stitched and sprites too. There is a small limitation however. IE's insufficiencies mean, that when you set responsive: true IE will fall back to disabled state for stitched and sprites in IE 8 or lower.

[pisi]

There's one new feature coming alongside of this and that is substitution of (certain) data values in URLs.

Reel will process each and every image resource URL and substitute special markup with actual values from the data store. Marks made of @ character followed by upper case letter will be substituted with values either directly from data store (@W and @H for width and height) or calculated (@T is substituted with momentary timestamp in milliseconds).
Markup can appear anywhere in the folder name, file name or the query params (also in path option) and even multiple times.

For example, with URL like this:

image.jpg?size=@Wx@H

... the actual request will be for:

image.jpg?size=320x180

(for Reel 320 pixels wide and 180 high).

Currently supported width (@W), height (@H) and timestamp (@T). Will be adding one for user-defined custom method too.

[pisi]

You can also define your own substitution method(s) inside the $.reel.substitutes object, by default holding the built-in $.reel.substitutes["T"] which substitutes @T with timestamp. Your function will receive data store get interface as only argument and it must return a string.

For example to create a quality substitute @Q:

$.reel.substitutes["Q"] = function( get ){
    if ( get("width") > 500 ) return "high"
    else return "low";
}

... which you can then use in URLs:

images/@Q/53.jpg

... to fetch two different qualities from two folders:

images/high/53.jpg // In case stage wider than 500 pixels
images/low/53.jpg // In case of narrower stage

[pisi]

Merged into development branch ready for release.

[pisi]

Released today as part of v1.3.0