2010-03-25

タイル状にアニメーションして画像を切り替える jQuery プラグイン jFancyTile

今まで見た画像切り替えプラグインの中で一番、「おぉぉ」となった jQuery プラグイン、jFancyTile。
何はともあれ、YouTube で公開されている動画を見てみてください！

FLASH と見間違えてもおかしくないです。
jQuery ってすごいなーとしみじみ。

jFancyTile: A jQuery tile shifting image viewer plugin
（デモ）

このプラグインは、ここに触発されて作ったそうです。これもすごくかっこいいです。
Making a Mosaic Slideshow With jQuery & CSS

使い方

画像表示部分の指定は以下の通り

<div id="selector">
  <ul>
    <li><img src="images/img01.jpg" alt="Title 01" /></li>
    <li><img src="images/img02.jpg" alt="Title 02" /></li>
    <!-- More images -->
  </ul>
</div>

見て分かるように、特殊なコーディングテクニックは必要ないです。必要なのは、囲む div に id を付けること。
画像の alt に入れたテキストが画像の上に表示されます。

<head> 内で必要なファイルを読み込み、jfancytile() の指定をします。
CSS の内容、ファイルまでのパスは適宜変更してください。

<head>
<link rel="stylesheet" type="text/css" href="css/jfancytile.css"/>
<script type="text/javascript" src="js/jquery.jfancytile.js"></script>
<script type="text/javascript">
  $("#selector").jfancytile();
</script>
</head>

デフォルトのままのセッティングでいいのであれば、ここで終了。デモ1と同じように動くはずです。

挙動のカスタマイズ

デモ2のように、プラグインの挙動をカスタマイズしたい場合、以下のものを調整してみてください（書かれているのはデフォルト値）。

$("#selector").jfancytile({
  inEasing: "swing",
  outEasing: "swing",
  inSpeed: 1000,
  outSpeed: 1000,
  rowCount: 8,
  columnCount: 13,
  maxTileShift: 3
});
inEasing
タイルから画像に変化する時のイージングアニメーション
outEasing
画像からタイルに変化する時のイージングアニメーション
inSpeed
タイルから画像に変化する時のアニメーションスピード（ミリ秒）
outSpeed
画像からタイルに変化する時のアニメーションスピード（ミリ秒）
rowCount
列の数（数が多くなるとタイルの高さが低くなる）
columnCount
段の数（数が多くなるとタイルの横幅が狭くなる）
maxTileShift
タイルが移動できる位置の最大量

イージングの動きはかなり種類があるので（違いが微妙なものもありますが）、好みのアニメーションを選びましょう。
それぞれの動きは、jQuery Easing – jQuery 日本語リファレンス のサンプルをいろいろ試して確認してみてください。

プラグインがどのように動いているか

プラグインが実際どのようにうごいているか、という内容です。
使用する上ではしらなくても大丈夫なので、興味がない場合はすっ飛ばしてください。

  1. 画像を解析して、alt の内容・サイズ・画像のソースを取得する
  2. 一番大きな画像のサイズに合わせて囲いを作る
  3. HTML から <li> を除去する
  4. ナビゲーションボタンを作って、囲いの中に入れる
  5. rowCount と columnCount に基づいて、必要なタイルの数を計算する
  6. 各タイル用の div を作って、タイルを作る
  7. background-image に画像を適用し、background-position で正しい位置に画像をずらす。
  8. タイルの集合に title を追加する
  9. ランダム位置とフェードアウトする機能を追加する
  10. 指定した位置とフェードインする機能を追加する

という流れでこのプラグインが動いているそうです。

既知の問題

CPU に負荷がかかる。
rowCount、columnCount の値が大きすぎると、ブラウザがクラッシュする。
時々画像のプロパティが読み込めず、極端に小さいサイズになってしまう。
リロードすればちゃんと動くようになるけど、ちょっとね…。
Firefox に比べて、Chrome と Safari の挙動がちょっと違う。
画像が全部読み込まれた後であれば、Chrome/Safari の挙動が正しい挙動。

まとめ

Firefox では不安定、Chrome と Safai では重いですね。
動きは素晴らしいと思うだけに残念です。

また、僕の検証環境では IE6、IE7で動作しませんでした。
画像のおもしろい見せ方ができるプラグインですが、日本国内では IE6、IE7ユーザーがまだまだ多いようなので、使いどころは難しいかもしれません。