Update: january 17, 2012 : now with REAL screen orientation detection and browser resize.
Update: january 13, 2012 : now with screen orientation detection.

how to use

Include :

• jquery.
• Include jquery smartresize : https://github.com/louisremi/jquery-smartresize/
• Include the imgzr.js file.

$(function () {
 $('body').imgzr();
});

It will look into the given element (here “body”) for image and change the src if needed.

Check the demo : http://dev.federalbureauofinhumanity.org/imgzr/ (last version is v0.2)

It has been tested under :

• Chrome 16
• Firefox 9
• IE9
• Ipad
• Iphone

configuration

Prepare your images ! Your image should have the small image in src to prevent bandwith overcharging. Add data- with the well sized image. Example :

img src="./img/small.jpg" alt=""
 data-small="./img/small.jpg"
 data-medium="./img/medium.jpg"
 data-large="./img/large.jpg"

(Sorry, I dropped the “<” & “/>” because of the pre tag)

The default configuration is the following :

resolutions:{
 small:{min:0, max:480},
 medium:{min:480, max:768},
 large:{min:768, max:10000}
}

You can change this passing a new configuration to the function call :

$(function () {
 var config = {
 resolutions:{
 small:{min:0, max:1000},
 medium:{min:1000, max:10000},
 large:{min:10000, max:100000}
 }
 };
 $('body').imgzr(config);
});

license

This script is licensed under the terms of the WTF Public License (see here and here) :

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004 

 Copyright (C) 2004 Sam Hocevar  

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed. 

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 

  0. You just DO WHAT THE FUCK YOU WANT TO.

Contact

You can contact me at siegfried.ehretATgmail.com (replace AT with @) Please write “imgzr” or something in your subject.