Lab Widgets, wotsits & what-not

Doubletake

A jQuery plugin for responsive images. Intended to be a proof of concept.

Doubletake dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary.

I'm using a couple of tools to help me resize the images on this page - a local copy of SLIR and the src.sencha.io web service. If you aren't comfortable resizing images on the fly, you could simply host multiple copies and then set the Doubletake breakpoints to the sizes you have created.

Basic usage

$('#container').doubletake();

Config

You can configure the breakpoints, the regular expression pattern to match on the src attribute and whether to update just on $(document).ready() or on $(window).resize() as well.

'breakpoints': [320,480,640,960,1024],
'pattern': '/slir/w([0-9]+)',
'watchresize': true

breakpoints

An array representing the sizes of images you want to use. Defaults are 320, 480, 640, 960 and 1024. The last breakpoint in the list is the maximum size.

pattern

A regular expression used to replace the value of the src attribute. Default is SLIR format.

watchresize

Boolean that instructs Doubletake to update if the window is resized. Default is false.

Here is the syntax with just two breakpoints and a custom image path.

$('#container').doubletake({
'breakpoints':[480,960],
'pattern':'/images/foobar.jpg?width=([0-9]+)'
});

Example (not responsive)

Image resized by SLIR to 100px wide.

<img src="/slir/w100/foobar.jpg" />

Examples (responsive)

Image resized using custom breakpoints.

Using SLIR on local server

$(document).ready(function()
{
	$('#slirtest').doubletake({'breakpoints':[290,440,900]});	
});

Using src.sencha.io

$(document).ready(function()
{
	$('#slirtest').doubletake({
	'breakpoints':[290,440,900],
	'pattern':'http://src.sencha.io/([0-9]+)'
	});	
});

Browser support

Tested in Safari 5.1, Chrome 13 and Firefox 5.

Get Doubletake

OriginalMinified

Version history

1.1 (12 August 2011)

  • Tested with src.sencha.io
  • Improvements to regular expression matching

1.0 (28 July 2011)

  • Initial release