jQuery Plugin For Grabbing Image Color - imgcolr

imgcolr is an awesome jQuery plugin that grabs the dominant color of a given image's borders for further usage. The demo page shows us that the web page's background color will be dynamicly adapted for the current image.

How to use it:

1. Upload the imgcolr.swf on your hosting to access image binary data.

2. If your swf file and images are hosted on the different domains, make sure upload the crossdomain.xml file in the root directory of the image server.

<?xml version="1.0"?>
<cross-domain-policy>
  <allow-access-from domain="jqueryscript.net" />
</cross-domain-policy>

3. Include jQuery library and jQuery imgcolr plugin on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="imgcolr.min.js"></script>

4. Specify the swf file's url

Imgcolr.setSwf('http://www.jqueryscript/imgcolr.swf');

5. Then feel free to use

var imgs = $('img');

// get the image borders' color 
// and the style property background-color of each parent will be set to this color,
// The result of this call is a background-color change for all div element with class "box". 
imgs.imgcolr();

// get the image borders' color 
// and the style property background-color of the ancestors with class "item" will 
// be set to this color.
imgs.imgcolr('.item');

// get the image borders' color 
// you can specify which elements' background-color to set by returning them
imgs.imgcolr(function () {
  // `this` refers to the current img element
  return $(this).parent().next('.label');
});

// if you don't want any element's background-color change,
// or maybe you just want to know the image borders' color,
// return nothing is fine.
imgs.imgcolr(function (img, color) {
  // `img` refers to the current img element
  console.log(img);
  // `color` is the grabbed color, a string like "#ededed"
  console.log(color);
});

// Suppose that you just adapt background color only for a given image's left and 
// right borders, you can ignore the others, here is the rule:
// "t" represents top border 
// "r" represents right border
// "b" represents bottom border
// "l" represents left border
imgs.imgcolr({
  ignore: 'tb'  // ignores top border and bottom border
});

// Of course you can use the filter and ignore option at the same time
imgs.imgcolr('.item', {
  ignore: 'tb'
});

---

This awesome jQuery plugin is developed by swaydeng. For more Advanced Usages, please check the demo page or visit the official website.