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.
66 |
67 |
68 |
69 |
70 |
73 |
74 |
75 |
76 |
77 | Fig 1. Drag your browser window in an out to see the image source change.
78 |
79 |
80 |
81 |
82 |
83 |
Usage
84 |
85 |
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.
86 |
87 |
Initialise the plugin
88 |
89 |
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:
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:
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:
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:
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.
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
Plugins & Stuff
241 |
242 |
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.
243 |
244 |
245 |
Hammy: Plugin to add responsive support for your WordPress site by @noeltock.
246 |
247 |
248 |
256 |
257 |
258 |
259 |
260 |
--------------------------------------------------------------------------------
/js/jquery-picture-min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * jQuery Picture
3 | * http://jquerypicture.com
4 | * http://github.com/Abban/jQuery-Picture
5 | *
6 | * May 2012
7 | *
8 | * @version 0.9
9 | * @author Abban Dunne http://abandon.ie
10 | * @license MIT
11 | *
12 | * jQuery Picture is a plugin to add support for responsive images to your layouts.
13 | * It supports both figure elements with some custom data attributes and the new
14 | * proposed picture format. This plugin will be made redundant when the format is
15 | * approved and implemented by browsers. Lets hope that happens soon. In the meantime
16 | * this plugin will be kept up to date with latest developments.
17 | *
18 | */(function(e){e.fn.picture=function(t){var n={container:null,ignorePixelRatio:!1,useLarger:!1,insertElement:">a",inlineDimensions:!1},r=e.extend({},n,t);this.each(function(){function a(o){if(o){if(s.get(0).tagName.toLowerCase()=="figure"){var a=s.data();e.each(a,function(e){var n;n=e.replace(/[^\d.]/g,"");n&&t.push(parseInt(n))})}else s.find("source").each(function(){var n,r;n=e(this).attr("media");if(n){r=n.replace(/[^\d.]/g,"");t.push(parseInt(r))}});t.sort(function(e,t){return e-t})}var c=0;r.container==null?n=e(window).width()*u:n=e(r.container).width()*u;e.each(t,function(e,t){parseInt(n)>=parseInt(t)&&parseInt(c)<=parseInt(t)&&(c=t)});if(r.useLarger){idx=t.indexOf(c);idx").attr("src",e("img",s).attr("src")).load(function(){e("img",s).attr("height",this.height);e("img",s).attr("width",this.width)})}function l(){var t=new Object,n=s.data();e.each(n,function(e,n){var r;r=e.replace(/[^\d.]/g,"");r||(r=0);t[r]=n});if(s.find("img").length==0){var o='").attr("src",e("img",s).attr("src")).load(function(){e("img",s).attr("height",this.height);e("img",s).attr("width",this.width)})}var t=new Array,n,i,s,o,u=1;!r.ignorePixelRatio&&window.devicePixelRatio!==undefined&&(u=window.devicePixelRatio);s=e(this);s.find("noscript").remove();a(!0);o=!1;e(window).resize(function(){o!==!1&&clearTimeout(o);o=setTimeout(a,200)})})}})(jQuery);
--------------------------------------------------------------------------------
/js/jquery-picture.js:
--------------------------------------------------------------------------------
1 | /**
2 | * jQuery Picture
3 | * http://jquerypicture.com
4 | * http://github.com/Abban/jQuery-Picture
5 | *
6 | * May 2012
7 | *
8 | * @version 0.9
9 | * @author Abban Dunne http://abandon.ie
10 | * @license MIT
11 | *
12 | * jQuery Picture is a plugin to add support for responsive images to your layouts.
13 | * It supports both figure elements with some custom data attributes and the new
14 | * proposed picture format. This plugin will be made redundant when the format is
15 | * approved and implemented by browsers. Lets hope that happens soon. In the meantime
16 | * this plugin will be kept up to date with latest developments.
17 | *
18 | */
19 | (function($){
20 |
21 | $.fn.picture = function(args){
22 |
23 | var defaults = {
24 |
25 | container : null,
26 | ignorePixelRatio: false,
27 | useLarger: false,
28 | insertElement: '>a',
29 | inlineDimensions: false
30 |
31 | };
32 |
33 | var settings = $.extend({}, defaults, args);
34 |
35 | this.each(function(){
36 |
37 | var breakpoints = new Array();
38 |
39 | var windowWidth, currentMedia, element, timeoutOffset;
40 |
41 | // Check the device pixel ratio
42 | var PixelRatio = 1;
43 | if(!settings.ignorePixelRatio && window.devicePixelRatio !== undefined) PixelRatio = window.devicePixelRatio;
44 |
45 | // Save off the element so it can be easily used inside a function
46 | element = $(this);
47 |
48 | //Delete the noscript we don't need it now anyway
49 | element.find('noscript').remove();
50 |
51 | // Initialise the images
52 | getCurrentMedia(true);
53 |
54 | // Only call the image resize function 200ms after window stops being resized
55 | timeoutOffset = false;
56 |
57 | $(window).resize(function(){
58 |
59 | if(timeoutOffset !== false)
60 | clearTimeout(timeoutOffset);
61 |
62 | timeoutOffset = setTimeout(getCurrentMedia, 200);
63 |
64 | });
65 |
66 |
67 | /**
68 | * getCurrentMedia
69 | *
70 | * Checks the window width off the media query types and selects the current one.
71 | * Calls the setPicture or setFigure function to set the image.
72 | *
73 | */
74 | function getCurrentMedia(init){
75 |
76 | if(init){
77 |
78 | if(element.get(0).tagName.toLowerCase() == 'figure'){
79 |
80 | var mediaObj = element.data();
81 |
82 | $.each(mediaObj, function(media){
83 |
84 | var num;
85 |
86 | num = media.replace(/[^\d.]/g, '');
87 |
88 | if(num)
89 | breakpoints.push(parseInt(num));
90 |
91 | });
92 |
93 | }else{
94 |
95 | element.find('source').each(function(){
96 |
97 | var media, num;
98 |
99 | media = $(this).attr('media');
100 |
101 | if(media){
102 |
103 | num = media.replace(/[^\d.]/g, '');
104 |
105 | breakpoints.push(parseInt(num));
106 | }
107 |
108 | });
109 |
110 | }
111 | breakpoints.sort(function(a,b){return a - b}); //make sure the largest breakpoint is the last
112 |
113 | }
114 |
115 | var c = 0;
116 |
117 | // Check if user defined container, otherwise take window
118 | if (settings.container == null){
119 |
120 | windowWidth = ($(window).width()) * PixelRatio;
121 |
122 | }else{
123 |
124 | windowWidth = ($(settings.container).width()) * PixelRatio;
125 |
126 | }
127 |
128 | // Set the c variable to the current media width
129 | $.each(breakpoints, function(i,v){
130 |
131 | if(parseInt(windowWidth) >= parseInt(v) && parseInt(c) <= parseInt(v))
132 | c = v;
133 |
134 | });
135 |
136 | if (settings.useLarger ){
137 | idx = breakpoints.indexOf(c);
138 | if (idx < breakpoints.length-1) //make sure we're not already using the largest breakpoint
139 | c = breakpoints[ idx + 1];
140 | }
141 |
142 | if(currentMedia !== c){
143 | currentMedia = c;
144 |
145 | if(element.get(0).tagName.toLowerCase() == 'figure')
146 | setFigure();
147 | else
148 | setPicture();
149 | }
150 |
151 | }
152 |
153 |
154 | /**
155 | * setPicture
156 | *
157 | * Pulls the image src and media attributes from the source tags and sets
158 | * the src of the enclosed img tag to the appropriate one.
159 | *
160 | */
161 | function setPicture(){
162 |
163 | var sizes = new Object();
164 |
165 | element.find('source').each(function(){
166 |
167 | var media, path, num;
168 | media = $(this).attr('media');
169 | path = $(this).attr('src');
170 |
171 | if(media)
172 | num = media.replace(/[^\d.]/g, '');
173 | else
174 | num = 0;
175 |
176 | sizes[num] = path;
177 |
178 | });
179 |
180 | if(element.find('img').length == 0){
181 |
182 | var prep = '").attr("src", $('img', element).attr("src")).load(function(){
206 | $('img', element).attr('height', this.height);
207 | $('img', element).attr('width', this.width);
208 | });
209 |
210 | }
211 |
212 | }
213 |
214 |
215 | /**
216 | * setFigure
217 | *
218 | * Pulls the image src and and media values from the data attributes
219 | * and sets the src of the enclosed img tag to the appropriate one.
220 | *
221 | */
222 | function setFigure(){
223 |
224 | var sizes = new Object();
225 |
226 | var mediaObj = element.data();
227 |
228 | $.each(mediaObj, function(media, path){
229 |
230 | var num;
231 |
232 | num = media.replace(/[^\d.]/g, '');
233 |
234 | if(!num)
235 | num = 0;
236 |
237 | sizes[num] = path;
238 |
239 | });
240 |
241 | if(element.find('img').length == 0){
242 |
243 | var prep = '").attr("src", $('img', element).attr("src")).load(function(){
267 | $('img', element).attr('height', this.height);
268 | $('img', element).attr('width', this.width);
269 | });
270 |
271 | }
272 |
273 | }
274 |
275 | });
276 |
277 | };
278 |
279 | })(jQuery);
--------------------------------------------------------------------------------
73 |
74 |
75 |