jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.
You have a choice of two ways to use the plugin, with
<figure> tags or with the newly proposed
<source> tags. Bear in mind that the picture and source tags have only recently been proposed and are not yet valid HTML code.
Initialise the plugin
To initialise it you just add
.picture() to the element you want to apply it to. It only works on figure and picture tags for now:
Usage with Figures
To use the plugin with your figure tags you need to add data attributes to them for each size of the image you want to use. It's a good idea to add a class to the tag too so it doesn't select every figure on the page. Heres a code example:
<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
<img src="assets/images/large.png" alt="A Half Brained Idea">
Usage with Pictures
Using the plugin with the new picture tag works in a similar way. Instead of the images being declared in data attributes they're declared using