白黒化するjQueryプラグインはいくつかありますが、
その多くがCanvasを利用しており、IE8以前のブラウザでは利用できないという問題があります。
そんな中で見つけたのが、この「jQuery.BlackAndWhite」というjQueryプラグインです。
canvasを使っていないので、IE6でも利用可能です。
元サイト:http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/
↓こちらがデモです
DEMO
使い方も簡単で、
jQueryとプラグインを読み込み、
対象画像の各々の親要素に任意のクラスをつけ、
$([任意のクラス]).BlackAndWhite({[パラメータ]});
で実行するだけです。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 | <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 --> |
CSS
|
1 2 3 4 | .bwWrapper{ position:relative; display:block; } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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> |
デモの下の２段を見ていただけるとわかりますが、
実際には、対象画像の上に白黒化した画像がかぶせてある形なので、
パラメータのhoverEffectをfalseにし、
$(‘[任意のクラス] img:last-child’)などで指定し、表示・非表示を切り替えることで、
自由に白黒とカラーを切り替えることができます。
