imgzr

imgzr, a jQuery responsive image plugin

  • Update = “february 24, 2012 : changing the img source only when needed.”
  • 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
  • Include the imgzr.js file.

And call:

$(function () {
  $(‘body’).imgzr();
});

It will look into the given element (here “body”) for image and change the src if needed. Check the demo (broken link) (last version is v0.3.1)It has been tested under :

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

There’s a weird thing happening on my Android 2.3.5 (strange behaviour about screen orientation), but I hope to make it work soon !

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 :

  • src=“./img/small.jpg” alt=“”
  • data-small=“./img/small.jpg”
  • data-medium=“./img/medium.jpg”
  • data-large=“./img/large.jpg”

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 sieg@gmail.com. Please write “imgzr” or something in your subject.