IE6もOK！画像を白黒にするjQueryプラグイン「jQuery.BlackAndWhite」

白黒化するjQueryプラグインはいくつかありますが、
その多くがCanvasを利用しており、IE8以前のブラウザでは利用できないという問題があります。

そんな中で見つけたのが、この「jQuery.BlackAndWhite」というjQueryプラグインです。
canvasを使っていないので、IE6でも利用可能です。

元サイト:http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/

↓こちらがデモです
DEMO

使い方も簡単で、
jQueryとプラグインを読み込み、
対象画像の各々の親要素に任意のクラスをつけ、
$([任意のクラス]).BlackAndWhite({[パラメータ]});
で実行するだけです。

HTML


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jQuery.BlackAndWhite.js"></script>

<div id="wrapper">
	<p class="bwWrapper"><img src="images/img01.jpg" alt="image1"></p>
	<p class="bwWrapper"><img src="images/img02.jpg" alt="image2"></p>
	<p class="bwWrapper"><img src="images/img03.jpg" alt="image3"></p>
	<p class="bwWrapper"><img src="images/img04.jpg" alt="image4"></p>
	<p class="bwWrapper"><img src="images/img05.jpg" alt="image5"></p>
	<p class="bwWrapper"><img src="images/img06.jpg" alt="image6"></p>
</div><!-- wrapper end -->

</div>

CSS


.bwWrapper{
    position:relative;
    display:block;
}

.bwWrapper{

position:relative;

display:block;

}

JavaScript


<script type="text/javascript">
	$(document).ready(function() {
		$(".bwWrapper").BlackAndWhite({
        hoverEffect : true, // tureにすると、ホバーしたときに白黒がカラーに変わる

        // BnWWorker.jsのパスを設定すると、超高速に対応
        webworkerPath : false,

        // trueにすると、レスポンシブ対応
        responsive:true,

        // trueにすると、ホバーしたときの白黒とカラーの状態を逆転
        invertHoverEffect: false,

        speed: { //ホバーしたときのアニメーションの速度を設定
            fadeIn: 200, // 200ミリ秒でフェードイン
            fadeOut: 800 // 800ミリ秒でフェードアウト
        }
    });
	});
</script>

$(document).ready(function() {

$(".bwWrapper").BlackAndWhite({

hoverEffect : true, // tureにすると、ホバーしたときに白黒がカラーに変わる

// BnWWorker.jsのパスを設定すると、超高速に対応

webworkerPath : false,

// trueにすると、レスポンシブ対応

responsive:true,

// trueにすると、ホバーしたときの白黒とカラーの状態を逆転

invertHoverEffect: false,

speed: { //ホバーしたときのアニメーションの速度を設定

fadeIn: 200, // 200ミリ秒でフェードイン

fadeOut: 800 // 800ミリ秒でフェードアウト

}

});

</script>

デモの下の２段を見ていただけるとわかりますが、
実際には、対象画像の上に白黒化した画像がかぶせてある形なので、
パラメータのhoverEffectをfalseにし、
$(‘[任意のクラス] img:last-child’)などで指定し、表示・非表示を切り替えることで、
自由に白黒とカラーを切り替えることができます。

Author Profile