/**
* jQuery Picture
* http://jquerypicture.com
* http://github.com/Abban/jQuery-Picture
*
* May 2012
*
* @version 0.9
* @author Abban Dunne http://abandon.ie
* @license MIT
*
* jQuery Picture is a 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. In the meantime
* this plugin will be kept up to date with latest developments.
*
*/
(function($) {
$.fn.picture = function(args) {
this.each(function() {
var breakpoints = new Array();
var windowWidth, currentMedia, element, timeoutOffset;
// Save off the element so it can be easily used inside a function
element = $(this);
// Initialise the images
getCurrentMedia(true);
// Only call the image resize function 200ms after window stops being resized
timeoutOffset = false;
$(window).resize(function() {
if (timeoutOffset !== false) clearTimeout(timeoutOffset);
timeoutOffset = setTimeout(getCurrentMedia, 200);
});
/**
* getCurrentMedia
*
* Checks the window width off the media query types and selects the current one.
* Calls the setPicture or setFigure function to set the image.
*
*/
function getCurrentMedia(init) {
if (init) {
if (element.get(0).tagName.toLowerCase() == 'figure') {
var mediaObj = element.data();
$.each(mediaObj, function(media) {
var num;
num = media.replace(/[^\d.]/g, '');
if (num) breakpoints.push(num);
});
} else {
element.find('source').each(function() {
var media, num;
media = $(this).attr('media');
if (media) {
num = media.replace(/[^\d.]/g, '');
breakpoints.push(num);
}
});
}
}
var c = 0;
windowWidth = $(window).width();
// Set the c variable to the current media width
$.each(breakpoints, function(i, v) {
if (windowWidth > v && c < v) c = v;
});
if (currentMedia !== c) {
currentMedia = c;
if (element.get(0).tagName.toLowerCase() == 'figure' || element.get(0).tagName.toLowerCase() == 'a') setFigure();
else setPicture();
}
}
/**
* setPicture
*
* Pulls the image src and media attributes from the source tags and sets
* the src of the enclosed img tag to the appropriate one.
*
*/
function setPicture() {
var sizes = new Object();
element.find('source').each(function() {
var media, path, num;
media = $(this).attr('media');
path = $(this).attr('src');
if (media) num = media.replace(/[^\d.]/g, '');
else num = 0;
sizes[num] = path;
});
if (element.find('img').length == 0) {
var prep = '<img src="' + sizes[currentMedia] + '" style="' + element.attr('style') + '" alt="' + element.attr('alt') + '">';
if (element.find('a').length == 0) {
element.append(prep);
} else {
element.find('a').append(prep);
}
} else {
element.find('img').attr('src', sizes[currentMedia]);
}
}
/**
* setFigure
*
* Pulls the image src and and media values from the data attributes
* and sets the src of the enclosed img tag to the appropriate one.
*
*/
function setFigure() {
var sizes = new Object();
var mediaObj = element.data();
$.each(mediaObj, function(media, path) {
var num;
num = media.replace(/[^\d.]/g, '');
if (!num) num = 0;
sizes[num] = path;
});
if (element.find('img').length == 0) {
var prep = '<img src="' + sizes[currentMedia] + '" alt="' + element.attr('title') + '">';
if (element.find('a').length == 0) {
element.prepend(prep);
} else {
element.find('a').prepend(prep);
}
} else {
element.find('img').attr('src', sizes[currentMedia]);
}
}
});
};
})(jQuery);
$(function() {
$('figure, picture').picture();
});
body{
background:url(data:image/png;base64,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);
}
img{box-shadow:1px 1px 3px #ddd;}
<figure data-media="http://placehold.it/370x285/efc7de/555555" data-media440="http://placehold.it/520x285/aedcff/555555" data-media600="http://placehold.it/640x285/ffd1ae/555555">
<a href="javascript:void(0);">
<noscript>
<img src="http://placehold.it/640x285/ffd1ae/555555">
</noscript>
</a>
</figure>