new Ink.UI.ImageQuery(selector, [options])

Accepts

• selector

  Selector or element

• options

  Options object

• options.src

  A template string in which '{:width}' or '{:label}' will be expanded into the corresponding properties of the `query` object, or a function which takes the query object and should return a src string, for more flexibility.

• options.retina

  String or Callback function (that returns a string) with the path to be used to get RETINA specific images.

• options.queries

  Array of queries. Each query object contains the following properties:

• options.queries.label

  Label of the query. Ex. 'small'.

• options.queries.width

  Min-width to use this query.

• options.queries.src

  If you don't want to specify a "string template" in options.src, you can also specify an image source in each query by setting this option.

• options.onLoad

  A function to be attached to the image 'load' event. Called when an image is loaded into this img (occurs several times because the user may resize the page, causing the image's "load" event to be called several times).

Basic usage

To see this component in action, resize your browser window or look at this page on a small device.

ImageQuery will swap the image with a lower (or higher) resolution image as you resize.

Code

<div class="imageQueryExample column-group vspace">
    <img src="/assets/img/examples/small/park.jpg" />
</div>
<script type="text/javascript">
Ink.requireModules( ['Ink.Dom.Selector_1', 'Ink.UI.ImageQuery_1'], function( Selector, ImageQuery ){
    var imageQueryObj = new ImageQuery('.imageQueryExample img',{
        src: '/assets/img/examples/{:label}/park.jpg',
        queries: [
            {
                label: 'small',
                width: 480
            },
            {
                label: 'medium',
                width: 640
            },
            {
                label: 'large',
                width: 1024
            }
        ]
    });
} );
</script>

.getQuerySrc(query) method

Gets viewport width

Accepts

• query

  A query object, comprised of:

• query.width

  The minimum viewport width in which this query is active.

• query.label

  The label for this query. Used in the template strings.

• query.src

  this.getOption('src')Exactly the same as `options-src`. If you pass this, `options.src` will be overridden. A template string in which '{:width}' or '{:label}' will be expanded into the corresponding properties of the `query` object, or a function which takes the query object and should return a src string, for more flexibility.