<h2 class="fw-300">Basic usage</h2>
<p>To see this component in action, resize your browser window or look at this page on mobile.</p>
<p>ImageQuery will swap the image with a lower (or higher) resolution image as you resize.</p>
{% capture example_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 imageQueryElement = Ink.s('.imageQueryExample img');
    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>

{% endcapture %}

{{ example_code }}

<p class="example-title">Code</p>
{% highlight html %}
{{ example_code }}
{% endhighlight %}


<h2 class="fw-300">Basic usage</h2>
<p>To see this component in action, resize your browser window or look at this page on a small device.</p>
<p>ImageQuery will swap the image with a lower (or higher) resolution image as you resize.</p>
{% capture example_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>

{% endcapture %}

{{ example_code }}

<p class="example-title">Code</p>
{% highlight html %}
{{ example_code }}
{% endhighlight %}


Fix bad copy, unused variable
Fix bad copy, unused variable
