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

jQueryプラグイン・ライブラリ

2014.06.252024.08.30

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

jQuery.BlackAndWhite のダウンロード
jQuery.BlackAndWhite の設置
マウスオーバー時に「カラー→白黒」で表示
1. HTML
2. Javascript
マウスオーバー時に「白黒→カラー」で表示

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>

<head>

</head>

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

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

HTML

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>

<ul>

</ul>

Javascript

続いて、<head>タグ内に以下のJavascriptの記述を追加します。

<script>
$(function(){
	$('.bwWrapper').BlackAndWhite({
        hoverEffect : true,
        webworkerPath : false,
        invertHoverEffect: true,
        intensity:1,
        speed: {
            fadeIn: 200, 
            fadeOut: 800
        },
        onImageReady:function(img) {
        }
    });
});
</script>

$(function(){

$('.bwWrapper').BlackAndWhite({

hoverEffect : true,

webworkerPath : false,

invertHoverEffect: true,

intensity:1,

speed: {

fadeIn: 200,

fadeOut: 800

onImageReady:function(img) {

}

});

</script>

HTM側のbwWrapperクラスのリンクタグに対して、マウスオーバーによる画像切り替えを有効にする場合は、hoverEffectをtrueにします。

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

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

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

「カラー→白黒」のデモ

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

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

<head>タグ内に記述するJavascript は以下のようになり、「白黒→カラー」の場合はinvertHoverEffectをfalseにします。

<script>
$(function(){
	$('.bwWrapper').BlackAndWhite({
        hoverEffect : true,
        webworkerPath : false,
        invertHoverEffect: false,
        intensity:1,
        speed: {
            fadeIn: 200, 
            fadeOut: 800
        },
        onImageReady:function(img) {
        }
    });
});
</script>