jquery.adaptive-backgrounds.js

画像のドミナントカラーを取得するライブラリ

• jquery.adaptive-backgrounds.js

 

デモ
とりあえずシンプルに

 

githubから色々あるんですがjquery.adaptive-backgrounds.jsをDL
それをjqueryと一緒に読み込む。

 

JSには

$(document).ready(function(){
	$.adaptiveBackground.run();
});

 

HTMLは

<p><img src="./image/1.png" data-adaptive-background="1"></p>
<p><img src="./image/2.jpg" data-adaptive-background="1"></p>
<p><img src="./image/3.png" data-adaptive-background="1"></p>

といった具合にimgをdivやpタグで囲って data-adaptive-background=”1″ をつける
囲ったタグにbgColorが指定されるようになっているのでそれに合わせてcss調整する