All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.ImageQuery class

Methods
Method name Description
new ImageQuery(selector, [options]) Constructor
.getQuerySrc(query) Gets viewport width

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.