Blog

IE6もOK!画像を白黒にするjQueryプラグイン 「jQuery.BlackAndWhite」

白黒化するjQueryプラグインはいくつかありますが、
その多くがCanvasを利用しており、IE8以前のブラウザでは利用できないという問題があります。

そんな中で見つけたのが、この「jQuery.BlackAndWhite」というjQueryプラグインです。
canvasを使っていないので、IE6でも利用可能です。

元サイト:http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/

↓こちらがデモです
DEMO

使い方も簡単で、
jQueryとプラグインを読み込み、
対象画像の各々の親要素に任意のクラスをつけ、
$([任意のクラス]).BlackAndWhite({[パラメータ]});
で実行するだけです。

HTML

CSS

JavaScript

デモの下の2段を見ていただけるとわかりますが、
実際には、対象画像の上に白黒化した画像がかぶせてある形なので、
パラメータのhoverEffectをfalseにし、
$(‘[任意のクラス] img:last-child’)などで指定し、表示・非表示を切り替えることで、
自由に白黒とカラーを切り替えることができます。

 

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ