• RSS

[JS]マウスオーバーでカラー画像を白黒にできるjQueryプラグイン「jQuery.BlackAndWhite」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

カラーの画像をマウスオーバーで白黒に切り替えることができるjQueryプラグイン「jQuery.BlackAndWhite」について、設置方法と簡単なデモをご紹介します。

jQuery.BlackAndWhite のダウンロード

以下のページより、jQuery.BlackAndWhite のファイルを一式ダウンロードします。


jQuery.BlackAndWhite の設置

ダウンロードしたBlackAndWhite.css ファイルと、jquery.BlackAndWhite.js、jqueryファイルを<head>内に設置します。
<head>
<link href="./BlackAndWhite.css" rel="stylesheet">
<script src="./jquery.min.js"></script>
<script src="./jQuery.BlackAndWhite.js"></script>
</head>


マウスオーバー時に「カラー→白黒」で表示

まずはカラーの画像を、マウスオーバーで白黒に切り替えます。

HTML 側ですが、画像を表示させる場所で以下のような記述をします。
<ul>
<li><a href="#" class="bwWrapper"><img  src="./imgaes01.jpg" /></a></li>
<li><a href="#" class="bwWrapper"><img  src="./imgaes02.jpg" /></a></li>
<li><a href="#" class="bwWrapper"><img  src="./imgaes03.jpg" /></a></li>
<li><a href="#" class="bwWrapper"><img  src="./imgaes04.jpg" /></a></li>
<li><a href="#" class="bwWrapper"><img  src="./imgaes05.jpg" /></a></li>
<li><a href="#" class="bwWrapper"><img  src="./imgaes06.jpg" /></a></li>
</ul>

続いて、<head>タグ内に以下のJavascript の記述を追加します。
<script>
$(function(){
$('.bwWrapper').BlackAndWhite({
hoverEffect : true,
webworkerPath : false,
invertHoverEffect: true,
intensity:1,
speed: {
fadeIn: 200, 
fadeOut: 800
},
onImageReady:function(img) {
}
});
});
</script>
HTML 側のbwWrapper クラスのリンクタグに対して、マウスオーバーによる画像切り替えを有効にする場合は、hoverEffecttrue にします。

また、「カラー→白黒」への切り替えの場合はinvertHoverEffecttrue にします。

speed は「カラー→白黒」へ切り替わる際の速度です。必要に応じてfadeIn fadeOut の値をそれぞれ調整します。


jQuery.BlackAndWhiteでカラーを白黒に切り替えるデモはこちらです。
「カラー→白黒」のデモ


マウスオーバー時に「白黒→カラー」で表示

jQuery.BlackAndWhite は「カラー→白黒」だけではなく「白黒→カラー」への切り替えも可能です。

<head>タグ内に記述するJavascript は以下のようになり、「白黒→カラー」の場合はinvertHoverEffectfalse にします。
<script>
$(function(){
$('.bwWrapper').BlackAndWhite({
hoverEffect : true,
webworkerPath : false,
invertHoverEffect: false,
intensity:1,
speed: {
fadeIn: 200, 
fadeOut: 800
},
onImageReady:function(img) {
}
});
});
</script>

jQuery.BlackAndWhiteで白黒をカラーに切り替えるデモがこちらです。
「白黒→カラー」のデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す