[JS]カラー画像を白黒に自動変更して表示する画像ギャラリー -Black and White

カラー画像を白黒のグレースケール画像に自動変更して表示する画像ギャラリーのjQueryのプラグインを紹介します。

Black and White
デモページ

[ad#ad-2]

デモでは各画像をマウスホバーすると、元のカラー画像が表示されます。

デモページ：マウスホバー（2番目）でカラー表示

Black and Whiteの実装

外部スクリプト

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script src="js/jquery.min.js"></script>                                                                
<script src="js/jQuery.BlackAndWhite.js"></script>

HTML

画像を内包するa要素に「class="bwWrapper"」を加えます。

<ul id="wrapper">
	<li><a href="#" class="bwWrapper"><img  src="files/Hydrangeas.jpg" width="300" height="225" /></a></li>
	<li><a href="#" class="bwWrapper"><img  src="files/Desert.jpg" width="300" height="225" /></a></li>
	<li><a href="#" class="bwWrapper"><img  src="files/Chrysanthemum.jpg" width="300" height="225" /></a></li>
	<li><a href="#" class="bwWrapper"><img  src="files/Jellyfish.jpg" width="300" height="225" /></a></li>
	<li><a href="#" class="bwWrapper"><img  src="files/Koala.jpg" width="300" height="225" /></a></li>
	<li><a href="#" class="bwWrapper"><img  src="files/Lighthouse.jpg" width="300" height="225" /></a></li>
	<li><a href="#" class="bwWrapper"><img  src="files/Penguins.jpg" width="300" height="225" /></a></li>
	<li><a href="#" class="bwWrapper"><img  src="files/Tulips.jpg" width="300" height="225" /></a></li>
</ul>

CSS

「.bwWrapper」に下記のスタイルを与えます。

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

JavaScript

jQueryのセレクタに画像を内包する要素のclass「.bwWrapper」を指定します。

$(document).ready(function(){
$('.bwWrapper').BlackAndWhite();
});

[ad#ad-2]

スクリプトの注意点

画像ファイルはページと同じサーバーにホストする必要があります。
※外部サーバーの画像には対応していません。