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.