Javascript（JQuery）で画像のフィルター効果のバージョンアップしました

　前回の作ったフィルター効果は縦、横の分割だけでしたが、今回は、四角形に分割し表示します。分割数は、縦5ピース　横5ピースで、表示方向は選択することができます。

　使い方は、表示する方向を選択し、「パターン」ボタンをクリックしてください。表示するパターンは大きく分けて、2パターンあります。1つは、1ピースずつ表示します。もう一つは、複数のピースを同時に表示します。この表示順は、「ImageChange-Combine.js」の配列に順番を入れることで設定できます。　使い方の詳細は下記のようになります。

JavaScript イメージフィルターの効果（画像分割編 2）
　「パターン12」はランダム表示です。
JavaScript イメージフィルター（画像分割 2）

「ImageChange-MultiCombine.js」の使い方

「java.js」にて
//表示領域のIDを定義しています。
var ViewId = “#ViewArea”;

//フィルターのオブジェクトを呼び出す
var IMC = new ImageFilter_MultiCombine ();

//メソッドを呼び出す
IMC.cover(Vname,Vhtml,Vdirection);
第一引数は、フィルター名または、フィルター番号（半角数字）、必須です。「ImageChange-MultiCombine.js」のswitchの部分を参照してください。
第二引数は、変更後のhtml（画像）です。必須です。
第三引数は、画像を表示する方向です。指定が無い場合は、フェイドインで表示。

「ImageChange-MultiCombine.js」にて
//表示領域のIDを定義しています。
var ViewId = “#ViewArea”;

表示用のメソッド「animate_view_only」と「animate_view_all」は同時に使用できません。
「animate_view_only」は、画像を順番に表示します。「animate_view_all」は一度に複数のピースを表示できます。最大3段階で表示します。表示順は、「num_ary_1」に表示したい画像の番号を半角で入れてください。画像は、左上が「0」番です。

　ソースコードは、以下のようになっています。もし良かったら参考にしてください。
tar形式でダウンロード
 zip形式でダウンロード

（今回のポイント　）
　配列に数字を入れるだけで、表示順が変更できる点と分割数を簡単に変更できまが、その反面、共通部分の処理をメソッドにまとめましたので、全体を変更するのは少し難しくなっています。また、「animate_view_all」メソッドは、最大3段階で表示できますが、これ以上多くすると表示速度が遅くなるので、3段階を最大にしました。この表示数は設定では増やすことができないので注意してください。