jQuery BlackAndWhiteが実行できません

Question

###前提・実現したいこと
画像マウスオーバー時に白黒からカラーを切り替えるプラグインのBlackAndWhiteを利用しようしたい。

###発生している問題・エラーメッセージ
一応jQueryはなんとなく動いていてブラウザ上では、alt属性が画像左上に表示されており画像をマウスオーバーするとalt属性が消えるような感じになっております。
ちなみにalt属性は下記HTMLコードのparisとparissになります。

BlackAndWhiteは下記でダウンロード致しました。
リンク内容

また分かりやすくマウスオーバー前とマウスオーバー後の画像を添付しておきます。
マウスオーバー前

マウスオーバー後

###該当のソースコード

 [HTML]
     <nav id="pnav">
       <ul>
         <li><a href="service.html" class="bwWrapper"><img src="img/ser222.jpg" alt="pariss"/></a></li>
         <li><a href="service.html" class="bwWrapper"><img src="img/ser222.jpg" alt="paris"/></a></li>
       </ul>
     </nav>

 [CSS]
 #pnav li{
 	display: inline-block;
 	margin:50px 97px;
 	width:300px;
 	height:300px;
 	text-align: center;
 }
 
 .bwWrapper{
 	margin-top: 50px;
 	position:relative;
   display: block;
 }

 [jQuery]
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/jquery.BlackAndWhite.js"></script>
 <script>
 $(function() {
 	$('.bwWrapper').BlackAndWhite({
         hoverEffect : true,
         webworkerPath : false,
         invertHoverEffect: false,
         intensity:1,
         speed: {
             fadeIn: 200,
             fadeOut: 800
         },
         onImageReady:function(img) {
         }
     });
 });
 </script>

###補足情報(言語/FW/ツール等のバージョンなど)
jQuery 1.8.1

Comments

[kei344]

コードブロック内に引用「> 」を入れるとコピーして確認する際に邪魔になるため、外したほうがよいと思います。「alt属性が画像左上に表示」とありますが、それをどこで設定してるのでしょうか。また、プラグイン／ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）

[alfa041]

ご指摘受けました点を修正致しました。ありがとうございます。

[kei344]

ChromeやFirefoxの通常の設定では、alt属性を設定した画像の上にそのようなものは表示されません。それについて表示が消えることが問題であるならば、どのようにその表示を行っているかという情報が必要です。

[alfa041]

特段alt属性表示を行う指示はしていません。現在jQueryのコード自体を消せばalt属性の表示も消える状態になっております。BlackAndWhite本来の白黒からカラーへの動きがカラー（alt属性付き）からカラーへの動作になってしまいます。

[kei344]

すみません、今わかりました。それはaltが表示されているのではなく画像が破損していた場合などのエラー時に表示される画像アイコンですね。それではClorさんの回答が全てです。

Answer 1

ローカルで確認されている場合、CORS制約に引っかかっていると思います。
https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control

実際にサーバーにアップして確認すれば正常に動きます。
ただし、画像はHTMLファイルと同じサーバー上に配置する必要があります。

Comments

[alfa041]

ご返信頂きましてありがとうございます。
なるほどですね。確かにローカルで確認をしておりました。
不明点を詳しく説明を追加致しました。
説明文にもある通り一応マウスオーバー前とマウスオーバー後で変わってはいるのですが、
こちらもサーバーに入れると変わるものなのでしょうか。
度々申し訳ございませんが、ご回答よろしくお願い致します。

Answer 2

動くサンプル：https://jsfiddle.net/j2ja6f7j/

白黒にならない、ということが問題なのであれば、Clorさんのおっしゃるようにクロスオリジンについての制約(https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control)に引っかかっているのではないかと思います。

Chromeでローカルの場合はクロスオリジンで制限されますが、Firefoxはかからなかったと思うので試されてみてはいかがでしょうか。

【Firefox をダウンロード — 自由なウェブブラウザー — Mozilla】
https://www.mozilla.org/ja/firefox/new/

Comments

[alfa041]

Firefoxで確認したところちゃんと表示され解決致しました！ご丁寧にURLの添付もありがとうございます。