2014/07/08

画像をオシャレに表示!! jQueryプラグイン『BlackAndWhite』

画像をオシャレに表示!! jQueryプラグイン『BlackAndWhite』

今回は画像をオシャレに表示できるjQueryプラグインの『BlackAndWhite』を紹介します.

まず,http://gianlucaguarini.github.io/jQuery.BlackAndWhite/にアクセス後,下部のダウンロードリンクをクリックし,ダウンロードサイトへ移動します.

画面右側にあるDownload ZIPをクリックし,zipファイルをダウンロードします

解凍したzipファイル内にある,jquery.BlackAndWhite.jsを,jQuery本体と共に読み込みます.

<script src="jquery-1.11.0.js"></script>
<script src="jquery.BlackAndWhite.js"></script>

次に,以下の例のように,画像を読み込み,bwWrapperというクラスを付与します.
divやliでも構いません

<div class="bwWrapper">
  <img src="sample.jpg">
</div>

さらに,bwWrapperクラスに,以下のCSSを追加します.

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

最後に,JavaScriptで,以下の様に記述します.アニメーション実行速度など,いくつかオプションが設定できます.

$('.bwWrapper').BlackAndWhite({
	hoverEffect : true, //エフェクトの有無(デフォルトでtrue)
	// 高速化のための BnWWorker.jsへのパス(デフォルトでfalse)
	webworkerPath : false,
	// エフェクトの動作を逆にするかどうか(デフォルトでfalse)
	invertHoverEffect : false,
	// モダンブラウザ以外(IE9以下での使用は常に1)
	intensity : 1,
	speed : {
	    fadeIn : 200, // フェードインにかかる時間(ミリ秒)
	    fadeOut : 800 //フェードアウトに係る時間(ミリ秒)
	},
	onImageReady : function(img) {
	    // 画像の準備が完了された時に呼び出される関数
	}
    });

以下がサンプルになります.

マウスオーバーした時に画像の切り替わるおしゃれな演出が簡単に実装できます.また,対応ブラウザも幅広くなっているので,ぜひ使ってみてください.