Creative Digital Media

History is recorded moments in life. People’s thoughts, either great among others or just great in their own shadow. Every glimpse of life at that just moment, deserves to be treasured. So just “Keep That Thought”…

jQuery Picture – Plugin

Plugin created by Abban Dunne.

 A jQuery plugin to help ease the transition to responsive images

Overview

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.

A Half Brained Idea
Fig 1. Drag your browser window in an out to see the image source change.

Usage

You have a choice of two ways to use the plugin, with <figure> tags or with the newly proposed <picture> and <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:

$(function(){
    $('figure.responsive').picture();
});

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 data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</figure>

You can see that there are data attributes added to the figure tag that hold the url of the different size images. In this example the attribute with no number is for the 0-400 area. Each one also specifies the break point that image is to be used at. If javascript is turned off it defaults to the image specified in the noscript tag. You initialise the plugin like this:

$(function(){
    $('figure.responsive').picture();
});

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 <source> tags:

<picture alt="A Half Brained Idea">
    <source src="assets/images/small.png">
    <source src="assets/images/medium.png" media="(min-width:440px)">
    <source src="assets/images/large.png" media="(min-width:600px)">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</picture>

And then it’s initialised in a similar way:

$(function(){
    $('picture').picture();
});

Using images with links

In both use cases if you wrap a link around the noscript tag it will insert the image inside it:

<figure data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
    <a href="http://abandon.ie">
        <noscript>
            <img src="assets/images/large.png" alt="A Half Brained Idea">
        </noscript>
     </a>
</figure>
Browser Status Description
Chrome Working Looks grand so it does.
Safari Working Also looks grand.
Mobile Safari Working Looks grand on iPhone, yet to test on the iPad.
Firefox 10 OSX Working Oh so grand.
Firefox 6 OSX Working Testing on a random old FF version.
IE9 Working I thought it wasn’t gonna work but it does.
IE7/8 Working IE7 and 8 don’t support media queries. They still load the appropriate images however as you can see in this demo. If you want to force media queries on these browsers however you can try Respond.

Plugins & Stuff

I’m going to list plugins and themes that use the script here. If you want your one added please drop me a line on Twitter.

  • Hammy: Plugin to add responsive support for your WordPress site by @noeltock.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on August 28, 2012 by in Webtools and tagged , , .